1. 程式人生 > >JQUERY.form插件簡單使用

JQUERY.form插件簡單使用

location ajaxform addm handler cti rip rule href light

<script type="text/javascript">
$(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);
}
}
});*!/
}*/
});
})
</script>

JQUERY.form插件簡單使用