jQuery EasyUI フォームプラグイン -Validatebox 検証ボックス

jQuery EasyUI プラグイン

依存関係

• tooltip

使用法

マークアップから検証ボックス（validatebox）を作成します。

<input id="vv" class="easyui-validatebox" data-options="required:true,validType:'email'">

JavaScript を使用して検証ボックス（validatebox）を作成します。

<input id="vv">

$('#vv').validatebox({
    required: true,
    validType: 'email'
});

パスワードと再入力したパスワードが同じかどうかを確認します。

// extend the 'equals' rule
$.extend($.fn.validatebox.defaults.rules, {
    equals: {
        validator: function(value,param){
            return value == $(param[0]).val();
        },
        message: 'Field do not match.'
    }
});

<input id="pwd" name="pwd" type="password" class="easyui-validatebox" data-options="required:true">
<input id="rpwd" name="rpwd" type="password" class="easyui-validatebox"
    required="required" validType="equals['#pwd']">

検証ルール

検証ルールは、required および validType プロパティを使用して定義されます。以下はすでに実装されているルールです：

• email：email の正規表現ルールに一致します。
• url：URL の正規表現ルールに一致します。
• length[0,100]：x から y 文字まで許可します。
• remote['http://.../action.do','paramName']：ajax リクエストを送信して値を検証し、成功した場合は 'true' を返します。

検証ルールをカスタマイズするには、$.fn.validatebox.defaults.rules を上書きして、検証関数と無効な情報を定義します。たとえば、minLength 検証タイプを定義します：

$.extend($.fn.validatebox.defaults.rules, {
    minLength: {
        validator: function(value, param){
            return value.length >= param[0];
        },
        message: 'Please enter at least {0} characters.'
    }
});

これで、この minLength 検証タイプを使用して、少なくとも5文字の入力が必要な入力ボックスを定義できます：

<input class="easyui-validatebox" data-options="validType:'minLength[5]'">

プロパティ

<input class="easyui-validatebox" data-options="required:true,validType:'url'">
<input class="easyui-validatebox" data-options="
    required:true,
    validType:['email','length[0,20]']
">

メソッド

jQuery EasyUI プラグイン