jQuery Validate验证框架与 jQuery ajaxSubmit的联合使用

jQuery Validate验证框架自定义验证

第一步导入导入js库

<script src="<%=basePath%>static/js/jquery.js" type="text/javascript"></script>
<script src="<%=basePath%>static/js/jquery.validate.js" type="text/javascript"></script>

// 中文字两个字节
jQuery.validator.addMethod(
    "byteRangeLength", 
    function(value, element, param) {
        var length = value.length;
        for(var i = 0; i < value.length; i++){
            if(value.charCodeAt(i) > 127){
                length++;
            }
        }
        return this.optional(element) || (length >= param[0] && length <= param[1]);   
    }, 
    $.validator.format("请确保输入的值在{0}-{1}个字节之间(一个中文字算2个字节)")
);

// 邮政编码验证   
jQuery.validator.addMethod("isZipCode", function(value, element) {   
    var tel = /^[0-9]{6}$/;
    return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");

submit 表单提交

$(function(){
   $("#signupForm").validate({
        submitHandler:function(form){
            alert("submit!");   
            form.submit();
        }    
    });
});

ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法，所以使用此方法需要先引入这个插件。如下所示：

<script src="<%=basePath%>static/js/jquery.form.js" type="text/javascript"></script>

$("#adduser").validate({
　　submitHandler: function (form) {
　　$(form).ajaxSubmit({
　　type: "post",
　　url: "<%=basePath%>iforget.do",
　　success: function (data) {
　　　　if (data == 1) {
　　　　alert("发送成功");
　　　　location.href="<%=basePath%>/login";
　　}
　　if (data == 2) {
　　　　alert("参数错误");　　
　　　　this.reset;
　　}
　　if (data == 3) {
　　　　alert("账户或者邮箱不存在");
　　　　this.reset;
　　}
　　}
　　});
　　},
　　//验证规则    此处为jquery validate 表单提交的时候对数据的验证

　　rules: {
　　　　//required 表示该组件的输入值不能为空
　　　　userAccount: {
　　　　required: true,
　　　　isuserCode: true,
　　　　rangelength: [ 3, 16 ]
　　　　/*remote: "/system/queryUserCode.do"*/
　　},
　　email: {
　　　　required: true,
　　　　email: true,
　　　　isEmail: true
　　}

　　},
　　// 显示验证出错提示信息  此处为显示验证的出错信息
　　messages: {
　　　　userAccount: {
　　　　required: "您的用户名不能为空",
　　　　rangelength: "用户名的长度在3--16个字符之间"
　　　　/*remote: "用户名已存在"*/
　　},
　　email: {
　　　　required: "请输入邮箱 ",
　　　　email: "邮箱格式不正确",
　　　　isEmail: "邮箱格式不正确"
　　}
}
});
});