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\']'">

1. rules: {
2.  
   email:{
3.  
   validator: function(value){
4.  
   return ...?$/i.test(value);
5.  
   },
6.  
   message: 'Please enter a valid email address.'
7.  
   },
8.  
   url: {
9.  
   validator: function(value){
10.  
    return ...?$/i.test(value);
11.  
    },
12.  
    message: 'Please enter a valid URL.'
13.  
    },
14.  
    length: {
15.  
    validator: function(value, param){
16.  
    var len = $.trim(value).length;
17.  
    return len >= param[0] && len <= param[1]
18.  
    },
19.  
    message: 'Please enter a value between {0} and {1}.'
20.  
    },
21.  
    remote: {
22.  
    validator: function(value, param){
23.  
    var data = {};
24.  
    data[param[1]] = value;
25.  
    var response = $.ajax({
26.  
    url:param[0],
27.  
    dataType:'json',
28.  
    data:data,
29.  
    async:false,
30.  
    cache:false,
31.  
    type:'post'
32.  
    }).responseText;
33.  
    return response == 'true';
34.  
    },
35.  
    message: 'Please fix this field.'
36.  
    }
37.  
    },

 

转载于:https://www.cnblogs.com/Darkqueen/p/9509727.html