jQuery基础学习06 jQuery表单验证插件-Validation

Posted 2020-06-13

 jQuery的基础部分前面都讲完了，那么就看插件了。

关于jQuery表单验证插件-Validation

validation特点：

•  内置验证规则：拥有必填、数字、E-Mail、URL和信用卡号码等19类内置验证规则
• 自定义验证规则：可以很方便地自定义验证规则
• 简单强大的验证信息提示：默认了验证信息提示，并提供了自定义覆盖默认提示信息的功能
• 实时验证：可以通过keyup或者blur事件触发验证，而不仅仅在表单提交的时候验证

使用方法：

1. 引用jQuery库和Validation插件

   <script type="text/javascript" src="jquery-2.2.0.min.js"></script>
   <script type="text/javascript" src="jquery.validate.min.js"></script>

2. 确定哪个表单需要被验证，那么就调用即可

   $("#myForm").validate();

3. 针对不同的字段，进行验证规则编码，设置字段相应的属性

   <input id="username" name="username" class="required email" minilength="2" />
   <!--在上面设置 required为必填，email验证是否为邮箱，如果是url就验证是否为url，minilength=2为最小长度为2---->

更好的使用方法：

　　下面的玩法是为了实现与html元素无关联，通过name属性来关联字段和验证规则的验证写法，这种写法能实现行为和结构的分离。

• 页面

  <input id="myname" name="username"/>

• 代码

     $("#myform").validate({
          rules:{
              username:{
                  required:true,
                  minlength:2,
                  email:true
              },
              url:"url",
              comment:"required"
          }
      });

国际化

　　就是这个插件的验证信息默认是英文的。那么要弄成中文，就要引用新的文件：

　　jquery.validate.messages_cn.js

自定义验证信息

　　valication插件可以很方便地自定义验证规则。

　　$("#myform").validate({
        rules:{
            username:{
                required:true,
                minlength:2,
                email:true
            }
        }
        ,messages:{
            username:{
                required:‘请输入账户邮箱‘,
                email:‘请输入正确的邮箱地址‘
            }
        }
    });

自定义验证信息并美化

　　例如为验证提示信息加入图片：

 　　$("#myform").validate({
        rules:{
            username:{
                required:true,
                minlength:2,
                email:true
            }
            
        }
        ,errorElement:"myErrorElement"//用来创建错误信息提示标签
        ,success:function(label){//验证成功后执行的回调函数
            //label指向上面那个错误提示信息标签myErrorElement
            label.text("") //清空错误消息提示
                 .addClass("success");//加入自定义的success类
        }
    });

    然后在css里面加入对应样式：

myErrorElement.error{
    background:url("2.ico") no-repeat 0px 0px;
    padding-left:48px;
}
myErrorElement.success{
    background:url("1.png") no-repeat 0px 0px;
    padding-left:48px;
}

自定义验证规则

以下为用此jQuery插件实现验证码功能的代码

• 页面

  <p>
      <label for="myValcode">验证码</label>
      <input id="myValcode" name="valcode">=7+9
  </p>

• 代码

  　　//自定义一个验证方法
      $.validator.addMethod(
          "formula",
          function(value,element,param){
              return value==eval(param);
          },
          ‘请正确输入数学公式计算后的结果‘
      );
      //调用该验证规则
      $("#myform").validate({
          rules:{
              username:{
                  required:true,
                  minlength:2,
                  email:true
              }，
              valcode:{formula:7+9}
          }
      });