jquery.validate 自定义验证方法提交问题

最新推荐文章于 2025-06-18 21:31:04 发布

up214

最新推荐文章于 2025-06-18 21:31:04 发布

阅读量922

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/up214/article/details/80853360

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用jQuery插件进行表单验证的方法，包括自定义验证规则（如英文字符验证）、错误提示显示及隐藏等，确保表单数据的有效性和正确性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需要引入jquery.form.js

自定义方法：

// 匹配english
jQuery.validator.addMethod(“isEnglish”, function(value, element) {
return this.optional(element) || /^[A-Za-z]+$/.test(value);
}, “匹配english”);

提交：

var FormValidation = function () {

return {
    //main function to initiate the module
    init: function () {

        // for more info visit the official plugin documentation: 
        // http://docs.jquery.com/Plugins/Validation

        var form1 = $('#fromAddOrEdit');
        var error1 = $('.alert-danger', form1);
        var success1 = $('.alert-success', form1);         

       form1.validate({
            errorElement: 'span', //default input error message container
            errorClass: 'help-block', // default input error message class
            focusInvalid: false, // do not focus the last invalid input
            ignore: "",
            rules: {
                name: {
                    maxlength:200,
                    required: true,
                    remote:"existName.do"
                },
                roleid: {
                    maxlength:200,
                    required: true,
                    alnum: true,
                },
                description: {
                    maxlength:200,
                    required: true,
                },
                yhm: {
                    maxlength:200,
                    required: true
                },
                password:{
                    required: true,
                    maxlength:25
                },
                password2:{
                    required: true,
                    maxlength:25,
                    equalTo:"#password" 
                }

            }, 
            messages: { // custom messages 
                name: {                     
                    required: "请输入登录名",
                    remote: "该登录名已存在"
                },
                yhm: {                      
                    required: "请输入用户名"
                },
                roleid: {
                    alnum: "请输入正确的字母"
                },
                password: {
                    required: "请输入登录密码"
                },
                password2: {
                    required: "请输入确认密码",
                    equalTo: "两次密码不一致"
                }
            },
            invalidHandler: function (event, validator) { //display error alert on form submit 
                success1.hide();
                $('.alert-danger span.sei-form-message').text("请检查下列输入问题。");                               
                error1.show();
            },
            highlight: function (element) { // hightlight error inputs
                $(element)
                    .closest('.form-group').addClass('has-error'); // set error class to the control group
            },

            unhighlight: function (element) { // revert the change done by hightlight
                $(element)
                    .closest('.form-group').removeClass('has-error'); // set error class to the control group
            },

            success: function (label) {
                label
                    .closest('.form-group').removeClass('has-error'); // set success class to the control group
            },

            submitHandler: function (form) {
                success1.show();
                error1.hide();  
                fromAddOrEdit.submit();
            }
        });
    }

};

}();