EasyUI之表单验证

冷不防 2022-02-04 03:27 297阅读 0赞

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

# EasyUI表单验证 #

## 1.官方提供的验证 ##

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

<table> 
 <thead> 
  <tr> 
   <th>规则</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>email</td> 
   <td align="left">匹配 email 正则表达式规则</td> 
  </tr> 
  <tr> 
   <td>url</td> 
   <td align="left">匹配 URL 正则表达式规则</td> 
  </tr> 
  <tr> 
   <td>length[0,100]</td> 
   <td align="left">允许从 x 到 y 个字符</td> 
  </tr> 
 </tbody> 
</table>

<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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]

## 2.自定义验证 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]

## 3.远程验证 ##

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4]

好了~到此基于EasyUI的验证就到此结束了通过这几种方式应该可以满足各种客户端验证的需求了。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70]: /images/20220204/ce6f0914986142db8af5b1b90b017779.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 1]: /images/20220204/1f9164c1acff4c15babb47f285285067.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 2]: /images/20220204/7a10e9280ef744f0b34d5924af56c6d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 3]: /images/20220204/1d8e11bd08214bfa99208f7ff3506229.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9kcGItYm9ib2thb3lhLXNtLmJsb2cuY3Nkbi5uZXQ_size_16_color_FFFFFF_t_70 4]: /images/20220204/8770b69262214237b2c5502198723b2b.png