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運行，
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表單屬性或 init 選項覆寫。
預設值： 'application/x-www-form-urlencoded'可以被enctype表單屬性、init 選項或sendType覆寫。
預設值： 'GET'可以被method表單屬性或 init 選項覆寫。
預設值： '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 " }用於驗證輸入的規則。每個表單元素都將透過「name」屬性與對應的規則（如果存在）進行比對。如果不存在規則，則不會進行驗證。
預設情況下，規則未定義，但可以透過屬性、HTML 中的類別或 init 選項進行設定。
- 必需：布林值
- 正規表示式：正規表示式
- 電子郵件：布林值
- 電話：布林值
- 網址：布林值
- 文件大小： 數量
- 擴展名：字串
可以使用這些屬性
- 類型 - 電子郵件、電話或 url（正規表示式將用於每種類型）
- 模式 - 具有屬性值的正規表示式
- 必需 - 檢查輸入是否為空值
例子：
< 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 您可以定義自己的錯誤訊息，以防驗證失敗。如果表單元素驗證失敗，則將套用與該元素的「name」屬性對應的訊息。
messages : {
phone : {
regexp : "Invalid phone number"
} ,
file : {
filesize : "File is too big"
}
} ,
