jQuery ตรวจสอบ
ตรวจสอบ jQuery ปลั๊กอินสำหรับการตรวจสอบรูปแบบที่มีคุณลักษณะที่มีประสิทธิภาพที่ช่วยให้การตรวจสอบรูปแบบฝั่งไคลเอ็นต์ได้ง่ายขึ้นในขณะที่ให้ความอุดมสมบูรณ์ของตัวเลือกปรับแต่งเพื่อตอบสนองความต้องการใช้ plug-in ที่มาพร้อมกับชุดที่มีประโยชน์ของวิธีการตรวจสอบรวมถึง URL และการตรวจสอบอีเมลในขณะที่ให้วิธีการที่ผู้ใช้กำหนดสำหรับการเตรียมความพร้อมของ API ที่ วิธีการที่มีผลผูกพันทั้งหมดที่ใช้ภาษาอังกฤษเป็นข้อผิดพลาดเริ่มต้นและได้รับการแปลเป็นภาษาอื่น ๆ 37
plug-in ถูกเขียนและการบำรุงรักษาโดย Jorn Zaefferer เขาเป็นสมาชิกของทีม jQuery เป็นนักพัฒนานำของทีมงาน jQuery UI เป็นการบำรุงรักษาบุคลากร QUnit ปลั๊กอิน jQuery ในปี 2006 ในช่วงต้นเมื่อมันมีอยู่แล้วเริ่มโผล่ออกมาและได้รับการปรับปรุงตั้งแต่ รุ่นปัจจุบันคือ 1.14.0
การเข้าถึง jQuery ตรวจสอบเว็บไซต์อย่างเป็นทางการ เพื่อดาวน์โหลดรุ่นล่าสุดของปลั๊กอิน jQuery ตรวจสอบ
เวอร์ชั่น 1.14.0 ดาวน์โหลดกวดวิชานี้: http://static.w3big.com/download/jquery-validation-1.14.0.zip
นำเข้าห้องสมุด JS (โดยใช้การกวดวิชานี้ CDN)
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
กฎการตรวจสอบเริ่มต้น
เลขที่ | กฎ | ลักษณะ |
---|---|---|
1 | จำเป็นต้องใช้: จริง | คุณต้องป้อนข้อมูล |
2 | ระยะไกล: "check.php" | โดยใช้วิธีการเรียก Ajax check.php ตรวจสอบค่าที่ป้อน |
3 | อีเมล: จริง | คุณต้องป้อนรูปแบบอีเมลที่ถูกต้อง |
4 | URL: จริง | คุณต้องป้อนรูปแบบ URL ที่ถูกต้อง |
5 | วันที่: จริง | คุณต้องป้อนรูปแบบวันที่ที่ถูกต้อง IE6 วันระมัดระวังการตรวจสอบข้อผิดพลาด |
6 | dateISO: จริง | คุณต้องป้อนรูปแบบวันที่ที่ถูกต้อง (ISO) ตัวอย่างเช่น: 2009-06-23,1998 / 22/01 ตรวจสอบรูปแบบเดียวที่ไม่ได้ตรวจสอบ |
7 | จำนวน: จริง | คุณต้องป้อนตัวเลขที่ถูกต้อง (ตัวเลขติดลบทศนิยม) |
8 | ตัวเลข: จริง | คุณต้องป้อนจำนวนเต็ม |
9 | บัตรเครดิต: | คุณต้องใส่หมายเลขบัตรเครดิตที่ถูกต้อง |
10 | equalTo: "# ฟิลด์" | ค่าที่ป้อนต้อง #field เดียวกัน |
11 | ยอมรับ: | สายป้อนมีนามสกุลถูกต้องตามกฎหมาย (การอัปโหลดไฟล์ต่อท้าย) |
12 | MAXLENGTH: 5 | ความยาวสูงสุดของสายป้อนที่ 5 (จินับเป็นตัวละครตัวหนึ่ง) |
13 | MINLENGTH: 10 | ความยาวขั้นต่ำของสายป้อนคือ 10 (ตัวอักษรนับเป็นตัวละครตัวหนึ่ง) |
14 | rangelength: [5,10] | ความยาวของสายป้อนต้องอยู่ระหว่าง 5 และ 10 (จินับจำนวนตัวอักษร) |
15 | ช่วง: [5,10] | ป้อนค่าต้องอยู่ระหว่าง 5 และ 10 |
16 | แม็กซ์: 5 | ป้อนค่าไม่เกิน 5 |
17 | นาที: 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}." ) }
jQuery ตรวจสอบให้เคล็ดลับแพ็คเก็ตข้อมูลจีนตั้งอยู่ในดาวน์โหลดแพคเกจ DIST / การแปล / 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, 中文 (Zhongwé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} 的数值") }); }));
คุณสามารถ จำกัด วงไฟล์ข้อมูล DIST / การแปล / messages_zh.js แนะนำให้รู้จักกับหน้า:
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
ใช้
1, การควบคุมกฎการตรวจสอบเป็นลายลักษณ์อักษร
<script src="http://static.w3big.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script> <script src="http://static.w3big.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> <script src="http://static.w3big.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>
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: "请选择两个主题" } });
ข้อความไปที่การควบคุมหากมีข้อความไม่จะใช้ข้อมูลการเริ่มต้น
<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>
จำเป็นต้องใช้: มูลค่าที่แท้จริงเป็นต้อง
จำเป็นต้องใช้: "#aa: การตรวจสอบ" คือการแสดงออกของจริงคุณจำเป็นต้องตรวจสอบ
จำเป็นต้องใช้: ฟังก์ชั่น () {} กลับจริงแสดงความจำเป็นในการตรวจสอบ
สองที่ใช้กันทั่วไปในด้านหลังในรูปแบบต้องกรอกหรือไม่กรอกองค์ประกอบ
วิธีการทั่วไปและให้ความสนใจกับปัญหา
1 มิฉะนั้นแทนที่เริ่มต้นส่ง
$().ready(function() { $("#signupForm").validate({ submitHandler:function(form){ alert("提交事件!"); form.submit(); } }); });
วิธีการใช้อาแจ็กซ์
$(".selector").validate({ submitHandler: function(form) { $(form).ajaxSubmit(); } })
คุณสามารถตั้งค่าเริ่มต้นการตรวจสอบถ้อยคำดังต่อไปนี้:
$.validator.setDefaults({ submitHandler: function(form) { alert("提交事件!");form.submit(); } });
ถ้าคุณต้องการที่จะส่งแบบฟอร์มที่คุณจำเป็นต้องใช้ form.submit () แทน $ (แบบ) .submit ()
2, การแก้ปัญหาการตรวจสอบไม่ได้เป็นเพียงส่งแบบฟอร์ม
ถ้าพารามิเตอร์นี้เป็นจริงแล้วรูปแบบที่ไม่ได้ส่งตรวจสอบเพียงดำเนินการก็จะสะดวกมากเมื่อการแก้จุดบกพร่อง
$().ready(function() { $("#signupForm").validate({ debug:true }); });
หากหน้าเว็บมีหลายรูปแบบต้องการตั้งเพื่อแก้ปัญหาใช้:
$.validator.setDefaults({ debug: true })
3 ไม่สนใจ: ละเลยองค์ประกอบบางอย่างที่ไม่ได้รับการตรวจสอบ
ignore: ".ignore"
4. การเปลี่ยนแปลงสถานที่ตั้งของข้อผิดพลาดที่แสดง
errorPlacement:Callback
ระบุที่ตั้งของถูกใส่ผิดที่เริ่มต้นคือ: 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 = "สถานะ"> </ td> หากวิทยุจะแสดงใน <td> </ td> ถ้าช่องจะแสดงอยู่ในเนื้อหาของ หลัง
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
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 {ชายแดน: สีแดง 1px ของแข็ง} label.error { พื้นหลัง: URL ( "./ สาธิต / images / unchecked.gif") ไม่ซ้ำ 0px 0px; padding ซ้าย: 16px; padding ล่าง: 2px; font-weight: หนา; color: # EA5200; } label.checked { พื้นหลัง: URL ( "./ สาธิต / images / checked.gif") ไม่ซ้ำ 0px 0px; }
6 แต่ละเขตที่มีการยืนยันโดยการดำเนินการฟังก์ชั่น
ความสำเร็จ: String, โทรกลับ
เพื่อตรวจสอบว่าองค์ประกอบโดยการดำเนินการหลังจากการตรวจสอบถ้าตามด้วยสตริงที่จะถือว่าเป็นคลาส CSS แต่ยังมีฟังก์ชั่นที่
ความสำเร็จ: ฟังก์ชั่น (ฉลาก) { // ชุด & nbsp; เป็นข้อความสำหรับ IE label.html ( "& nbsp;"). addClass ( "การตรวจสอบ"); //label.addClass("valid").text("Ok! ") }
เพิ่ม "ถูกต้อง" ในการตรวจสอบองค์ประกอบที่กำหนดไว้ในลักษณะ CSS <style> label.valid {} </ style>
ความสำเร็จ: "ถูกต้อง"
7, แก้ไขการตรวจสอบการเรียก
แม้ว่าต่อไปนี้เป็นแบบบูล แต่ขอแนะนำถ้าคุณต้องการเท็จมิฉะนั้นตรึงเพิ่ม
触发方式 | 类型 | 描述 | 默认值 |
---|---|---|---|
onsubmit | Boolean | 提交时验证。设置为 false 就用其他方法去验证。 | true |
onfocusout | Boolean | 失去焦点时验证(不包括复选框/单选按钮)。 | true |
onkeyup | Boolean | 在 keyup 时验证。 | true |
onclick | Boolean | 在点击复选框和单选按钮时验证。 | true |
focusInvalid | Boolean | 提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点。 | true |
focusCleanup | Boolean | 如果是 true 那么当未通过验证的元素获得焦点时,移除错误提示。避免和 focusInvalid 一起用。 | false |
// รีเซ็ตแบบฟอร์ม $ () ที่. พร้อม (ฟังก์ชั่น () { ตรวจสอบ var = $ ( "# signupForm"). ตรวจสอบ ({ submitHandler: ฟังก์ชั่น (รูปแบบ) { การแจ้งเตือน ( "ส่ง"); form.submit (); } }); $ ( "# รีเซ็ต"). คลิก (ฟังก์ชั่น () { validator.resetForm (); }); });
8 การตรวจสอบไม่ตรงกัน
ระยะไกล: URL
วิธีที่จะตรวจสอบการใช้ AJAX, ส่งไปยังค่าเริ่มต้นปัจจุบันไปตรวจสอบที่อยู่ระยะไกลถ้าจำเป็นต้องส่งค่าอื่น ๆ ที่คุณสามารถใช้ตัวเลือกข้อมูล
ระยะไกล: "ตรวจ email.php"
ระยะไกล: { URL: "ตรวจ email.php", // ประเภทจัดคิวงาน: "โพสต์", // โหมดการส่งข้อมูล dataType: "JSON", // รับข้อมูลรูปแบบข้อมูล: {ชื่อผู้ใช้ // ข้อมูลที่จะส่งผ่าน: ฟังก์ชั่น ( ) { กลับ $ ( "# ชื่อผู้ใช้") Val () .; } } }
ที่อยู่ระยะไกลเพียงการส่งออก "จริง" หรือ "เท็จ" ไม่สามารถมีส่งออกอื่น ๆ
9 ตรวจสอบที่กำหนดเองเพิ่ม
addMethod: ชื่อวิธีข้อความ
วิธีการตรวจสอบที่กำหนดเอง
// ตัวละครสองไบต์ jQuery.validator.addMethod ( "byteRangeLength" ฟังก์ชั่น (ค่าองค์ประกอบพระราม) { ความยาว var = value.length; สำหรับ (var i = 0; i <value.length; i ++) { ถ้า (value.charCodeAt (i)> 127) { ความยาว ++; } } กลับ this.optional (องค์ประกอบ) || (ความยาว> = พระราม [0] && ความยาว <= พระราม [1]); }, $ .validator.format ( "ตรวจสอบให้แน่ใจว่าค่าที่ป้อนใน {0} - {1} ระหว่างไบต์ (ตัวอักษรนับหนึ่งไบต์ 2)")); // ไปรษณีย์รหัสยืนยัน jQuery.validator.addMethod ( "isZipCode" ฟังก์ชั่น (ค่าองค์ประกอบ) { var = Tel / ^ [0-9] {6} $ /; กลับ this.optional (องค์ประกอบ) || (tel.test (คุ้มค่า)); } "กรุณากรอกให้ถูกต้องรหัสไปรษณีย์ของคุณ");
หมายเหตุ: ในการเพิ่มไฟล์เพิ่มเติม-methods.js หรือเพิ่มไฟล์ jquery.validate.jsคำแนะนำที่เขียนโดยทั่วไปในแฟ้มเพิ่มเติม-methods.js
หมายเหตุ: ไฟล์ messages_cn.js เพิ่ม: isZipCode: "สามารถรวมข้อความตัวอักษรตัวเลขและขีด."ก่อนที่จะเรียกการเพิ่มเพิ่มเติม-methods.js อ้างอิงไฟล์
10 วิทยุและช่องทำเครื่องหมายเลือกการตรวจสอบ
วิทยุต้องเลือกตัวแทนที่จำเป็น
<ประเภทขาเข้า = "วิทยุ" id = "gender_male" value = "M" name = "เพศ" ที่จำเป็น /> <ประเภทขาเข้า = "วิทยุ" id = "gender_female" value = "F" name = "เพศ" />
ช่องทำเครื่องหมายต้องเลือกตัวแทนที่จำเป็น
<ประเภทขาเข้า = "ช่องทำเครื่องหมาย" class = "ช่องทำเครื่องหมาย" id = "เห็นด้วย" ชื่อ = "เห็นด้วย" ที่จำเป็น />
หมายถึงจำนวนขั้นต่ำของช่องทำเครื่องหมาย MINLENGTH จะต้องได้รับการตรวจสอบ MAXLENGTH หมายถึงจำนวนสูงสุดของการเลือก rangelength: [2,3] หมายถึงจำนวนของช่วงที่เลือก
<ประเภทขาเข้า = "ช่องทำเครื่องหมาย" class = "ช่องทำเครื่องหมาย" id = "spam_email" value = "อีเมล" ชื่อ = "สแปม []" ต้อง MINLENGTH = "2" /> <ประเภทขาเข้า = "ช่องทำเครื่องหมาย" class = "ช่องทำเครื่องหมาย" id = "spam_phone" value = "โทรศัพท์" ชื่อ = "สแปม []" /> <ประเภทขาเข้า = "ช่องทำเครื่องหมาย" class = "ช่องทำเครื่องหมาย" id = "spam_mail" value = "จดหมาย" name = "สแปม []" />
เลือกต้องแสดงค่าที่เลือกต้องไม่ว่างเปล่า
<เลือก id = "ป่า" ชื่อ = "ป่า" title = "กรุณาเลือกบางสิ่งบางอย่าง!" ต้องระบุ> <value option = ""> </ option> <value option = "1"> Buga </ option> <value option = "2"> Baga </ option> <value option = "3"> เฮ้ย </ option> </ เลือก>
เลือกตัวแทนจำนวน MINLENGTH ต่ำสุดที่เลือก (หลายทางเลือกของเลือก) MAXLENGTH หมายถึงจำนวนสูงสุดของการเลือก rangelength: [2,3] หมายถึงจำนวนของช่วงที่เลือก
<เลือก id = "ผลไม้" name = "ผลไม้" title = "โปรดเลือกอย่างน้อยสองผลไม้" class = "{จำเป็นต้องใช้: จริง MINLENGTH: 2}" หลาย = "หลาย"> <option value = "B"> กล้วย </ option> <option value = "A"> แอปเปิ้ล </ option> <value option = "P"> พีช </ option> <option value = "T"> เต่า </ option> </ เลือก>
API จีน jQuery.validate
名称 | 返回类型 | 描述 |
---|---|---|
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() | Boolean | 验证 form 返回成功还是失败。 |
element(element) | Boolean | 验证单个元素是成功还是失败。 |
resetForm() | undefined | 把前面验证的 FORM 恢复到验证前原来的状态。 |
showErrors(errors) | undefined | 显示特定的错误信息。 |
Validator 函数 | ||
setDefaults(defaults) | undefined | 改变默认的设置。 |
addMethod(name,method,message) | undefined | 添加一个新的验证方法。必须包括一个独一无二的名字,一个 JAVASCRIPT 的方法和一个默认的信息。 |
addClassRules(name,rules) | undefined | 增加组合验证类型,在一个类里面用多种验证方法时比较有用。 |
addClassRules(rules) | undefined | 增加组合验证类型,在一个类里面用多种验证方法时比较有用。这个是同时加多个验证方法。 |
Built-in รับรองความถูกต้อง
名称 | 返回类型 | 描述 |
---|---|---|
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 | 验证美式的电话号码。 |
ตรวจสอบ () เป็นตัวเลือก
描述 | 代码 |
---|---|
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 }) |
OnSubmit:类型 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({ errorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td")); }, debug:true }) |
success:要验证的元素通过验证后的动作,如果跟一个字符串,会当作一个 css 类,也可跟一个函数。 |
$("#myform").validate({ success:"valid", submitHandler:function() { alert("Submitted!") } }) |
highlight:可以给未通过验证的元素加效果、闪烁等。 |
addMethod (ชื่อวิธีข้อความ) วิธีการ
ชื่อพารามิเตอร์เป็นชื่อของวิธีการเพิ่มที่
วิธีพารามิเตอร์เป็นฟังก์ชันที่ใช้เวลาสามพารามิเตอร์ (ค่าองค์ประกอบพระราม)
Value คือค่าขององค์ประกอบองค์ประกอบเป็นองค์ประกอบของตัวเองพระรามเป็นพารามิเตอร์
เราสามารถใช้เพื่อเพิ่ม addMethod ยกเว้นในตัวการตรวจสอบวิธีการวิธีการตรวจสอบ ตัวอย่างเช่นมีเป็นเขตเท่านั้นที่จะสูญเสียความเป็นตัวอักษรช่วงเป็น AF เขียนดังนี้
$ .validator.addMethod ( "เอเอฟ" ฟังก์ชั่น (ค่าองค์ประกอบ params) { ถ้า (value.length> 1) { กลับเท็จ; } ถ้า (ค่า> = params [0] && value <= params [1]) { กลับจริง; } else { กลับเท็จ; } } "ต้องเป็นตัวอักษรและ AF");
หากมีเขตข้อมูลฟอร์ม id = "ชื่อผู้ใช้" เขียนในกฎระเบียบ:
ชื่อผู้ใช้: { AF: [ "A", "F"] }
AddMethod พารามิเตอร์แรกเป็นชื่อของวิธีการตรวจสอบเพื่อที่จะเพิ่มแล้วเป็น AF
addMethod พารามิเตอร์ที่สามเกิดข้อผิดพลาดที่กำหนดเองบอกนี่คือ "จะต้องเป็นตัวอักษรและ AF"
addMethod พารามิเตอร์ที่สองคือฟังก์ชั่นนี้เป็นสิ่งที่สำคัญมากกว่าการใช้ถ้อยคำของการตัดสินใจที่จะใช้วิธีการตรวจสอบนี้
ถ้ามีเพียงหนึ่งพารามิเตอร์เขียนโดยตรงเช่น AF: "A", แล้วนี้เป็นพารามิเตอร์ที่ไม่ซ้ำกันหากมีมากกว่าหนึ่งพารามิเตอร์ที่เขียนใน [] คั่นด้วยเครื่องหมายจุลภาค
โหมด String เมตา
$ ( "# MyForm"). ตรวจสอบ ({ เมตา: "การตรวจสอบ" submitHandler: ฟังก์ชั่น () { การแจ้งเตือน ( "Submitted!")} })
<script type = "text / javascript ของ" src = "JS / jquery.metadata.js"> </ script> <script type = "text / javascript ของ" src = "JS / jquery.validate.js"> </ script> <form id = "MyForm"> <ประเภทขาเข้า = "text" name = "อีเมล" class = "{ตรวจสอบ: {ต้อง: จริง, อีเมล์: จริง}}" /> <ประเภทขาเข้า = "ส่ง" value = "ส่ง" /> </ form>
ตัวอย่างสาธิต
ตัวอย่างสมมุติ
- ภาชนะเกิดข้อผิดพลาด
- ข้อความที่กำหนดเองเป็นองค์ประกอบข้อมูล
- วิทยุ (ปุ่ม) ช่องทำเครื่องหมาย (ปุ่มตรวจสอบ) และเลือก (หล่นลงกล่อง)
- รูปแบบอินเตอร์แอคที (แบบ) และปลั๊ก (ส่ง AJAX)
- วิธีการที่กำหนดเองและการแสดงข้อความ
- แบบ Dynamic
- ใช้ jQuery UI ThemeRoller สไตล์รูปแบบกำหนดเอง
- TinyMCE - เบราว์เซอร์ที่ใช้แก้ไขแบบ WYSIWYG ที่มีน้ำหนักเบา
- กล่องใส่แฟ้ม
- มือถือ jQuery แบบฟอร์มการตรวจสอบสิทธิ์
ตัวอย่างของโลกแห่งความจริง
- แบบฟอร์มลงทะเบียนนม
- แบบฟอร์มลงทะเบียน Marketo
- รูปแบบแผงพับขายที่อยู่อาศัย
- CAPTCHA ระยะไกล (PIN) การตรวจสอบ