EasyUI之表单验证

用户4919348

发布于 2019-05-15 11:19:57

1.2K0

发布于 2019-05-15 11:19:57

文章被收录于专栏：波波烤鸭

当我们开发一个管理类项目的时候，EasyUI是我常用的一个jquery框架，而表单验证显然是我们必须要实现的功能，而使用基于EasyUI的验证功能就比较简便了，本文来介绍下具体的用法

EasyUI表单验证

1.官方提供的验证

验证规则是通过使用 required 和 validType 属性来定义的。

规则	说明
email	匹配 email 正则表达式规则
url	匹配 URL 正则表达式规则
length[0,100]	允许从 x 到 y 个字符

<tr>
   <td>Name:</td>
   <td><input class="easyui-textbox" type="text" name="name" data-options="required:true,validType:'length[2,5]'"></input></td>
</tr>
<tr>
    <td>Email:</td>
    <td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'email'"></input></td>
</tr>
<tr>
    <td>url:</td>
    <td><input class="easyui-textbox" type="text" name="email" data-options="required:true,validType:'url'"></input></td>
</tr>

2.自定义验证

官方所提供的验证类型就那么几种并不能满足我们所有的验证需求，所以此时我们需要自定义验证规则。重写 $.fn.validatebox.defaults.rules，来定义一个验证函数和无效的信息,实现如下:

 <tr>
  <td>手机号码:</td>
  <td><input class="easyui-textbox" type="text" name="subject" data-options="required:true" validType='phoneNum' ></input></td>
</tr>
<tr>
    <td>密码:</td>
    <td><input class="easyui-textbox" type="text" id="pwd" name="pwd" data-options="required:true"></input></td>
</tr>
<tr>
    <td>确认密码:</td>
    <td><input class="easyui-textbox" type="text" name="subject" data-options="required:true"  validType="equals['#pwd']"></input></td>
</tr>

 <script type="text/javascript">
     $(function(){
         $.extend($.fn.validatebox.defaults.rules, {
             phoneNum: { //验证手机号
                 validator: function(value, param){
                     return /^1[3-8]+\d{9}$/.test(value);
                 },
                 message: '请输入正确的手机号码。'
             },

             equals: {
                 validator: function(value,param){
                     return value == $(param[0]).val();
                 },
                 message: '密码不一致.'
             }
         });
     })
 </script>

3.远程验证

有些时候我们需要同服务器交互验证，此时easyUI验证也提供的有此功能，remote[‘http://…/action.do’,‘paramName’]：发送 ajax 请求来验证值，成功时返回 ‘true’ 。实现如下。

<input class="easyui-textbox" name="username"
		style="width:100%" data-options="label:'账号:',required:true,invalidMessage:'账号已存在！'" 
		validType="remote['/sys/user/validateUserName', 'username']">

服务端返回true表示验证通过false表示验证出错，可以通过invalidMessage属性来自定义验证出错时的提示信息。