zoukankan      html  css  js  c++  java
  • jquery插件validation

    validation插件用于基本的验证

    从上到下的3个引用,分别为 jquery本体的引用,jquery-validation的引用,jquery-validation的错误提示的引用。

    如autocomplete插件一样吧validation插件引进项目后我们回发现多出一个 validate方法。

    语法
     $( 'form' ).validate({  rules: {},errorshow: function (error,element){} })

    参数?
    描述
    rules 返回元素的验证规则。具体有哪些规则和规则的定义向下看。
    errorshow 返回验证不通过是提示的语句。errorshow可以修改
    error 验证不通过时,返货的错误信息
    element 被验证的元素

    注:由于validate方法只能验证form元素
    但是我们要验证的是input元素啊,所以我们只能把要验证input元素发到form中。然后我们在说rules验证规则该如何写。
    注:下面所写的username mail 等全部为input元素的name属性
                       元素name:{验证规则,验证规则...}
    1.      rules: {
    2.                     userName: { required: true, minlength: 7 },
    3.                     mail: { required: true, email: true },
    4.                     passWord: { required: true, minlength: 6, maxlength: 6 },
    5.                     enterpassWord: { required: true, equalTo: password },
    6.                     homepage: { required: true, url: true },
    7.                     birthday: { required: true, date: true },  
    8.                     xueya: {digits: true}
    9.                 },
    更多的验证规则可以查看 错误信息的.js文件。注:equalTo 验证 B是否与A相同 则需要为A设置id属性




    个人写的实例
    <head>
        <title></title>
        <script src="Jquery1.7.js" type="text/javascript"></script>
        <script src="jquery-validation-1.9.0/jquery.validate.js" type="text/javascript"></script>
        <script src="jquery-validation-1.9.0/localization/messages_cn.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#form1').validate({
                    rules: {
                        userName: { required: true, minlength: 7 },
                        mail: { required: true, email: true },
                        passWord: { required: true, minlength: 6, maxlength: 6 },
                        enterpassWord: { required: true, equalTo: password },
                        homepage: { required: true, url: true },
                        birthday: { required: true, date: true },   
                        xueya: {digits:true}
                    },
                    errorshow: function (error, element) {
                        error.appendTo(element.siblings('span'))
                    }
                })
            })
        </script>
    </head>
    <body>
    <form id='form1'>
     <table>
      <tr>
       <td>用户名</td><td><input type="text" name='userName' /></td><td>*</td>
      </tr>
      <tr>
       <td>E-mail</td><td><input type="text" name='mail' /></td><td>*</td>
      </tr>
      <tr>
       <td>密码</td><td><input type="text" name='passWord' id='password'/></td><td>*</td>
      </tr>
      <tr>
       <td>确认密码</td><td><input type="text" name='enterpassWord' /></td><td>*</td>
      </tr>
      <tr>
       <td>主页</td><td><input type="text" name='homepage' /></td><td>*</td>
      </tr>
      <tr>
       <td>生日</td><td><input type="text" name='birthday' /></td><td>*</td>
      </tr>
      <tr>
       <td>血压 </td><td><input type="text" name='xueya' /></td><td>*</td>
      </tr>
     </table>
    </form>
    </body>


  • 相关阅读:
    BZOJ 1049: [HAOI2006]数字序列
    BZOJ 1048: [HAOI2007]分割矩阵
    BZOJ 1047: [HAOI2007]理想的正方形
    BZOJ 1046: [HAOI2007]上升序列
    BZOJ 1045: [HAOI2008] 糖果传递
    Flink学习(十三) Flink 常见核心概念分析
    Flink学习(十二) Sink到JDBC(可扩展到任何关系型数据库)
    Flink学习(十一) Sink到Elasticsearch
    Flink学习(十) Sink到Redis
    Flink学习(九) Sink到Kafka
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/3065829.html
Copyright © 2011-2022 走看看