jquery validationengine のカスタムバリデーションメッセージの設定方法

2年 ago
海斗, 葵
1 minute

カスタム検証メッセージを設定するには、ValidationEngineのaddMethod関数でカスタム検証ルールを追加し、ValidationEngineのインスタンス化時にカスタムエラーメッセージを設定します。

以下に例を示します。

まず、addMethod 関数を使用して、カスタム検証ルールとエラー メッセージを追加します。

// 添加自定义验证规则
$.validationEngineLanguage.allRules['customRule'] = {
    "regex": /^yourRegexPattern$/,
    "alertText": "* Custom error message"
};

// 在实例化ValidationEngine时设置语言选项
$(document).ready(function() {
    $("#myForm").validationEngine({
        promptPosition: "topRight",
        addPromptClass: "customPrompt",
        scroll: false,
        autoHidePrompt: true,
        autoHideDelay: 3000,
        showOneMessage: false,
        addCustomValidationFunction: function(field, rules, i, options) {
            if (rules[i] == "customRule") {
                if (!field.val().match(options.allrules[rules[i]].regex)) {
                    return options.allrules[rules[i]].alertText;
                }
            }
        }
    });
});

そしてフォームで独自に検証ルールを追加

<form id="myForm" method="post">
    <label for="myField">My Field:</label>
    <input type="text" name="myField" id="myField" class="validate[required,customRule]" />
    <input type="submit" value="Submit" />
</form>

上のサンプルでは「customRule」というカスタムバリデーションルールを追加し、ValidationEngineをインスタンス化する際にカスタムエラーメッセージを設定しました。そしてHTMLフォームの入力フィールドでは「customRule」を利用して、このカスタムバリデーションルールを適用しています。

「yourRegexPattern」はご自身の正規表現に置き換え、 「* カスタム・エラー・メッセージ」には表示するカスタム・エラー・メッセージに置き換える必要がある点に注意してください。

お役に立てれば幸いです！

bannerAds