zoukankan      html  css  js  c++  java
  • 【jQuery基础学习】06 jQuery表单验证插件-Validation

     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}
              }
          });
  • 相关阅读:
    yii 引入文件
    CodeForces 621C Wet Shark and Flowers
    面试题题解
    POJ 2251 Dungeon Master
    HDU 5935 Car(模拟)
    HDU 5938 Four Operations(暴力枚举)
    CodeForces 722C Destroying Array(并查集)
    HDU 5547 Sudoku(dfs)
    HDU 5583 Kingdom of Black and White(模拟)
    HDU 5512 Pagodas(等差数列)
  • 原文地址:https://www.cnblogs.com/vvjiang/p/5176635.html
Copyright © 2011-2022 走看看