jquery-validate是指表單驗證插件,是基於jquery開發的驗證插件,為表單提供了強大的驗證功能,讓客戶端表單驗證變得更簡單;該插件捆綁了一套有用的驗證方法,包括URL和電子郵件驗證,同時提供一個用來編寫使用者自訂方法的API。
本教學操作環境:windows7系統、jquery2.2.1&&jquery-validate1.14.0版本、Dell G3電腦。
jquery-validate是指表單驗證插件,是基於jquery開發的驗證插件。
jQuery Validate 外掛程式為表單提供了強大的驗證功能,讓用戶端表單驗證變得更簡單,同時提供了大量的客製化選項,滿足應用程式各種需求。該外掛程式捆綁了一套有用的驗證方法,包括 URL 和電子郵件驗證,同時提供了一個用來編寫使用者自訂方法的 API。所有的捆綁方法預設使用英語作為錯誤訊息,且已翻譯成其他 37 種語言。
該外掛程式是由 Jörn Zaefferer 編寫和維護的,他是 jQuery 團隊的一名成員,是 jQuery UI 團隊的主要開發人員,是 QUnit 的維護人員。該插件在 2006 年 jQuery 早期的時候就已經開始出現,並且一直更新至今。目前版本是 1.14.0。
存取 jQuery Validate 官網,下載最新版的 jQuery Validate 外掛程式。
##匯入js 函式庫1.14.0 版本下載網址:http://libs.cdnjs.net/jquery-validate/1.14.0/
預設校驗規則
默认提示
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}." ) }
jQuery Validate提供了中文信息提示包,位于下载包的 /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} 的数值") }); }));
你可以将该本地化信息文件 /localization/messages_zh.js 引入到页面:
使用方式
1、将校验规则写到控件中
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: "请选择两个主题" } }) });
messages 处,如果某个控件没有 message,将调用默认的信息
说明:
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、更改错误信息显示的位置
errorPlacement:Callback
指明错误放置的位置,默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面。
errorPlacement: function(error, element) { error.appendTo(element.parent()); }
【推荐学习:jQuery视频教程、web前端视频】
以上是jquery-validate是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!
描述 | ||
---|---|---|
required:true | 必須輸入的欄位。 | |
remote:"check.php" | 使用 ajax 方法呼叫 check.php 驗證輸入值。 | |
email:true | 必須輸入正確格式的電子郵件。 | |
url:true | 必須輸入正確格式的網址。 | |
date:true | 必須輸入正確格式的日期。日期校驗 ie6 錯,慎用。 | |
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。 |