easy-ui的表单校验
3. 表单提交时的校验
easyUI的验证,定义input标签的class=“easyui-validatebox”,验证在dataoptions属性中。先看一段简单的代码:
验证用户名为必填字段:
<input class="easyui-validatebox" missingMessage="请填写用户名" data-options="required:true">
验证登录名必填且长度为1—5之间:
<input class="easyui-validatebox" missingMessage="请填写登录名" data-options="required:true,validType:'length[1,5]'">
自定义校验格式:easyUI提供了email、length、URL几个常用的验证,更多的校验,可以自己定义,例如,要验证密码长度为6,自定义方式如下:
<input class="easyui-validatebox" missingMessage="请填写密码" data-options="required:true,validType:'minLength[6,\'密码长度为6\']'">
-
rules: {
-
email:{
-
validator: function(value){
-
return ...?$/i.test(value);
-
},
-
message: 'Please enter a valid email address.'
-
},
-
url: {
-
validator: function(value){
-
return ...?$/i.test(value);
-
},
-
message: 'Please enter a valid URL.'
-
},
-
length: {
-
validator: function(value, param){
-
var len = $.trim(value).length;
-
return len >= param[0] && len <= param[1]
-
},
-
message: 'Please enter a value between {0} and {1}.'
-
},
-
remote: {
-
validator: function(value, param){
-
var data = {};
-
data[param[1]] = value;
-
var response = $.ajax({
-
url:param[0],
-
dataType:'json',
-
data:data,
-
async:false,
-
cache:false,
-
type:'post'
-
}).responseText;
-
return response == 'true';
-
},
-
message: 'Please fix this field.'
-
}
-
},