江苏福彩快三jQuery插件之验证控件jquery

作者:江苏福彩快三计算机网络

后边的话

前几天读书一下jQuery.Validate插件,为便于日后读书查看和大范围今日头条园友分享,特记于此。

jQuery Validate

jQuery Validate 插件为表单提供了精锐的验证成效,让客户端表单验证变得更简便易行,同时提供了大批量的定制选项,满意应用程序各样供给。该插件捆绑了一套立见成效的辨证措施,包罗U凯雷德L 和电子邮件验证,同时提供了二个用来编排用户自定义方法的 API。全数的包扎格局默许使用克罗地亚(Croatia)语作为错误消息,且已翻译成其余 37 种语言。

该插件是由 Jörn Zaefferer 编写和维护的,他是 jQuery 共青团和少先队的一名成员,是 jQuery UI 共青团和少先队的主要开垦人士,是 QUnit 的掩护人士。该插件在 二〇〇五 年 jQuery 开始时期的时候就早就开始产出,并直接更新到现在。近些日子版本是 1.11.1。

访问 jQuery Validate 官网,下载最新版的 jQuery Validate 插件。

最常使用javascript的地方便是表单的印证,而jQuery作为多个了不起的javascript库,也提供了七个可观的表单验证插件——Validation。Validation是野史最久远的jQuery插件之一,经过了整个世界限量内差异门类的认证,并获取了广大Web开辟者的好评。本文将详细介绍validation插件

本博客转发自:jQuery Validate

导入 js 库

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></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。

jQuery Validate插件为表单提供了强硬的验证功能,让客户端表单验证变得更简便,同时提供了大气的定制选项,满足应用程序各类须要。该插件捆绑了一套一蹴而就的辨证方式,包蕴U途胜L 和电子邮件验证,同期提供了多个用来编排用户自定义方法的 API。所有的包扎格局暗许使用捷克语作为错误消息,且已翻译成其余 37 种语言

jQuery Validate 插件为表单提供了庞大的评释功用,让客户端表单验证变得更简明,相同的时间提供了汪洋的定制选项,满足应用程序种种须要。该插件捆绑了一套立见成效的印证措施,包含U本田CR-VL 和电子邮件验证,相同的时间提供了多少个用来编排用户自定义方法的 API。全数的包扎情势暗中认可使用爱沙尼亚语作为错误新闻,且已翻译成别的 37 种语言。

暗中同意提醒

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).",
    dateDE: "Bitte geben Sie ein gültiges Datum ein.",
    number: "Please enter a valid number.",
    numberDE: "Bitte geben Sie eine Nummer ein.",
    digits: "Please enter only digits",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    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}.")
},

如须求修改,可在 js 代码中出席:

jQuery.extend(jQuery.validator.messages, {
    required: "必选字段",
    remote: "请修正该字段",
    email: "请输入正确格式的电子邮件",
    url: "请输入合法的网址",
    date: "请输入合法的日期",
    dateISO: "请输入合法的日期 (ISO).",
    number: "请输入合法的数字",
    digits: "只能输入整数",
    creditcard: "请输入合法的信用卡号",
    equalTo: "请再次输入相同的值",
    accept: "请输入拥有合法后缀名的字符串",
    maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
    minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
    rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
    range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
    max: jQuery.validator.format("请输入一个最大为{0} 的值"),
    min: jQuery.validator.format("请输入一个最小为{0} 的值")
});

推荐做法,将此文件放入 messages_cn.js 中,在页面中引进:

<script src="../js/messages_cn.js" type="text/javascript"></script>

作为一个行业内部的印证方法库,Validation具备以下特征:

该插件是由 Jörn Zaefferer 编写和保险的,他是 jQuery 团队的一名成员,是 jQuery UI 共青团和少先队的严重性开拓人士,是 QUnit 的珍爱职员。该插件在 2006 年 jQuery 开始的一段时代的时候就曾经上马现出,并向来更新现今。近期版本是 1.13.1。

选择格局

1、内置验证法则:具备必填、数字、E-Mail、U奇骏L和银行卡号等19类内置验证法则

访问 jQuery Validate 官网,下载最新版的 jQuery Validate 插件。

1、将校验准绳写到控件中

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="../js/jquery.metadata.js" type="text/javascript"></script>

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


<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" class="required" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" class="required email" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" class="{required:true,minlength:5}" />
 </p>
 <p>
  <label for="confirm_password">确认密码</label>
  <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
 </p>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

利用 class="{}" 的诀窍,必须引进包:jquery.metadata.js。

能够行使如下的艺术,修改提示内容:

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

在使用 equalTo 关键字时,后边的开始和结果必须抬高引号,代码如下所示:

class="{required:true,minlength:5,equalTo:'#password'}"

2、自定义表达准绳:能够很便利地自定义表达法规


2、将官和校官验准绳写到 js 代码中

$().ready(function() {
 $("#signupForm").validate({
        rules: {
   firstname: "required",
   email: {
    required: true,
    email: true
   },
   password: {
    required: true,
    minlength: 5
   },
   confirm_password: {
    required: true,
    minlength: 5,
    equalTo: "#password"
   }
  },
        messages: {
   firstname: "请输入姓名",
   email: {
    required: "请输入Email地址",
    email: "请输入正确的email地址"
   },
   password: {
    required: "请输入密码",
    minlength: jQuery.format("密码不能小于{0}个字 符")
   },
   confirm_password: {
    required: "请输入确认密码",
    minlength: "确认密码不能小于5个字符",
    equalTo: "两次输入密码不一致不一致"
   }
  }
    });
});

messages 处,借使有个别控件未有 message,将调用暗中同意的音信

<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" />
 </p>
 <p>
  <label for="password">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>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

required:true 必须有值。
required:"#aa:checked" 表明式的值为真,则要求表达。
required:function(){} 再次回到为真,表示须求验证。

背后二种常用于,表单中须要同有时候填或不填的元素。

3、轻松庞大的证实消息提醒:暗中同意了求证新闻提醒,并提供自定义覆盖私下认可提醒音信的效应

导入 js 库

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>

常用方法及注意难题

4、实时验证:能够通过keyup或blur事件触发验证

暗中认可校验准则

江苏福彩快三 1

1、用别的艺术取代暗许的 SUBMIT

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

使用 ajax 方式

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

可以设置 validate 的暗许值,写法如下:

 $.validator.setDefaults({
 submitHandler: function(form) { alert("submitted!");form.submit(); }
});

比如想付出表单, 供给接纳 form.submit(),而不要接纳 $(form).submit()。

validation作为jQuery的三个插件,使用时索要同jQuery一齐引进,注意要先引进jquery

暗许提示

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).",
    dateDE: "Bitte geben Sie ein gültiges Datum ein.",
    number: "Please enter a valid number.",
    numberDE: "Bitte geben Sie eine Nummer ein.",
    digits: "Please enter only digits",
    creditcard: "Please enter a valid credit card number.",
    equalTo: "Please enter the same value again.",
    accept: "Please enter a value with a valid extension.",
    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}.")
},

如要求修改,可在 js 代码中出席:

jQuery.extend(jQuery.validator.messages, {
    required: "必选字段",
    remote: "请修正该字段",
    email: "请输入正确格式的电子邮件",
    url: "请输入合法的网址",
    date: "请输入合法的日期",
    dateISO: "请输入合法的日期 (ISO).",
    number: "请输入合法的数字",
    digits: "只能输入整数",
    creditcard: "请输入合法的信用卡号",
    equalTo: "请再次输入相同的值",
    accept: "请输入拥有合法后缀名的字符串",
    maxlength: jQuery.validator.format("请输入一个 长度最多是 {0} 的字符串"),
    minlength: jQuery.validator.format("请输入一个 长度最少是 {0} 的字符串"),
    rangelength: jQuery.validator.format("请输入 一个长度介于 {0} 和 {1} 之间的字符串"),
    range: jQuery.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
    max: jQuery.validator.format("请输入一个最大为{0} 的值"),
    min: jQuery.validator.format("请输入一个最小为{0} 的值")
});

引入做法,将此文件放入 messages_cn.js 中,在页面中引进:

<script src="../js/messages_cn.js" type="text/javascript"></script>

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

一经这一个参数为true,那么表单不会交到,只举行自己批评,调节和测量检验时特别平价。

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

借使一个页面中有八个表单都想设置成为 debug,则运用:

$.validator.setDefaults({
   debug: true
})
<script src="http://www.shgt168.com/uploads/allimg/190815/0453333E5-1.jpg"></script>
<script src="http://www.shgt168.com/uploads/allimg/190815/0453331H5-2.jpg"></script>

行使办法

3、ignore:忽略某个因素不说明

ignore: ".ignore"

快速上手

1、将官和校官验法规写到控件中
<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="../js/jquery.metadata.js" type="text/javascript"></script>

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


<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" class="required" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" class="required email" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" class="{required:true,minlength:5}" />
 </p>
 <p>
  <label for="confirm_password">确认密码</label>
  <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
 </p>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

行使 class="{}" 的法子,必须引进包:jquery.metadata.js。

能够应用如下的主意,修改提醒内容:

class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

在运用 equalTo 关键字时,前面包车型大巴剧情必须抬高引号,代码如下所示:

class="{required:true,minlength:5,equalTo:'#password'}"

4、退换错误音信显示的职位

errorPlacement:Callback

指明错误放置的职分,暗中同意情状是: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 则体以后内容的后面。

参数 类型 描述 默认值
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"

validation成效强大且API众多,假如要高速上手,只要领悟常用功效就能够

2、将官和校官验法规写到 js 代码中
$().ready(function() {
 $("#signupForm").validate({
        rules: {
   firstname: "required",
   email: {
    required: true,
    email: true
   },
   password: {
    required: true,
    minlength: 5
   },
   confirm_password: {
    required: true,
    minlength: 5,
    equalTo: "#password"
   }
  },
        messages: {
   firstname: "请输入姓名",
   email: {
    required: "请输入Email地址",
    email: "请输入正确的email地址"
   },
   password: {
    required: "请输入密码",
    minlength: jQuery.format("密码不能小于{0}个字 符")
   },
   confirm_password: {
    required: "请输入确认密码",
    minlength: "确认密码不能小于5个字符",
    equalTo: "两次输入密码不一致不一致"
   }
  }
    });
});

messages 处,如若有些控件未有 message,将调用暗许的音讯。

<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" />
 </p>
 <p>
  <label for="password">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>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

required:true 必须有值。
required:"#aa:checked" 表达式的值为真,则必要证实。
required:function(){} 重返为真,表示供给证实。

末尾三种常用于,表单中须要同一时候填或不填的因素。

5、改造错误音讯显示的体裁

安装错误提醒的体裁,能够扩张Logo突显,在该连串中曾经创设了多少个validation.css,特地用于珍爱校验文件的体制。

input.error { border: 1px solid red; }
label.error {
  background:url("./demounchecked.gif") no-repeat 0px 0px;

  padding-left: 16px;

  padding-bottom: 2px;

  font-weight: bold;

  color: #EA5200;
}
label.checked {
  background:url("./demohecked.gif") no-repeat 0px 0px;
}
<form id="demoForm">
 <p>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username"/>
 </p>
 <p>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password"/>
 </p>
 <p>
  <input type="submit" value="登录"/>
 </p>
</form> 
<script>
$('#demoForm').validate({
 rules:{
  username:{
   required: true,
   minlength: 2,
   maxlength: 10
  },
  password:{
   required: true,
   minlength: 2,
   maxlength:10
  }
 }
})
</script>

常用方法及注意难题

6、每种字段验证通超过实际施函数

success:String,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"

上述代码首要对name为'username'和'password'那七个input控件进行了校验,那八个控件必须填写内容,且字符长度必须在2-10里头

1、用任何方法替代暗许的 SUBMIT
$().ready(function() {
 $("#signupForm").validate({
        submitHandler:function(form){
            alert("submitted");   
            form.submit();
        }    
    });
});

使用 ajax 方式

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

能够设置 validate 的暗许值,写法如下:

$.validator.setDefaults({
 submitHandler: function(form) { alert("submitted!");form.submit(); }
});

一经想付出表单, 供给利用 form.submit(),而毫不选拔 $(form).submit()。

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();
    });

});

校验法则

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

万一那个参数为true,那么表单不会提交,只举行检讨,调节和测量试验时丰裕方便人民群众。

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

只要三个页面中有五个表单都想设置成为 debug,则选择:

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

8、异步验证

remote:URL

动用 ajax 格局展开求证,默许会提交当前验证的值到长途地址,假诺急需交给别的的值,能够使用 data 选项。

remote: "check-email.php"

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

长距离地址只好输出 "true" 或 "false",无法有其余输出。

在快捷上手的例子中,使用了required、minlength和maxlength那八个校验法则。实际上validation的校验准绳有14个之多

3、ignore:忽略有些因素不表明
ignore: ".ignore"

9、增添自定义校验

addMethod:name, 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 文件的引用。

序号   规则      描述
   required:true    必须输入的字段
   remote:"check.php"  使用 ajax 方法调用 check.php 验证输入值
   email:true    必须输入正确格式的电子邮件
   url:true     必须输入正确格式的网址
   date:true     必须输入正确格式的日期,内部调用Date.parse()方法进行校验
   dateISO:true    必须输入正确格式的日期(ISO),如:2009-06-23,1998/01/22
   number:true    必须输入合法的数字(负数,小数)
   digits:true    必须输入整数
   creditcard:    必须输入合法的信用卡号
   equalTo:"#field"   输入值必须和 #field 相同
   accept:     输入拥有合法后缀名的字符串(上传文件的后缀)
   maxlength:5    输入长度最多是 5 的字符串(汉字算一个字符)
   minlength:10    输入长度最小是 10 的字符串(汉字算一个字符)
   rangelength:[5,10]  输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)
   range:[5,10]    输入值必须介于 5 和 10 之间
   max:5      输入值不能大于 5
   min:10     输入值不能小于 10
4、更换错误消息展现的地点
errorPlacement:Callback

指明错误放置的职位,暗中认可情状是: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 则显得在内容的后边。

江苏福彩快三 2

貌似那七个特性同一时间选择,实以后一个器皿内呈现全体错误提示的效率,何况未有音讯时自动掩盖。

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

10、radio 和 checkbox、select 的验证

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

<input  type="radio" id="gender_male" value="m" name="gender" class="{required:true}" />
<input  type="radio" id="gender_female" value="f" name="gender"/>

checkbox 的 required 表示必须选中。

<input type="checkbox" class="checkbox" id="agree" name="agree" class="{required:true}" />

checkbox 的 minlength 表示必须选中的蝇头个数,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[]" />

select 的 required 表示当选的 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>

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>

上面接纳多少个更详尽的例证,对地点的拾四个法则进行利用

5、改换错误新闻呈现的体制

设置错误提醒的体制,能够追加Logo显示,在该系统中早已创设了一个validation.css,特地用来掩护士学校验文件的样式。

input.error { border: 1px solid red; }
label.error {
  background:url("./demounchecked.gif") no-repeat 0px 0px;

  padding-left: 16px;

  padding-bottom: 2px;

  font-weight: bold;

  color: #EA5200;
}
label.checked {
  background:url("./demohecked.gif") no-repeat 0px 0px;
}

jQuery.validate 中文 API

名称

归来类型

描述

validate(options)

Validator

表明所选的 FORM。

valid()

Boolean

反省是或不是表达通过。

rules()

Options

回来成分的证实准则。

rules("add",rules)

Options

日增表明法则。

rules("remove",rules)

Options

剔除验证准绳。

removeAttrs(attributes)

Options

去除特殊性质而且重临它们。

自定义选拔器

:blank

Validator

从未值的筛选器。

:filled

Array <Element>

有值的筛选器。

:unchecked

Array <Element>

没选择的要素的筛选器。

实用工具

jQuery.format(template,argument,argumentN...)

String

用参数取代模板中的 {n}。

<form id="demoForm">
 <p>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username"/>
 </p>
 <p>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password"/>
 </p>
 <p>
  <label for="confirm-password">确认密码</label>
  <input type="password" id="confirm-password" name="confirm-password"/>
 </p>
 <p>
  <label for="email">电子邮件:</label>
  <input id="email" name="email"/>
 </p>
 <p>
  <label for="url">网址:</label>
  <input id="url" name="url"/>
 </p>
 <p>
  <label for="date">生日:</label>
  <input id="date" name="date"/>
 </p>
 <p>
  <label for="num">随机数(0-9):</label>
  <input id="num" name="num"/>
 </p>
 <p>
  <label for="card">信用卡号:</label>
  <input id="card" name="card"/>
 </p>
 <p>
  <input type="submit" value="登录"/>
 </p>
</form> 
<script>
$('#demoForm').validate({
 rules:{
  username:{
   required: true,
   maxlength: 10
  },
  password:{
   required: true,
   range:[5,10]
  },
  'confirm-password':{
   equalTo: "#password"
  },
  email:{
   email:true
  },
  url:{
   url:true
  },
  date:{
   dateISO:true
  },
  num:{
   min:0,
   max:9
  },
  card:{
   creditcard:true
  }
 }
})
</script>
6、各种字段验证通过施行函数
success:String,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"

Validator

validate 方法再次回到一个 Validator 对象。Validator 对象有成都百货上千格局能够用来吸引校验程序仍然改动 form 的剧情,下边列出多少个常用的措施。

名称

回去类型

描述

form()

Boolean

表达 form 再次来到成功大概失利。

element(element)

Boolean

表达单个成分是马到功成或许退步。

resetForm()

undefined

把前边验证的 FORM 苏醒到表达前原本的情事。

showErrors(errors)

undefined

来得特定的错误音讯。

Validator 函数

setDefaults(defaults)

undefined

改换暗中同意的装置。

addMethod(name,method,message)

undefined

累加二个新的表达办法。必须总结二个旷世的名字,三个 JAVASCLANDIPT 的主意和一个暗中同意的音信。

addClassRules(name,rules)

undefined

充实组合验证类型,在三个类里面用各个认证办法时比较有用。

addClassRules(rules)

undefined

充实组合验证类型,在三个类里面用多种表明措施时比较有用。这几个是还要加多个表明办法。

默许提醒

7、验证的接触形式修改

下边的固然是 boolean 型的,但建议独有要改为 false,不然别乱加多。

江苏福彩快三 3

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

});

放到验证办法

名称 返回类型 描述
required() Boolean 必填验证元素。
required(dependency-expression) Boolean 必填元素依赖于表达式的结果。
required(dependency-callback) Boolean 必填元素依赖于回调函数的结果。
remote(url) Boolean 请求远程校验。url 通常是一个远程调用方法。
minlength(length) Boolean 设置最小长度。
maxlength(length) Boolean 设置最大长度。
rangelength(range) Boolean 设置一个长度范围 [min,max]。
min(value) Boolean 设置最小值。
max(value) Boolean 设置最大值。
email() Boolean 验证电子邮箱格式。
range(range) Boolean 设置值的范围。
url() Boolean 验证 URL 格式。
date() Boolean 验证日期格式(类似 30/30/2008 的格式,不验证日期准确性只验证格式)。
dateISO() Boolean 验证 ISO 类型的日期格式。
dateDE() Boolean 验证德式的日期格式(29.04.1994 或 1.1.2006)。
number() Boolean 验证十进制数字(包括小数的)。
digits() Boolean 验证整数。
creditcard() Boolean 验证信用卡号。
accept(extension) Boolean 验证相同后缀名的字符串。
equalTo(other) Boolean 验证两个输入框的内容是否相同。
phoneUS() Boolean 验证美式的电话号码。

由地方的例证中看出,validate的暗许提醒是罗马尼亚(România)语的

8、异步验证
remote:URL

使用 ajax 方式张开表达,默许会提交当前验证的值到长途地址,要是须求提交其余的值,能够选用data 选项。

remote: "/User/check-email"

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

长途地址只可以输出 "true" 或 "false",无法有任何输出。

validate ()的可选项

描述 代码
debug:进行调试模式(表单不提交)。
$(".selector").validate
({
    debug:true
})
把调试设置为默认。
$.validator.setDefaults({
    debug:true
})
submitHandler:通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交。
$(".selector").validate({
    submitHandler:function(form) {
        $(form).ajaxSubmit();
    }
})
ignore:对某些元素不进行验证。
$("#myform").validate({
    ignore:".ignore"
})
rules:自定义规则,key:value 的形式,key 是要验证的元素,value 可以是字符串或对象。
$(".selector").validate({
    rules:{
        name:"required",
        email:{
            required:true,
            email:true
        }
    }
})
messages:自定义的提示信息,key:value 的形式,key 是要验证的元素,value 可以是字符串或函数。
$(".selector").validate({
    rules:{
        name:"required",
        email:{
            required:true,
            email:true
        }
    },
    messages:{
        name:"Name不能为空",
        email:{       
            required:"E-mail不能为空",
            email:"E-mail地址不正确"
        }
    }
})
groups:对一组元素的验证,用一个错误提示,用 errorPlacement 控制把出错信息放在哪里。
$("#myform").validate({
    groups:{
        username:"fname 
        lname"
    },
    errorPlacement:function(error,element) {
        if (element.attr("name") == "fname" || element.attr("name") == "lname")   
            error.insertAfter("#lastname");
        else    
            error.insertAfter(element);
    },
   debug:true
})
Onubmit:类型 Boolean,默认 true,指定是否提交时验证。
$(".selector").validate({  
    onsubmit:false
})
onfocusout:类型 Boolean,默认 true,指定是否在获取焦点时验证。
$(".selector").validate({   
    onfocusout:false
})
onkeyup:类型 Boolean,默认 true,指定是否在敲击键盘时验证。
$(".selector").validate({
   onkeyup:false
})
onclick:类型 Boolean,默认 true,指定是否在鼠标点击时验证(一般验证 checkbox、radiobox)。
$(".selector").validate({
   onclick:false
})
focusInvalid:类型 Boolean,默认 true。提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点。
$(".selector").validate({
   focusInvalid:false
})
focusCleanup:类型 Boolean,默认 false。当未通过验证的元素获得焦点时,移除错误提示(避免和 focusInvalid 一起使用)。
$(".selector").validate({
   focusCleanup:true
})
errorClass:类型 String,默认 "error"。指定错误提示的 css 类名,可以自定义错误提示的样式。
$(".selector").validate({ 
    errorClass:"invalid"
})
errorElement:类型 String,默认 "label"。指定使用什么标签标记错误。
$(".selector").validate
   errorElement:"em"
})
wrapper:类型 String,指定使用什么标签再把上边的 errorELement 包起来。
$(".selector").validate({
   wrapper:"li"
})
errorLabelContainer:类型 Selector,把错误信息统一放在一个容器里面。
$("#myform").validate({   
    errorLabelContainer:"#messageBox",
    wrapper:"li",
    submitHandler:function() { 
        alert("Submitted!") 
    }
})
showErrors:跟一个函数,可以显示总共有多少个未通过验证的元素。
$(".selector").validate({  
    showErrors:function(errorMap,errorList) {
        $("#summary").html("Your form contains "   this.numberOfInvalids()   " errors,see details below.");
        this.defaultShowErrors();
    }
})
errorPlacement:跟一个函数,可以自定义错误放到哪里。
$("#myform").validate({  
    rrorPlacement:function(error,element) {  
        error.appendTo(element.parent("td").next("td"));
   },
   debug:true
})
success:要验证的元素通过验证后的动作,如果跟一个字符串,会当作一个 css 类,也可跟一个函数。
$("#myform").validate({        
    success:"valid",
        submitHandler:function() { 
            alert("Submitted!") 
        }
})
highlight:可以给未通过验证的元素加效果、闪烁等。  

本文由江苏福彩快三发布,转载请注明来源

关键词: 江苏福彩快三