次のようにコードをコピーします。
// onReady の function(){} に入れます
Ext.QuickTips.init(); // コンポーネントのプロンプト情報関数を提供します。フォームの主なプロンプト情報はクライアント検証のエラー メッセージです。
Ext.form.Field.prototype.msgTarget='side'; //プロンプトメソッド、列挙値は次のとおりです。
qtip - マウスがコントロール上に移動するとヒントが表示されます。
title - ブラウザに表示されるタイトルですが、テスト結果は qtip と同じです。
コントロールの下にエラーメッセージをアンダー表示します。
サイド - コントロールの右側にエラー アイコンを表示し、マウスがアイコンをポイントするとエラー プロンプトを表示します。デフォルト値。
id-[要素ID] 指定したIDのHTML要素にエラーメッセージが表示されます
1. 最も単純な例: null 検証
次のようにコードをコピーします。
//null 検証用の 2 つのパラメータ
allowBlank:false//false を空にすることはできません。デフォルトは true です。
blankText:string//空の場合のエラーメッセージ
jsコードは次のとおりです。
次のようにコードをコピーします。
var form1 = 新しい Ext.form.FormPanel({
幅:350、
renderTo:「form1」、
タイトル:「フォームパネル」、
デフォルト:{xtype:"テキストフィールド",inputType:"パスワード"},
アイテム:[
{fieldLabel:"空にすることはできません",
allowBlank:false、//空白は許可されません
blankText:"空にすることはできません", //エラーメッセージ、デフォルトはこのフィールドは必須です!
id:「ブランクテスト」、
}
】
});
2. 簡単な検証には vtype 形式を使用します。
この電子メール検証の例では、上記のコードの項目構成を書き換えます。
次のようにコードをコピーします。
アイテム:[
{fieldLabel:"空にすることはできません",
vtype:"email",//メール形式の検証
vtypeText: "有効な電子メール アドレスではありません", //エラー メッセージ。デフォルト値には入りません。
id:「ブランクテスト」、
アンカー:「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の値を取得します
戻り値 (val==pwd.getValue());
}
true を返します。
}
});
//項目パラメータを設定します
items:[{fieldLabel:"パスワード",
id:「パス1」、
}、{
フィールドラベル:"パスワードの確認",
id:「パス2」、
vtype:"password",//カスタマイズされた検証タイプ
vtypeText: "2 つのパスワードは矛盾しています!",
confirmTo:"pass1",//比較する別のコンポーネントのID
}
4. 正規表現検証を使用する
次のようにコードをコピーします。
new Ext.form.TextField({
フィールドラベル : "名前",
名前：「著者名」、
regex: /[/u4e00-/u9fa5]/, //正規表現は /..../ の間にあります。 [/u4e00-/u9fa5]: 中国語のみ入力できます。
regexText: "中国語のみ入力可能!", //正規表現エラーメッセージ
allowedBlank: false //この検証はまだ有効です。空にすることはできません。