jquery-validate是什麼

青灯夜游
發布: 2022-05-16 13:34:06
原創
1631 人瀏覽過

jquery-validate是指表單驗證插件,是基於jquery開發的驗證插件,為表單提供了強大的驗證功能,讓客戶端表單驗證變得更簡單;該插件捆綁了一套有用的驗證方法,包括URL和電子郵件驗證,同時提供一個用來編寫使用者自訂方法的API。

jquery-validate是什麼

本教學操作環境: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 外掛程式。

1.14.0 版本下載網址:http://libs.cdnjs.net/jquery-validate/1.14.0/

##匯入js 函式庫

 
登入後複製

預設校驗規則

默认提示

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、将校验规则写到控件中

   
         
输入您的名字,邮箱,URL,备注。

登入後複製

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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!
序號 描述 #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。