zoukankan      html  css  js  c++  java
  • jquery.validate详解二

    五、常用方法及注意问题

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

    $().ready(function() {
     $("#signupForm").validate({
            submitHandler:function(form){
                alert("submitted");   
                form.submit();
            }    
        });
    });

    可以设置validate的默认值,写法如下:
    $.validator.setDefaults({
     submitHandler: function(form) { alert("submitted!");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 

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

    //示例:
    <tr>
        <td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
        <td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
        <td class="status"></td>
    </tr>
    <tr>
        <td style="padding-right: 5px;">
            <input id="dateformat_eu" name="dateformat" type="radio" value="0" />
            <label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
        </td>
        <td style="padding-left: 5px;">
            <input id="dateformat_am" name="dateformat" type="radio" value="1"  />
            <label id="ldateformat_am" for="dateformat_am">02/14/07</label>
        </td>
        <td></td>
    </tr>
    <tr>
        <td class="label">&nbsp;</td>
        <td class="field" colspan="2">
            <div id="termswrap">
                <input id="terms" type="checkbox" name="terms" />
                <label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
            </div>
        </td>
    </tr>

    errorPlacement: function(error, element) {
        if ( element.is(":radio") )
            error.appendTo( element.parent().next().next() );
        else if ( element.is(":checkbox") )
            error.appendTo ( element.next() );
        else
            error.appendTo( element.parent().next() );
    }

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

    errorClassString  Default: "error" 
    指定错误提示的css类名,可以自定义错误提示的样式

    errorElementString  Default: "label" 
    用什么标签标记错误,默认的是label你可以改成em

    errorContainerSelector 
    显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大
    errorContainer: "#messageBox1, #messageBox2"

    errorLabelContainerSelector
    把错误信息统一放在一个容器里面。

    wrapperString
    用什么标签再把上边的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,否则别乱添加。

    onsubmitBoolean  Default: true 
    提交时验证. 设置唯false就用其他方法去验证
    onfocusout:Boolean  Default: true 
    失去焦点是验证(不包括checkboxes/radio buttons)
    onkeyup:Boolean  Default: true 
    keyup时验证.
    onclick:Boolean  Default: true 
    checkboxes 和 radio 点击时验证
    focusInvalid:Boolean  Default: true 
    提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点
    focusCleanup:Boolean  Default: false 
    如果是true那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid 一起用

     

    // 重置表单
    $().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));
    }, "请正确填写您的邮政编码");

    10radiocheckboxselect的验证

     

    1.radiorequired表示必须选中一个
    <input  type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
    <input  type="radio" id="gender_female" value="f" name="gender"/>

     

    2.checkboxrequired表示必须选中
    <input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />

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


    <input type="checkbox" class="checkbox" id="spam_email" value="email" name="spam[]" class="{required:true, 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[]" />

     

        3.selectrequired表示选中的value不能为空
    <select id="jungle" name="jungle" title="Please select something!" class="{required:true}">
        <option value=""></option>
        <option value="1">Buga</option>
        <option value="2">Baga</option>
        <option value="3">Oi</option>
    </select>

     

    selectminlength表示选中的最小个数(可多选的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>

  • 相关阅读:
    hi.baidu.com 百度流量统计
    Autofac is designed to track and dispose of resources for you.
    IIS Manager could not load type for module provider 'SharedConfig' that is declared in administration.config
    How to create and manage configuration backups in Internet Information Services 7.0
    定制swagger的UI
    NSwag在asp.net web api中的使用,基于Global.asax
    NSwag Tutorial: Integrate the NSwag toolchain into your ASP.NET Web API project
    JS变量对象详解
    JS执行上下文(执行环境)详细图解
    JS内存空间详细图解
  • 原文地址:https://www.cnblogs.com/sily-boy/p/4664589.html
Copyright © 2011-2022 走看看