jedi validate
v1.5.6
Jedi Validate adalah komponen validasi formulir yang ringan.
Ini adalah kelas JS dan Anda dapat membuat instance baru dengan meneruskan elemen DOM dan objek opsi.
// npm install jedi-validate
import JediValidate from 'jedi-validate' ;
const JediValidate = new JediValidate ( document . querySelector ( '#form5' ) ) ;Secara default, form akan dikirim melalui ajax dengan parameter yang telah diatur dalam HTML.
Karena menyediakan format json yang ketat untuk interaksi, Anda dapat mengirim formulir dengan berbagai cara:
Namun respons server selalu memiliki satu struktur. Lebih mudah untuk diterapkan.
Jika Anda ingin membuat kode sumber, menjalankan pengujian, atau berkontribusi, pertama-tama fork atau kloning repo ini ke mesin lokal Anda. Pastikan NodeJS dan npm terinstal. Periksa di terminal dengan node -v dan npm -v .
Untuk menginstal dependensi proyek, jalankan terlebih dahulu,
npm install
Untuk membangun sumber dan melihat perubahan pada terminal yang dijalankan,
npm run build
Untuk menggabungkan sumber dan menyajikannya ke localhost:4000 dijalankan,
npm run dev
Ini akan membuka server lokal webpack tempat Anda dapat menavigasi ke direktori atau sumber daya yang diinginkan. Halaman pengujian terletak di example/bootstrap.html
Pengujian belum selesai dan kesalahan runtime akan terjadi saat mencoba menjalankan pengujian di konsol atau melalui browser pengujian.
Ada tiga jenis opsi:
{
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
} Di bawah opsi ajax kami menentukan cara mengirim formulir. Dapat berupa null jika kita tidak ingin formulir dikirimkan, atau dapat berupa objek dengan opsi berikut:
default: null Dapat diganti dengan atribut formulir action atau opsi init.
default: 'application/x-www-form-urlencoded' Dapat diganti dengan atribut formulir enctype , opsi init, atau sendType .
default: 'GET' Dapat diganti dengan atribut bentuk method atau opsi init.
default: 'serialize'
Anda dapat menyandikan dan mengirim data dalam tiga cara berbeda. Opsi yang valid adalah:
'formData' - kirim formulir sebagai FormData. 'Content-type' menjadi 'multipart/form-data''json' - kirim formulir sebagai objek JSON. Setel 'Content-type' ke 'application/json; charset=utf-8''serialize' - kirim formulir sebagai permintaan biasa. Setel 'Content-type' ke 'application/x-www-form-urlencoded'File hanya dapat dikirim menggunakan pengkodean '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 " }Aturan yang digunakan untuk memvalidasi input. Setiap elemen formulir akan dicocokkan dengan atribut 'nama' dengan aturan yang sesuai, jika ada. Jika tidak ada aturan, maka validasi tidak akan terjadi.
Aturan tidak ditentukan secara default, namun dapat diatur melalui atribut, atau kelas dalam HTML, atau dalam opsi init.
- diperlukan: boolean
- regexp : RegExp
- email : boolean
- telp : boolean
- url : boolean
- ukuran file: nomor
- ekstensi: tali
Atribut ini dapat digunakan
- ketik - email, telp atau url (regexp akan digunakan untuk setiap jenis)
- pola - regexp dengan nilai atribut
- diperlukan - periksa input untuk nilai kosong
Contoh:
< input id =" name " type =" text " name =" name " required class =" required " >
< input id =" email " type =" email " name =" email " class =" required " > Anda dapat menetapkan aturan Anda sendiri menggunakan fungsi addMethod :
JediValidate . addMethod ( 'methodName' , function ( value , options ) {
return true // true if valid
} , 'Error message' ) ;Tambahkan aturan sebagai bagian dari objek opsi Anda saat menginisialisasi:
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' ] ;
} ] ;
}
}
} ) ;Anda dapat mengingat kembali data dari keseluruhan formulir atau hanya dengan memasukkan nama. Metode ini mengembalikan data baru.
validator . collect ( ) ; // all form
validator . collect ( 'two-files-checkbox' ) ; // one field Anda dapat menentukan pesan kesalahan Anda sendiri jika validasi gagal. Jika elemen formulir gagal validasi, pesan yang sesuai dengan atribut 'nama' elemen akan diterapkan.
messages : {
phone : {
regexp : "Invalid phone number"
} ,
file : {
filesize : "File is too big"
}
} ,
