jquery表单验证控件:Form-Validate例子

作者：袖梨 2022-06-25

在做登录注册模块的时候, 我们需要要求用户按照我们的规则进行信息的填写, 如果直接在填写完成之后提交的时候验证这些信息的话, 对于用户来说不得不说是一个比较烂的体验, form-validate控件是一个超强大的表单验证控件, 包含了简单的规则验证, 异步验证等等, 并且该控件可以自定义验证规则.既方便又实用.

官网下载form-validate之后, 在页面上引入jquery.validate.min.js文件, 注意: 在这之前必须先引入Jquery库;

需要验证的Form表单元素

用户名:

密　码:

确认密码:

邮箱地址:

定义一个js文件,编写验证代码

// 自定义验证规则
// 验证用户名格式
jQuery.validator.addMethod("username", function(value, element) {
    var user = /^[a-zA-Z][w]{4,16}$/;
    return this.optional(element) || (user.test(value));
}, "以字母开头，5-17 字母、数字、下划线'_'");

// 添加子用户表单验证
$('#addUser').validate({
    errorElement: 'span',     // 默认的错误信息元素
    errorClass: 'help-block', // 默认的错误信息类名
    focusInvalid: false,     // 未通过验证的第一个表单元素获得焦点

    // 基础规则验证
        rules : {
           username : {
               required : true,
               username : true,
           },
           password : {
               required : true,
               username : true
           },
           repassword : {
               required : true,
               equalTo : '#password'
           },
            email: {
                required: true,
                email: true,
                remote : {
                    url : 'checkEmail.php',
                    type : 'post',
                    dataType : 'json',
                    data : {
                        email : function () {
                            return $('#email').val();
                        }
                    }
                }
            }
        },

        // 提示信息
        messages : {
           username : {
               required : '用户名不能为空'
           },
           password : {
               required : '密码不能为空'
           },
           repassword: {
                required: "确认密码不能为空.",
                equalTo : '两次密码输入不正确'
            },
            email: {
                required: "邮箱不能为空.",
                email: "请输入正确格式的邮箱地址",
                remote: "该邮箱已经被注册."
            }
        }
    });
});