zoukankan      html  css  js  c++  java
  • jQuery.validate 的form校验

    jQuery验证框架 :

    基本html代码:

     1   <script src="js/jquery-1.9.1.js"></script>
     2     <script src="js/jquery.validate.min.js"></script>
     3     <script>
     4         $(function () {
     5             $('#myForm').validate({
     6 
     7                 rules: {
     8                     //    用户名
     9                     username: {  //指的是input中的name
    10                         required: true,
    11                         rangelength: [6, 11]
    12                     },
    13                     //   密码
    14                     password: {
    15                         required: true,
    16                         rangelength: [11, 12]
    17                     },
    18                 },
    19           
    20                 messages: {
    21                     //   用户名
    22                     username: {
    23                         required: '此项必填',
    24                         rangelength: '用户名长度为6-11位'
    25                     },
    26                     //   密码
    27                     password: {
    28                         required: '此项必填',
    29                         rangelength: '用户名长度为11-12位'
    30                     },            
    31                 },
    32                 // 校验全部通过
    33                 submitHandler: function () {
    34                     alert("校验全部通过!")
    35                 },
    36                
    37             })
    38         })
    39   </script>
    40 
    41 
    42 html:
    43     <form action="" id="myForm">
    44     <!--用户名-->
    45     <p>
    46         <label for="user">username:</label>
    47         <input type="text" name="username" id="user"/>
    48     </p>
    49     <!--密码-->
    50     <p>
    51         <label for="pass">password:</label>
    52         <input type="text" name="password" id="pass"/>
    53     </p>
    54     <!--提交-->
    55     <p><input type="submit" value="提交"/></p>
    56   </form>

    从以上代码中我来说说jQuery Validation的使用。

      1.validate(options)是运行form表单的开始,他是用来验证你所选的form,以上代码的第五行“#myForm"是form的id名。

      2.rules() 是校验规则他就是validate里的options,是用户定义的键/值对规则===键为一个表单元素的 name属性、值为一个简单的字符串或者由规则/参数对组成的一个对象。

      3. messages ()是用户自定义的 键/值 对消息===键为一个表单元素的name属性,值为该表单元素将要显示的消息。

      4.rules() 里的username和password是input中的name值。

      

       5.required的值为true时验证该项是必选项。

      

       6.minlength(length)设置验证元素的最小长度。

      

        7.maxlength(length)设置验证元素的最大长度。

         8.rangelength(range)设置验证元素的一个长度范围。

       9.max(value)设置验证元素的最大值。

       10.min(value)设置验证元素的最小值。

       

       11.range()设置指的范围。

       12.email()验证电子邮箱格式是否正确。

       13.url()  验证URL格式是否正确。

       14.date()验证日期格式是否正确。【注:不验证日期的准确性,只验证格式

       15.submitHandler 当表单通过验证,提交表单。

    // 校验全部通过
                    submitHandler: function () {
                        alert("校验全部通过!")
                    },

       16.invalidHandler当未通过验证的表单提交时,可以在该回调函数中处理一些事情。

     //  校验不通过
                  invalidHandler: function () {
                        alert("no")
                    },

      17.focusInvalid默认值为true,校验不通过时,焦点跳到第一个无效的表单元素。

      18.focusCleanup默认值为true,当表单得到焦点时,移除在该表单上的errorClass并隐藏所有错误消息。【注:避免与focusInvalid一起使用。

      19. errorElement  用html元素类型创建错误消息的容器。默认写在label中

        

      20.errorClass设定样式来定义错误信息的样式。

      21.highlight将未通过验证的表单元素设置高亮。

    highlight: function (element, errorClass) {
                      $(element).addClass(errorClass);
                       $(element).fadeOut.fadeIn();
                    }

    以上这些是我所接触的,关于jQuery验证框架 还有许多。有兴趣的可以查查jQuery.validate.js的API.

  • 相关阅读:
    POJ 2240 Arbitrage spfa 判正环
    POJ 3259 Wormholes spfa 判负环
    POJ1680 Currency Exchange SPFA判正环
    HDU5649 DZY Loves Sorting 线段树
    HDU 5648 DZY Loves Math 暴力打表
    HDU5647 DZY Loves Connecting 树形DP
    CDOJ 1071 秋实大哥下棋 线段树
    HDU5046 Airport dancing links 重复覆盖+二分
    HDU 3335 Divisibility dancing links 重复覆盖
    FZU1686 神龙的难题 dancing links 重复覆盖
  • 原文地址:https://www.cnblogs.com/yhyanjin/p/7056140.html
Copyright © 2011-2022 走看看