情况:
<select class="easyui-combobox" name="sex" data-options="width:100,panelHeight:72,editable:false,required:true">
<option value="" selected="selected">-- 请选择 --</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
问题:当选中文本没有value值、或文本为'-- 请选择 --'时,怎么样通过required、validType属性添加客户端验证?
JS:
//添加一个验证类型
$.extend($.fn.validatebox.defaults.rules, {
comboxRequired: {
validator: function(value, param){
return value!= param[0];
},
message: '必须选择一个'
}
});
$('#formresetButton').on("click",function(){
$('#myForm').form("reset");
});
$('#formSubmitButton').on("click",function(){
$('#myForm').form("submit",{
onSubmit: function(){
var isValid = $(this).form('validate');
//如果验证失败,返回false,form不提交
console.log(isValid);
return isValid;
}
});
});
HTML:
<form id="myForm" >
<input id="cc" value="001" style="width: 50px;">
<select class="easyui-combobox" name="sex0" id="sex0" data-options="width:100,panelHeight:72,editable:false,required:true,validType:'comboxRequired[\'-- 请选择 --\']'">
<option value="">-- 请选择 --</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
<select class="easyui-combobox" name="sex1" id="sex1" data-options="width:100,panelHeight:72,editable:false,required:true">
<option value="男">男</option>
<option value="女">女</option>
</select>
<button type="button" id="formresetButton">reset<button>
<button type="button" id="formSubmitButton">submit<button>
</form>
不适用标准的form下的type="reset"的button,使用普通button,监听这个button的点击事件,在回调函数中调用EasyUI的form组件的reset方法,即可完成form元素的重置。
通过validType指定验证类型来执行字段验证