jedi validate
v1.5.6
Jedi Validate เป็นองค์ประกอบการตรวจสอบความถูกต้องของแบบฟอร์มแบบน้ำหนักเบา
นี่คือคลาส JS และคุณสามารถสร้างอินสแตนซ์ใหม่ได้โดยส่งองค์ประกอบ DOM และออบเจ็กต์ตัวเลือก
// npm install jedi-validate
import JediValidate from 'jedi-validate' ;
const JediValidate = new JediValidate ( document . querySelector ( '#form5' ) ) ;ตามค่าเริ่มต้น แบบฟอร์มจะถูกส่งผ่าน ajax พร้อมด้วยพารามิเตอร์ที่ตั้งค่าเป็น HTML
เนื่องจากรูปแบบดังกล่าวมีรูปแบบ json ที่เข้มงวดสำหรับการโต้ตอบ คุณจึงสามารถส่งแบบฟอร์มได้หลายวิธี:
แต่การตอบสนองของเซิร์ฟเวอร์จะมีโครงสร้างเดียวเสมอ ง่ายต่อการปฏิบัติ
หากคุณต้องการสร้างซอร์สโค้ด รันการทดสอบ หรือสนับสนุน ก่อนอื่นให้แยกหรือโคลนที่เก็บนี้ลงในเครื่องของคุณ ตรวจสอบให้แน่ใจว่าได้ติดตั้ง NodeJS และ npm แล้ว เช็คอินเทอร์มินัลด้วย node -v และ npm -v
หากต้องการติดตั้งการพึ่งพาโครงการให้รันก่อน
npm install
หากต้องการสร้างแหล่งที่มาและดูการเปลี่ยนแปลงในการรันเทอร์มินัล
npm run build
หากต้องการรวมซอร์สและให้บริการกับ localhost:4000 run
npm run dev
นี่จะเป็นการเปิดเซิร์ฟเวอร์ภายในของ webpack ซึ่งคุณสามารถนำทางไปยังไดเร็กทอรีหรือทรัพยากรที่ต้องการได้ หน้าทดสอบอยู่ใน example/bootstrap.html
การทดสอบยังไม่เสร็จสมบูรณ์และข้อผิดพลาดรันไทม์จะเกิดขึ้นเมื่อพยายามเรียกใช้การทดสอบในคอนโซลหรือผ่านเบราว์เซอร์ทดสอบ
มีตัวเลือกสามประเภท:
{
ajax : {
url : null ,
enctype : 'application/x-www-form-urlencoded' ,
sendType : 'serialize' , // 'formData', 'json'
method : 'GET'
} ,
rules : { } ,
messages : { } ,
containers : {
parent : 'form-group' ,
message : 'help-block' ,
baseMessage : 'base-error'
} ,
states : {
error : 'error' ,
valid : 'valid' ,
pristine : 'pristine' ,
dirty : 'dirty'
} ,
callbacks : {
success : function ( ) {
} ,
error : function ( ) {
}
} ,
clean : true ,
redirect : true
} ภายใต้ตัวเลือก ajax เรากำหนดวิธีการส่งแบบฟอร์ม อาจเป็น null หากเราไม่ต้องการให้ส่งแบบฟอร์ม หรืออาจเป็นออบเจ็กต์ที่มีตัวเลือกต่อไปนี้:
ค่าเริ่มต้น: null สามารถแทนที่ได้โดยแอตทริบิวต์แบบฟอร์ม action หรือตัวเลือกเริ่มต้น
ค่าเริ่มต้น: 'application/x-www-form-urlencoded' สามารถแทนที่ได้ด้วยแอตทริบิวต์แบบฟอร์ม enctype ตัวเลือกเริ่มต้น หรือ sendType
ค่าเริ่มต้น: 'GET' สามารถแทนที่ได้โดยแอตทริบิวต์รูปแบบ method หรือตัวเลือกเริ่มต้น
ค่าเริ่มต้น: 'serialize'
คุณสามารถเข้ารหัสและส่งข้อมูลได้สามวิธี ตัวเลือกที่ถูกต้องคือ:
'formData' - ส่งแบบฟอร์มเป็น FormData 'Content-type' ถึง 'multipart/form-data''json' - ส่งแบบฟอร์มเป็นวัตถุ JSON ตั้งค่า 'Content-type' เป็น 'application/json; charset=utf-8''serialize' - ส่งแบบฟอร์มเป็นคำขอปกติ ตั้งค่า 'Content-type' เป็น 'application/x-www-form-urlencoded'ไฟล์สามารถส่งได้โดยใช้การเข้ารหัส 'formData' เท่านั้น
name=111&phone=222222222&email=wow%40wow.com
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="name"
111
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="phone"
222222222
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="email"
...
{ "name" : " 111 " , "phone" : " 222222222 " , "email" : " [email protected] " , "file" : " index.html " }กฎที่ใช้ในการตรวจสอบอินพุต องค์ประกอบแต่ละองค์ประกอบจะถูกจับคู่โดยแอตทริบิวต์ 'ชื่อ' กับกฎที่เกี่ยวข้อง หากมี หากไม่มีกฎอยู่ จะไม่มีการตรวจสอบความถูกต้องเกิดขึ้น
กฎไม่ได้ถูกกำหนดโดยค่าเริ่มต้น แต่สามารถตั้งค่าผ่านแอตทริบิวต์หรือคลาสใน HTML หรือในตัวเลือกเริ่มต้น
- จำเป็น : บูลีน
- regexp : RegExp
- อีเมล์: บูลีน
- โทร : บูลีน
- URL : บูลีน
- ขนาดไฟล์: ตัวเลข
- ส่วนขยาย: สตริง
สามารถใช้คุณลักษณะเหล่านี้ได้
- ประเภท - อีเมล โทร หรือ url (แต่ละประเภทจะใช้ regexp)
- รูปแบบ - regexp พร้อมค่าแอตทริบิวต์
- จำเป็น - ตรวจสอบอินพุตเพื่อดูค่าว่าง
ตัวอย่าง:
< input id =" name " type =" text " name =" name " required class =" required " >
< input id =" email " type =" email " name =" email " class =" required " > คุณสามารถตั้งกฎของคุณเองได้โดยใช้ฟังก์ชัน addMethod :
JediValidate . addMethod ( 'methodName' , function ( value , options ) {
return true // true if valid
} , 'Error message' ) ;เพิ่มกฎเป็นส่วนหนึ่งของออบเจ็กต์ตัวเลือกของคุณเมื่อเริ่มต้น:
const validator = new JediValidate ( formWrapper , {
rules : {
name : {
required : true
} ,
email : {
email : true
} ,
phone : {
regexp : / ^([+]+)*[0-9x20x28x29-]{5,20}$ /
} ,
file : {
filesize : 10000 ,
extension : "html|css|txt"
}
file2 : {
filesize : [ 10000 , "two-files-checkbox" ] , // check only if checkbox checked
extension : [ "html|css|txt" , "two-files-checkbox" ] , // without recollect by default
another : [ 'param' , function ( oldData ) {
const newData = validator . collect ( 'two-files-checkbox' ) ; // manual data recollect for concrete field
return ! ! newData [ 'two-files-checkbox' ] ;
} ] ;
}
}
} ) ;คุณสามารถจดจำข้อมูลจากแบบฟอร์มทั้งหมดหรือเพียงแค่ชื่อที่ป้อน วิธีการส่งคืนข้อมูลใหม่
validator . collect ( ) ; // all form
validator . collect ( 'two-files-checkbox' ) ; // one field คุณสามารถกำหนดข้อความแสดงข้อผิดพลาดของคุณเองได้ในกรณีที่การตรวจสอบล้มเหลว ในกรณีที่องค์ประกอบแบบฟอร์มไม่ผ่านการตรวจสอบ ข้อความที่สอดคล้องกับแอตทริบิวต์ 'ชื่อ' ขององค์ประกอบจะถูกนำมาใช้
messages : {
phone : {
regexp : "Invalid phone number"
} ,
file : {
filesize : "File is too big"
}
} ,
