jquery.validationEngine 自定义验证的使用方法

最新推荐文章于 2025-06-10 10:51:14 发布

原创最新推荐文章于 2025-06-10 10:51:14 发布 · 1w 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

javascript 专栏收录该内容

47 篇文章

订阅专栏

本文介绍了如何在前端使用jQuery Validation Engine插件自定义表单验证规则，包括两种方法：定义验证规则和定义验证方法，并展示了如何在表单控件中应用这些自定义规则。

一：自定义验证规则

(1) 方法1 ，定义验证规则

$.validationEngineLanguage.allRules.name = {
                "regex": /^\w{5,10}$/,
                "alertText": "* 5到10个字母、数字、下划线"
            };

name就是自定义的验证规则名称

(2) 方法2 ，定义验证方法

        function validateNameField(field, rules, i, options){
            var value = $("#name").val();
            if($(value =="" || value.length>10 || value.length < 5)){
                return "* 5到10个字符";
             }
        }

二：在表单控件中添加验证

对应方法1

<form id="editform" action="#" method="post">  
    <input id="user" name="user" type="text" value="" class="validate[required,custom[name]]" />  
    <input type="submit" value="提交"/>  
</form>

对应方法2

<form id="editform" action="#" method="post">  
    <input id="user" name="user" type="text" value="" class="validate[required,funcCall[validateNameField]]" />  
    <input type="submit" value="提交"/>  
</form>

注意：如果不配合required使用，单独调用方法validate[funcCall[validateNameField]]，那么需要在return提示信息之前调用rules.push('required'); 例如

        function validateNameField(field, rules, i, options){
            var value = $("#name").val();
            if($(value =="" || value.length>10 || value.length < 5)){
		rules.push('required');
                return "* 5到10个字符";
             }
        }

三：启动验证机制

$ready(function () {  
        $("#editform").validationEngine();  
    });