zoukankan      html  css  js  c++  java
  • js-jquery-Validate校验【一】

    一、导入 js 库

    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

    二、默认校验规则

    序号规则描述
    1 required:true 必须输入的字段。
    2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
    3 email:true 必须输入正确格式的电子邮件。
    4 url:true 必须输入正确格式的网址。
    5 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
    6 dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
    7 number:true 必须输入合法的数字(负数,小数)。
    8 digits:true 必须输入整数。
    9 creditcard: 必须输入合法的信用卡号。
    10 equalTo:"#field" 输入值必须和 #field 相同。
    11 accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
    12 maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
    13 minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
    14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
    15 range:[5,10] 输入值必须介于 5 和 10 之间。
    16 max:5 输入值不能大于 5。
    17 min:10 输入值不能小于 10。

    三、默认提示

    messages: {
        required: "This field is required.",
        remote: "Please fix this field.",
        email: "Please enter a valid email address.",
        url: "Please enter a valid URL.",
        date: "Please enter a valid date.",
        dateISO: "Please enter a valid date ( ISO ).",
        number: "Please enter a valid number.",
        digits: "Please enter only digits.",
        creditcard: "Please enter a valid credit card number.",
        equalTo: "Please enter the same value again.",
        maxlength: $.validator.format( "Please enter no more than {0} characters." ),
        minlength: $.validator.format( "Please enter at least {0} characters." ),
        rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ),
        range: $.validator.format( "Please enter a value between {0} and {1}." ),
        max: $.validator.format( "Please enter a value less than or equal to {0}." ),
        min: $.validator.format( "Please enter a value greater than or equal to {0}." )
    }

    所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。

    jQuery Validate提供了中文信息提示包,位于下载包的 dist/localization/messages_zh.js,内容如下:

    (function( factory ) {
        if ( typeof define === "function" && define.amd ) {
            define( ["jquery", "../jquery.validate"], factory );
        } else {
            factory( jQuery );
        }
    }(function( $ ) {
    
    /*
     * Translated default messages for the jQuery validation plugin.
     * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語)
     */
    $.extend($.validator.messages, {
        required: "这是必填字段",
        remote: "请修正此字段",
        email: "请输入有效的电子邮件地址",
        url: "请输入有效的网址",
        date: "请输入有效的日期",
        dateISO: "请输入有效的日期 (YYYY-MM-DD)",
        number: "请输入有效的数字",
        digits: "只能输入数字",
        creditcard: "请输入有效的信用卡号码",
        equalTo: "你的输入不相同",
        extension: "请输入有效的后缀",
        maxlength: $.validator.format("最多可以输入 {0} 个字符"),
        minlength: $.validator.format("最少要输入 {0} 个字符"),
        rangelength: $.validator.format("请输入长度在 {0} 到 {1} 之间的字符串"),
        range: $.validator.format("请输入范围在 {0} 到 {1} 之间的数值"),
        max: $.validator.format("请输入不大于 {0} 的数值"),
        min: $.validator.format("请输入不小于 {0} 的数值")
    });
    
    }));
    View Code

    你可以将该本地化信息文件 dist/localization/messages_zh.js 引入到页面:

    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>

    四、使用方式

    1、将校验规则写到控件中

    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
    <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
    <script>
    $.validator.setDefaults({
        submitHandler: function() {
          alert("提交事件!");
        }
    });
    $().ready(function() {
        $("#commentForm").validate();
    });
    </script>
    
    <form class="cmxform" id="commentForm" method="get" action="">
      <fieldset>
        <legend>输入您的名字,邮箱,URL,备注。</legend>
        <p>
          <label for="cname">Name (必需, 最小两个字母)</label>
          <input id="cname" name="name" minlength="2" type="text" required>
        </p>
        <p>
          <label for="cemail">E-Mail (必需)</label>
          <input id="cemail" type="email" name="email" required>
        </p>
        <p>
          <label for="curl">URL (可选)</label>
          <input id="curl" type="url" name="url">
        </p>
        <p>
          <label for="ccomment">备注 (必需)</label>
          <textarea id="ccomment" name="comment" required></textarea>
        </p>
        <p>
          <input class="submit" type="submit" value="Submit">
        </p>
      </fieldset>
    </form>
    View Code

    2、将校验规则写到 js 代码中

    $().ready(function() {
    // 在键盘按下并释放及提交后验证提交表单
      $("#signupForm").validate({
        rules: {
          firstname: "required",
          lastname: "required",
          username: {
            required: true,
            minlength: 2
          },
          password: {
            required: true,
            minlength: 5
          },
          confirm_password: {
            required: true,
            minlength: 5,
            equalTo: "#password"
          },
          email: {
            required: true,
            email: true
          },
          topic: {
            required: "#newsletter:checked",
            minlength: 2
          },
          agree: "required"
        },
        messages: {
          firstname: "请输入您的名字",
          lastname: "请输入您的姓氏",
          username: {
            required: "请输入用户名",
            minlength: "用户名必需由两个字母组成"
          },
          password: {
            required: "请输入密码",
            minlength: "密码长度不能小于 5 个字母"
          },
          confirm_password: {
            required: "请输入密码",
            minlength: "密码长度不能小于 5 个字母",
            equalTo: "两次密码输入不一致"
          },
          email: "请输入一个正确的邮箱",
          agree: "请接受我们的声明",
          topic: "请选择两个主题"
        }
    });
    View Code

    messages 处,如果某个控件没有 message,将调用默认的信息

    <form class="cmxform" id="signupForm" method="get" action="">
      <fieldset>
        <legend>验证完整的表单</legend>
        <p>
          <label for="firstname">名字</label>
          <input id="firstname" name="firstname" type="text">
        </p>
        <p>
          <label for="lastname">姓氏</label>
          <input id="lastname" name="lastname" type="text">
        </p>
        <p>
          <label for="username">用户名</label>
          <input id="username" name="username" type="text">
        </p>
        <p>
          <label for="password">密码</label>
          <input id="password" name="password" type="password">
        </p>
        <p>
          <label for="confirm_password">验证密码</label>
          <input id="confirm_password" name="confirm_password" type="password">
        </p>
        <p>
          <label for="email">Email</label>
          <input id="email" name="email" type="email">
        </p>
        <p>
          <label for="agree">请同意我们的声明</label>
          <input type="checkbox" class="checkbox" id="agree" name="agree">
        </p>
        <p>
          <label for="newsletter">我乐意接收新信息</label>
          <input type="checkbox" class="checkbox" id="newsletter" name="newsletter">
        </p>
        <fieldset id="newsletter_topics">
          <legend>主题 (至少选择两个) - 注意:如果没有勾选“我乐意接收新信息”以下选项会隐藏,但我们这里作为演示让它可见</legend>
          <label for="topic_marketflash">
            <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic">Marketflash
          </label>
          <label for="topic_fuzz">
            <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic">Latest fuzz
          </label>
          <label for="topic_digester">
            <input type="checkbox" id="topic_digester" value="digester" name="topic">Mailing list digester
          </label>
          <label for="topic" class="error">Please select at least two topics you'd like to receive.</label>
        </fieldset>
        <p>
          <input class="submit" type="submit" value="提交">
        </p>
      </fieldset>
    </form>
    View Code

    required: true 值是必须的。

    required: "#aa:checked" 表达式的值为真,则需要验证。
    required: function(){} 返回为真,表示需要验证。

    后边两种常用于,表单中需要同时填或不填的元素。

    五、常用方法及注意问题

    1、用其他方式替代默认的 SUBMIT

    $().ready(function() {
     $("#signupForm").validate({
            submitHandler:function(form){
                alert("提交事件!");   
                form.submit();
            }    
        });
    });

    使用 ajax 方式

     $(".selector").validate({     
     submitHandler: function(form) 
       {      
          $(form).ajaxSubmit();     
       }  
     }) 

    可以设置 validate 的默认值,写法如下:

    $.validator.setDefaults({
      submitHandler: function(form) { alert("提交事件!");form.submit(); }
    });

    如果想提交表单, 需要使用 form.submit(),而不要使用 $(form).submit()。

    2、debug,只验证不提交表单

    如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便。

    $().ready(function() {
     $("#signupForm").validate({
            debug:true
        });
    });

    如果一个页面中有多个表单都想设置成为 debug,则使用:

    $.validator.setDefaults({
       debug: true
    })

    3、ignore:忽略某些元素不验证

    ignore: ".ignore"

    4、更改错误信息显示的位置

    errorPlacementCallback

    指明错误放置的位置,默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面。

    errorPlacement: function(error, element) {  
        error.appendTo(element.parent());  
    }

    实例

    <p>将错误信息放在 label 元素后并使用 span 元素包裹它</p>
    
    <form method="get" class="cmxform" id="form1" action="">
      <fieldset>
        <legend>Login Form</legend>
        <p>
          <label for="user">Username</label>
          <input id="user" name="user" required minlength="3">
        </p>
        <p>
          <label for="password">Password</label>
          <input id="password" type="password" maxlength="12" name="password" required minlength="5">
        </p>
        <p>
          <input class="submit" type="submit" value="Login">
        </p>
      </fieldset>
    </form>

    代码的作用是:一般情况下把错误信息显示在 <td class="status"></td> 中,如果是 radio 则显示在 <td></td> 中,如果是 checkbox 则显示在内容的后面。

    参数类型描述默认值
    errorClass String 指定错误提示的 css 类名,可以自定义错误提示的样式。 "error"
    errorElement String 用什么标签标记错误,默认是 label,可以改成 em。 "label"
    errorContainer Selector 显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大。
    errorContainer: "#messageBox1, #messageBox2"
     
    errorLabelContainer Selector 把错误信息统一放在一个容器里面。  
    wrapper String 用什么标签再把上边的 errorELement 包起来。  

     

     

     

     

     

     

    一般这三个属性同时使用,实现在一个容器内显示所有错误提示的功能,并且没有信息时自动隐藏。

    errorContainer: "div.error",
    errorLabelContainer: $("#signupForm div.error"),
    wrapper: "li"

    5、更改错误信息显示的样式

    设置错误提示的样式,可以增加图标显示,在该系统中已经建立了一个 validation.css,专门用于维护校验文件的样式。

    input.error { border: 1px solid red; }
    label.error {
      background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
    
      padding-left: 16px;
    
      padding-bottom: 2px;
    
      font-weight: bold;
    
      color: #EA5200;
    }
    label.checked {
      background:url("./demo/images/checked.gif") no-repeat 0px 0px;
    }

    6、每个字段验证通过执行函数

    successString,Callback

    要验证的元素通过验证后的动作,如果跟一个字符串,会当作一个 css 类,也可跟一个函数。

    success: function(label) {
        // set &nbsp; as text for IE
        label.html("&nbsp;").addClass("checked");
        //label.addClass("valid").text("Ok!")
    }

    添加 "valid" 到验证元素,在 CSS 中定义的样式 <style>label.valid {}</style>。

    success: "valid"

    7、验证的触发方式修改

    下面的虽然是 boolean 型的,但建议除非要改为 false,否则别乱添加。

    触发方式类型描述默认值
    onsubmit Boolean 提交时验证。设置为 false 就用其他方法去验证。 true
    onfocusout Boolean 失去焦点时验证(不包括复选框/单选按钮)。 true
    onkeyup Boolean 在 keyup 时验证。 true
    onclick Boolean 在点击复选框和单选按钮时验证。 true
    focusInvalid Boolean 提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点。 true
    focusCleanup Boolean 如果是 true 那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid 一起用。 false









    // 重置表单 $().ready(function() { var validator = $("#signupForm").validate({ submitHandler:function(form){ alert("submitted"); form.submit(); } }); $("#reset").click(function() { validator.resetForm(); }); });

    8、异步验证

    remoteURL

    使用 ajax 方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用 data 选项。

    remote: "check-email.php"
    remote: {
        url: "check-email.php",     //后台处理程序
        type: "post",               //数据发送方式
        dataType: "json",           //接受数据格式   
        data: {                     //要传递的数据
            username: function() {
                return $("#username").val();
            }
        }
    }

    远程地址只能输出 "true" 或 "false",不能有其他输出。

    9、添加自定义校验

    addMethodname, method, message

    自定义验证方法

    // 中文字两个字节
    jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
        var length = value.length;
        for(var i = 0; i < value.length; i++){
            if(value.charCodeAt(i) > 127){
                length++;
            }
        }
      return this.optional(element) || ( length >= param[0] && length <= param[1] );   
    }, $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)"));
    
    // 邮政编码验证   
    jQuery.validator.addMethod("isZipCode", function(value, element) {   
        var tel = /^[0-9]{6}$/;
        return this.optional(element) || (tel.test(value));
    }, "请正确填写您的邮政编码");

    注意:要在 additional-methods.js 文件中添加或者在 jquery.validate.js 文件中添加。建议一般写在 additional-methods.js 文件中。

    注意:在 messages_cn.js 文件中添加:isZipCode: "只能包括中文字、英文字母、数字和下划线"。调用前要添加对 additional-methods.js 文件的引用。

    10、radio 和 checkbox、select 的验证

    radio 的 required 表示必须选中一个。

    <input  type="radio" id="gender_male" value="m" name="gender" required />
    <input  type="radio" id="gender_female" value="f" name="gender"/>

    checkbox 的 required 表示必须选中。

    <input type="checkbox" class="checkbox" id="agree" name="agree" required />

    checkbox 的 minlength 表示必须选中的最小个数,maxlength 表示最大的选中个数,rangelength:[2,3] 表示选中个数区间。

    <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" required minlength="2" />
    <input type="checkbox" class="checkbox" id="spam_phone" value="phone" name="spam[]" />
    <input type="checkbox" class="checkbox" id="spam_mail" value="mail" name="spam[]" />

    select 的 required 表示选中的 value 不能为空。

    <select id="jungle" name="jungle" title="Please select something!" required>
        <option value=""></option>
        <option value="1">Buga</option>
        <option value="2">Baga</option>
        <option value="3">Oi</option>
    </select>

    select 的 minlength 表示选中的最小个数(可多选的 select),maxlength 表示最大的选中个数,rangelength:[2,3] 表示选中个数区间。

    <select id="fruit" name="fruit" title="Please select at least two fruits" class="{required:true, minlength:2}" multiple="multiple">
        <option value="b">Banana</option>
        <option value="a">Apple</option>
        <option value="p">Peach</option>
        <option value="t">Turtle</option>
    </select>

     

  • 相关阅读:
    阿里消息队列中间件 RocketMQ 源码分析 —— Message 拉取与消费(上)
    数据库中间件 ShardingJDBC 源码分析 —— SQL 解析(三)之查询SQL
    数据库分库分表中间件 ShardingJDBC 源码分析 —— SQL 解析(六)之删除SQL
    数据库分库分表中间件 ShardingJDBC 源码分析 —— SQL 解析(五)之更新SQL
    消息队列中间件 RocketMQ 源码分析 —— Message 存储
    源码圈 300 胖友的书单整理
    数据库分库分表中间件 ShardingJDBC 源码分析 —— SQL 路由(一)分库分表配置
    数据库分库分表中间件 ShardingJDBC 源码分析 —— SQL 解析(四)之插入SQL
    数据库分库分表中间件 ShardingJDBC 源码分析 —— SQL 路由(二)之分库分表路由
    C#中Math类的用法
  • 原文地址:https://www.cnblogs.com/bjlhx/p/6692008.html
Copyright © 2011-2022 走看看