表单验证

朱雀 2022-07-24 06:28 455阅读 0赞

### 应用 ###

一、引入 <script src="Scripts/jquery-1.7.1.min.js"></script>

二、1）在需要验证的input标签上添加属性data-val="true"，即表示改标签参加验证。

2）继续在标签上添加属性data-val-required="用户名不能为空！"，表示此标签的内容不能为空的验证。

三、显示验证信息，有两种方式显示。一种是集中显示验证信息，另一种是在具体位置显示相对应的验证信息。

1）在需要显示验证信息的位置写入以下代码

1   <div class="validation-summary-valid" data-valmsg summary="true">
    2        <ul>
    3            <li style="display: none"></li>
    4        </ul>
    5   </div>

2）相对应的验证信息显示

1   <input type="text"  name="cus" id="cus" data-val="true" data-val-required="用户名不能为空！" /> <span data-valmsg-for="cus" data-valmsg-replace="true"></span>

以上三部即可完成最基本简单的验证。

如需添加标签的其他验证只需重复第二步即可。

### 验证规则 ###

#### 一、简单规则 ####

刚才我们知道了data-val-required是必输字段，简单的验证规则如下

1.data-val-required 必输字段    
2.data-val-email 必须输入正确格式的电子邮件   
3.data-val-url 必须输入正确格式的网址   
4.data-val-date 必须输入正确格式的日期   
5.data-val-digits: 必须输入正整数  
6.data-val-number:必须输入整数

#### 二、复杂一点的规则 ####

我们知道了简单基本的验证规则，但这些不能满足我们的需求。

1.比如注册确认密码的验证  
（data-val-equalto="密码和确认密码不匹配。" data-val-equalto-other="pwd"）  
这时只设置一个属性不能满足我们的需求。因为我们要找到另一个文本框的值。data-val-equalto-other对应另一个文本框的**name**的值

1  <div class="control-group">
     2        <label class="control-label">
     3                *密码
     4         </label>
     5  　　   <div class="controls">
     6              <input type="password" name="pwd" id="pwd" data-val="true" data-val-required="密码不能为空！" />
     7              <span data-valmsg-for="pwd" data-valmsg-replace="true"></span>
     8         </div>
     9   </div>
    10  <div class="control-group">
    11          <label class="control-label">
    12                  *确认密码
    13            </label>
    14      <div class="controls">
    15                  <input type="password" name="Password1" id="Password1" data-val="true" data-val-required="确认密码不能为空！" data-val-equalto="密码和确认密码不匹配。" data-val-equalto-other="pwd" />
    16                   <span data-valmsg-for="Password1" data-valmsg-replace="true"></span>
    17       </div>
    18</div>

2.data-val-length 字符的长度 ，data-val-length-max表示最大字符数 data-val-length-min 表示最小字符数

1 <div class="control-group">
    2                 <label class="control-label">
    3                     *密码
    4                 </label>
    5                 <div class="controls">
    6                     <input type="password" name="pwd" id="pwd" data-val="true" data-val-required="密码不能为空！" data-val-length-max="100" data-val-length-min="6" data-val-length="密码必须至少包含 6 个字符。" />
    7                     <span data-valmsg-for="pwd" data-valmsg-replace="true"></span>
    8                 </div>
    9             </div>

3.data-val-accept 正确的后缀名，data-val-accept-exts 符合后缀名的集合  
data-val="true" data-val-required="不能为空！" data-val-accept="后缀名为.jpg、.gif或.png" data-val-accept-exts="jpg|gif|png"

4.data-val-range 数字的大小范围，data-val-range-min 最小数 data-val-range-max 最大数

#### 三、再复杂一点的规则（正则） ####

以上的验证规则需要两个或者两个以上的属性才能完成验证，但是这些仍然不能满足我们的需求。比如手机格式的验证，这些我们可能需要正则来辅助我们验证

data-val-regex表示正则的验证方式，data-val-regex-pattern正则的表达式

1   <div class="controls">
    2          <input type="text" id="regex" name="regex" data-val="true" data-val-required="不能为空！" data-val-regex="手机格式不正确" data-val-regex-pattern="(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}" />
    3          <span data-valmsg-for="regex" data-valmsg-replace="true"></span>
    4     </div>

#### 四、再再复杂一点的规则（ajax） ####

有点时候我们需要ajax来验证规则，比如我们常见的检查用户名是否可用

data-val-remote可以帮助我们实现功能，data-val-remote-url表示ajax验证的路径，直接返回true or false 即可完成验证。

1  <div class="controls">
    2            <input type="text" name="loginName" data-val="true" data-val-required="登录名不能为空！" data-val-remote="已经被注册，请选择其他登录名称！" data-val-remote-url="checkuserid.aspx" />
    3            <span data-valmsg-for="loginName" data-valmsg-replace="true"></span>
    4   </div>

#### 五、终极验证规则（自定义验证规则） ####

虽然以上验证规则足够可以我们使用，但是可能需要我们自定义的验证规则。  
熟悉jQuery validate的验证方式知道可以添加自定义的验证规则，因为此验证规则是对jQuery validate的扩展，所以需要在jQuery validate的基础上进行自定义验证。

1)添加jQuery validate自定义验证方法

判断值是否等于“123”

1  $.validator.addMethod('notequal', function (value, element, params)
    2   　　{
    3             return value != "123";
    4  　　});

2)添加扩展方法的自定义方法

1  $.validator.unobtrusive.adapters.add("notequal", function (options)
    2         {
    3             options.rules["notequal"] = {
    4                
    5             };
    6             options.messages["notequal"] = options.message;
    7         });

3)data-val-notequal="姓名不能等于 123"

1   <input type="text" value="" name="cus" id="cus" data-val="true" data-val-notequal="姓名不能等于 123"/>
    2    <span data-valmsg-for="cus" data-valmsg-replace="true"></span>

这样即可完成简单的自定义验证规则。

**有的时候我们需要指定参数来实现自定义验证规则**

1  $.validator.addMethod('notequal', function (value, element, params)
     2         {
     3             return value != params["va"];
     4         });
     5 
     6         $.validator.unobtrusive.adapters.add("notequal", ["va"], function (options)
     7         {
     8             options.rules["notequal"] = {
     9                 va: options.params.va
    10             };
    11             options.messages["notequal"] = options.message;
    12         });

1    <input type="text" value="" name="cus" id="cus" data-val="true" data-val-notequal="姓名不能够等于 123" data-val-notequal-va="123"/>
    2    <span data-valmsg-for="cus" data-valmsg-replace="true"></span>

这样就可以完成比较复杂的自定义验证规则。