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

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

//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 //この検証はまだ有効です。