jquery form java_JQUERY.form插件简单使用

$(function(){

//第一种Ajax提交表单的方式

$("#registerForm").ajaxForm(function(data){

data=eval("("+data+")");

alert(data.msg);

});

//执行流程:1,点击表单的提交按钮,2,触发jQuery-validate的验证;

//3,验证成功,jquery-validate会自动提交表单;(因为这个时候表单已经是Ajax表单了,所以表单的提交通过Ajax提交)

//自定义jquery-validate验证方法

/*$.validator.addMethod("checkUsername", function(value, element) {

//这个验证方法返回一个boolean值来代表验证是否通过

var ret=false;

$.ajax({

dataType:"json",

type:"post",

async:false,

url:"/checkUsername.do",

data:{

username:value

},

success:function(data){

ret = data.success;

}

});

return ret;

}, "用户名已经存在!");*/

$("#registerForm").validate({

rules:{

username:{

required:true,

rangelength:[4,16],

checkUsername:true

},

password:{

required:true,

rangelength:[4,16]

},

confirmPwd:{

equalTo:"#password"

}

},

messages:{

username:{

required:"请输入用户名",

rangelength:"用户名长度为{0}到{1}",

remote:"用户名已经存在"

},

password:{

required:"请输入密码",

rangelength:"密码长度为{0}到{1}"

},

confirmPwd:{

equalTo:"两次输入密码不一致"

}

},

//修改错误提示文字的样式

errorClass:"text-danger",

//处理错误高亮

highlight:function(element,errorClass){

alert("aa");

$(element).closest(".form-group").addClass("has-error");

},

//取消错误高亮

unhighlight:function(element,errorClass){

$(element).closest(".form-group").removeClass("has-error");

},

//在表单验证成功之后提交表单做的事情

//第二种Ajax提交表单方式:

//1,点击表单中的提交按钮,2,jquery-valiate执行验证通过;因为这个时候我们配置了submitHandler,所以,当验证成功之后;

//jquery-validate不会自动提交表单,来执行submitHandler,3,在submitHandler中直接使用ajaxSubmit来完成表单提交;

/*submitHandler:function(form){

alert("aaaa");

return false;

/!*$("#registerForm").ajaxSubmit({

dataType:"json",

success:function(data){

if(data.success){

$.messager.confirm("提示","注册成功,点击确认进入登录",function(){

window.location.href="/login.html";

});

}else{

$.messager.popup("注册失败,"+data.msg);

}

}

});*!/

}*/

});

})