คัดลอกรหัสรหัสดังต่อไปนี้:
//นำไปไว้ใน function(){} ของ onReady
Ext.QuickTips.init(); //จัดเตรียมฟังก์ชันข้อมูลพร้อมท์สำหรับส่วนประกอบต่างๆ ข้อมูลพร้อมท์หลักของแบบฟอร์มคือข้อความแสดงข้อผิดพลาดของการตรวจสอบลูกค้า
Ext.form.Field.prototype.msgTarget='side'; //วิธีการพร้อมท์ ค่าการแจงนับคือ:
qtip - แสดงคำแนะนำเมื่อเมาส์เลื่อนไปเหนือส่วนควบคุม
title- ชื่อที่แสดงในเบราว์เซอร์ แต่ผลการทดสอบเหมือนกับ qtip
ใต้แสดงข้อความแสดงข้อผิดพลาดภายใต้การควบคุม
ด้านข้างแสดงไอคอนข้อผิดพลาดทางด้านขวาของตัวควบคุม และแสดงพร้อมท์ข้อผิดพลาดเมื่อเมาส์ชี้ไปที่ไอคอน ค่าเริ่มต้น
ข้อความแสดงข้อผิดพลาด id- [รหัสองค์ประกอบ] จะแสดงในองค์ประกอบ HTML ของรหัสที่ระบุ
1. ตัวอย่างที่ง่ายที่สุด: การตรวจสอบความถูกต้องเป็นโมฆะ
คัดลอกรหัสรหัสดังต่อไปนี้:
// พารามิเตอร์สองตัวสำหรับการตรวจสอบความถูกต้องเป็นโมฆะ
AllowBlank:false//false ไม่สามารถเว้นว่างได้ ค่าเริ่มต้นคือ True
BlankText:string//ข้อความแสดงข้อผิดพลาดเมื่อว่างเปล่า
รหัส js คือ:
คัดลอกรหัสรหัสดังต่อไปนี้:
var form1 = ใหม่ Ext.form.FormPanel({
ความกว้าง:350,
renderTo:"form1",
title:"แบบฟอร์มแผง",
ค่าเริ่มต้น:{xtype:"textfield",inputType:"password"},
รายการ:[
{fieldLabel:"ไม่สามารถเว้นว่างได้",
AllowBlank:false //ไม่อนุญาตให้เว้นว่าง
BlankText:"ไม่สามารถเว้นว่างได้", //ข้อความแสดงข้อผิดพลาด ค่าเริ่มต้นคือ จำเป็นต้องกรอกฟิลด์นี้!
รหัส: "ว่างที่สุด",
-
-
-
2. ใช้รูปแบบ vtype เพื่อการตรวจสอบอย่างง่าย
ในตัวอย่างนี้ของการยืนยันอีเมล ให้เขียนการกำหนดค่ารายการของโค้ดด้านบนนี้ใหม่:
คัดลอกรหัสรหัสดังต่อไปนี้:
รายการ:[
{fieldLabel:"ไม่สามารถเว้นว่างได้",
vtype:"email",//ยืนยันรูปแบบอีเมล
vtypeText: "ที่อยู่อีเมลไม่ถูกต้อง" //ข้อความแสดงข้อผิดพลาด ฉันจะไม่ป้อนค่าเริ่มต้น
รหัส: "ว่างที่สุด",
สมอ:"90%"
-
คุณสามารถแก้ไข vtype ข้างต้นเป็นการตรวจสอบต่อไปนี้ที่รองรับโดย vtypes ของ extjs ต่อไปนี้ตามค่าเริ่มต้น:
//ประเภท vtype ที่ได้รับการสนับสนุนเริ่มต้นในการตรวจสอบความถูกต้องของแบบฟอร์ม
1.alpha //สามารถป้อนได้เฉพาะตัวอักษรเท่านั้น ไม่สามารถป้อนอื่นๆ (เช่น ตัวเลข สัญลักษณ์พิเศษ ฯลฯ)
2.alphanum//ใส่ได้เฉพาะตัวอักษรและตัวเลขเท่านั้น ไม่สามารถใส่แบบอื่นได้
3.อีเมล//การยืนยันอีเมล รูปแบบที่ต้องการคือ ""
4.url//การตรวจสอบรูปแบบ url รูปแบบที่ต้องการคือ http://www.baidu.com
3. การตรวจสอบรหัสผ่านแบบกำหนดเองขั้นสูง
การตรวจสอบก่อนหน้านี้ทั้งหมดจัดทำโดย extjs และเรายังปรับแต่งฟังก์ชันการตรวจสอบได้อีกด้วย
คัดลอกรหัสรหัสดังต่อไปนี้:
//ขั้นแรกให้ใช้เมธอด Ext.apply เพื่อเพิ่มฟังก์ชันการตรวจสอบรหัสผ่านที่กำหนดเอง (คุณสามารถตั้งชื่ออื่นได้)
Ext.apply(Ext.form.VTypes,{
รหัสผ่าน:function(val,field){//val หมายถึงค่าของกล่องข้อความที่นี่, field หมายถึงส่วนประกอบของกล่องข้อความนี้ ทุกคนจะต้องเข้าใจความหมายนี้
if(field.confirmTo){//confirmTo คือพารามิเตอร์การกำหนดค่าที่กำหนดเอง ซึ่งโดยทั่วไปใช้เพื่อบันทึกค่ารหัสขององค์ประกอบอื่น
var pwd=Ext.get(field.confirmTo);//รับค่าของ ID ของ ConfirmTo
กลับ (val==pwd.getValue());
-
กลับเป็นจริง;
-
-
//กำหนดค่าพารามิเตอร์รายการ
รายการ:[{fieldLabel:"รหัสผ่าน",
รหัส: "pass1",
-
fieldLabel:"ยืนยันรหัสผ่าน",
รหัส: "pass2",
vtype:"password",//ประเภทการตรวจสอบที่กำหนดเอง
vtypeText: "รหัสผ่านทั้งสองไม่สอดคล้องกัน!",
ConfirmTo:"pass1",//id ขององค์ประกอบอื่นที่จะเปรียบเทียบ
-
4. ใช้การตรวจสอบนิพจน์ทั่วไป
คัดลอกรหัสรหัสดังต่อไปนี้:
ใหม่ Ext.form.TextField({
fieldLabel : "ชื่อ",
ชื่อ : "author_nam",
regex: //[/u4e00-/u9fa5]/, // นิพจน์ทั่วไปอยู่ระหว่าง /...../ [/u4e00-/u9fa5]: สามารถป้อนได้เฉพาะภาษาจีนเท่านั้น
regexText: "ป้อนได้เฉพาะภาษาจีนเท่านั้น!", //ข้อความแสดงข้อผิดพลาดนิพจน์ทั่วไป
AllowBlank: false //การยืนยันนี้ยังใช้ได้อยู่ ไม่สามารถเว้นว่างได้