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' ) ) ;デフォルトでは、フォームは HTML で設定されたパラメーターを使用して ajax 経由で送信されます。
インタラクション用に厳密な json 形式が提供されるため、さまざまな方法でフォームを送信できます。
ただし、サーバーの応答には常に 1 つの構造があります。実装が簡単です。
ソース コードをビルドしたり、テストを実行したり、貢献したりする場合は、まずこのリポジトリをローカル マシンにフォークまたはクローン作成します。 NodeJS と npm がインストールされていることを確認します。 node -vおよびnpm -vを使用してターミナルをチェックインします。
プロジェクトの依存関係をインストールするには、最初に実行します。
npm install
ソースをビルドしてターミナル実行の変更を監視するには、次のようにします。
npm run build
ソースをバンドルしてlocalhost:4000に提供するには、次のコマンドを実行します。
npm run dev
これにより、Webpack ローカル サーバーが開き、目的のディレクトリまたはリソースに移動できます。テスト ページはexample/bootstrap.htmlにあります。
テストはまだ完了していないため、コンソールまたはテスト ブラウザーを通じてテストを実行しようとすると、ランタイム エラーが発生します。
オプションには次の 3 種類があります。
{
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フォーム属性、init オプション、またはsendTypeによってオーバーライドできます。
デフォルト: 'GET' methodフォーム属性または初期化オプションによってオーバーライドできます。
デフォルト: 'serialize'
3 つの異なる方法でデータをエンコードして送信できます。有効なオプションは次のとおりです。
'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 : ブール値
- ファイルサイズ: 数値
- 拡張子: 文字列
これらの属性を使用できます
- type - 電子メール、電話番号、または 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"
}
} ,
