Extjs の一般的な検証の概要 form_extjs-jsチュートリアル-php.cn

Extjs の一般的な検証の概要 form_extjs

WBOY

リリース： 2016-05-16 16:56:10

オリジナル

1125 人が閲覧しました

 
//onReady の function() に配置します{}
 Ext.QuickTips.init(); // コンポーネントのプロンプト情報関数を提供します。フォームの主なプロンプト情報はクライアント検証のエラー メッセージです。 
Ext.form.Field.prototype.msgTarget='side'; //プロンプト メソッド、列挙値は次のとおりです: 

qtip-マウスがコントロール上に移動したときにプロンプトを表示します。 title-ブラウザのタイトルに表示されますが、テスト結果は qtip と同じです。
under-コントロールの下にエラーメッセージを表示します。
side-コントロールの右側にエラーアイコンを表示します。マウスはアイコンをポイントします。デフォルト値:
id-[要素 ID] エラープロンプトは、指定された ID

1 の HTML 要素に表示されます。 >

コードをコピーコードは次のとおりです:

//null 検証の 2 つのパラメーター

allowBlank :false//false を空にすることはできません。デフォルトは true です。 
blankText:string//空の場合のエラー メッセージ 

 
js コードは次のとおりです: 

コードをコピーコードは次のとおりです。

var form1 = new Ext.form.FormPanel({

width:350, 
renderTo:"form1"、
title:"FormPanel"、
defaults:{xtype:"textfield"、inputType:"password"}、
items:[ 
{fieldLabel:"空白にすることはできません", 
allowBlank: false, //Null は許可されません 
blankText: "空白にすることはできません", //エラー メッセージ、デフォルトはこのフィールドは必須です! 
id: "blanktest" , 
} 
] 
}); 

 
2. 簡単な検証には vtype 形式を使用します。 

これはメール認証の例です。上記のコードの項目構成を書き換えます:

コードをコピーしますコードは次のとおりです。次のように:

items:[

{fieldLabel:"空にすることはできません", 
vtype:"email",//メール形式の検証
vtypeText:"無効ですメールアドレス",/ /エラーメッセージ。デフォルト値については触れません。
id: "blanktest", 
anchor: "90%" 
} 
上記の vtype は変更できます次の extjs へ デフォルトで vtype によってサポートされる検証: 
//フォーム検証でデフォルトでサポートされる vtype のタイプ 

 
1.alpha // 文字のみを入力でき、その他 (数字、特殊記号など) は入力できません 

2.alphanum//文字と数字のみ入力でき、その他は入力できません
3.email//メール認証、必要な形式は ""
4 .url//url 形式の検証、必要な形式は http://www.baidu.com です

3. 高度なカスタムパスワード検証
以前の検証はすべて extjs によって提供され、カスタマイズすることもできます検証機能。

コードをコピーコードは次のとおりです:

//最初に Ext.apply メソッドを使用します。カスタムのパスワード検証関数を追加します (他の名前も使用できます)

Ext.apply(Ext.form.VTypes,{ 
password:function(val,field){//val) は、ここではテキスト ボックスの値を指します。 field はこのテキスト ボックス コンポーネントを指します。誰もがこの意味を理解する必要があります。
if(field.confirmTo){//confirmTo はカスタム構成パラメータであり、通常は他のコンポーネントの ID 値を保存するために使用されます
var pwd=Ext。 get( field.confirmTo);//confirmTo の ID の値を取得します 
return (val==pwd.getValue()); 
return 
} 
} ); 
//アイテムパラメータを設定します 
items: [{fieldLabel: "Password", 
id: "pass1", 
},{ 
fieldLabel: "confirm Password", 
id: "pass2", 
vtype: "password", // カスタマイズされた検証タイプ 
 vtypeText: "2 つのパスワードは矛盾しています!", 
confirmTo: "pass1", // もう 1 つは、コンポーネントの ID 
} 

 
4. 正規表現を使用して 

コードをコピーコード次のように: new Ext.form.TextField({

fieldLabel : "name",

name : "author_nam", 
regex : /[u4e00-u9fa5]/ , //正規表現は /..../ の間にあります。 [u4e00-u9fa5]: 中国語のみ入力できます。
regexText: "中国語のみ入力できます!", //正規表現エラー メッセージ
 allowedBlank : false //この検証はまだ有効です。