EasyUI中Validatebox验证框的简单使用

素颜马尾好姑娘i 2023-10-18 20:17 60阅读 0赞

## 场景 ##

### 效果 ###

![Image 1][]![20190621201133977.gif][]

### 属性 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>类型</th> 
   <th>描述</th> 
   <th>默认值</th> 
  </tr> 
  <tr> 
   <td>required</td> 
   <td>boolean</td> 
   <td>定义是否字段应被输入。</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>validType</td> 
   <td>string,array</td> 
   <td>定义字段的验证类型，比如 email、url，等等。可能的值：<br> 1、验证类型字符串，应用单个验证规则。<br> 2、验证类型数组，应用多个验证规则。单个字段上的多个验证规则自版本 1.3.2 起可用。<br><br> 代码实例： <pre>&nbsp;</pre> 
    <ol> 
     <li>&lt;input class="easyui-validatebox" data-options="required:true,validType:'url'"&gt;</li> 
     <li>&lt;input class="easyui-validatebox" data-options="</li> 
     <li>required:true,</li> 
     <li>validType:['email','length[0,20]']</li> 
     <li>"&gt;</li> 
    </ol></td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>delay</td> 
   <td>number</td> 
   <td>延迟验证最后的输入值。该属性自版本 1.3.2 起可用。</td> 
   <td>200</td> 
  </tr> 
  <tr> 
   <td>missingMessage</td> 
   <td>string</td> 
   <td>当文本框为空时出现的提示文本。</td> 
   <td>该字段是必需的。</td> 
  </tr> 
  <tr> 
   <td>invalidMessage</td> 
   <td>string</td> 
   <td>当文本框的内容无效时出现的提示文本。</td> 
   <td>null</td> 
  </tr> 
  <tr> 
   <td>tipPosition</td> 
   <td>string</td> 
   <td>定义当文本框的内容无效时提示消息的位置。可能的值：'left'、'right'。该属性自版本 1.3.2 起可用。</td> 
   <td>right</td> 
  </tr> 
  <tr> 
   <td>deltaX</td> 
   <td>number</td> 
   <td>在 X 方向的提示偏移。该属性自版本 1.3.3 起可用。</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>novalidate</td> 
   <td>boolean</td> 
   <td>当设置为 true 时，则禁用验证。该属性自版本 1.3.4 起可用。</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>

### 方法 ###

<table> 
 <tbody> 
  <tr> 
   <th>名称</th> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>destroy</td> 
   <td>none</td> 
   <td>移除并销毁该组件。</td> 
  </tr> 
  <tr> 
   <td>validate</td> 
   <td>none</td> 
   <td>进行验证以判定文本框的内容是否有效。</td> 
  </tr> 
  <tr> 
   <td>isValid</td> 
   <td>none</td> 
   <td>调用 validate 方法并且返回验证结果，true 或者 false。</td> 
  </tr> 
  <tr> 
   <td>enableValidation</td> 
   <td>none</td> 
   <td>启用验证。该方法自版本 1.3.4 起可用。</td> 
  </tr> 
  <tr> 
   <td>disableValidation</td> 
   <td>none</td> 
   <td>禁用验证。该方法自版本 1.3.4 起可用。</td> 
  </tr> 
 </tbody> 
</table>

## 实现 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
        <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
        <script type="text/javascript" src="/easyui/jquery.min.js"></script>
        <script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
    </head>
    <body>
    <input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'"><br>
    <input id="vv1"><br>
    <input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true"><br>
    <input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"
           required="required" validType="equals['#pwd']"><br>
    
    <script type="text/javascript">
        $('#vv1').validatebox({
            required: true,
            validType: 'email'
        });
        $.extend($.fn.validatebox.defaults.rules, {
            equals: {
                validator: function(value,param){
                    return value == $(param[0]).val();
                },
                message: '密码不一致'
            }
        });
    </script>
    </body>
    </html>

[Image 1]: 
[20190621201133977.gif]: https://img-blog.csdnimg.cn/20190621201133977.gif