需要做的是一個註冊功能:
需要驗證所有input中是否有值、值的長度
驗證手機號碼，是否和正則一樣，然後用ajax傳到後臺，看看手機號碼有沒有被註冊，後臺返回兩個參數，一個是true、false一個是message
點擊提交時，把手機驗證碼中的值傳到後臺驗證，並返回信息，暫時還沒有接口，我就隨便瞎做了下。
看代碼：（有不嚴謹、錯的地方，望指正）
$(document).ready(function() {
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "請正確填寫您的手機號碼");
$("#registForm").validate({
rules: {
validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"},
phone: {
required : true,
minlength : 11,
isMobile : true
},
password: {
required: true,
minlength: 6,
maxLength : 16
},
repassword: {
required: true,
minlength: 6,
equalTo: "#password"
},
number: {
required: true,
minlength: 4
}
},
messages: {
phone: {remote: "手機號輸入不正確",required: "請填寫手機號",minlength: "請輸入11位手機號碼"},
isMobile : "請正確填寫您的手機號碼",
password: {required: "請輸入密碼",minlength: "密碼至少輸入六位數",maxLength: "密碼最多輸入十六位數"},
repassword: {required: "請輸入確認密碼",minlength: "確認密碼至少輸入六位數",equalTo: "兩次密碼不相同"},
number: {required: "請輸入手機驗證碼",minlength: "驗證碼請輸入四位數"},
validateCode: {remote: "驗證碼不正確.", required: "請填寫驗證碼."}
},
errorLabelContainer: "#messageBox",
errorPlacement: function(error, element) {
error.appendTo($("#registerError").parent());
},
submitHandler:function (form) { //這裏是點擊提交後的操作
var numberResult = $("#number").val();
$.ajax({
url: "${ctx}/register/regist/phoneCode",
type: "post",
datatype: "json",
data: {number:numberResult},
success:function(data){
if(data.result == "true"){
alert("提交中");
$("#numberSpan").text("");
form.submit();//這裏要注意，如果用$（"form"）.submit();會死循環...
}else{
$("#numberSpan").text("手機驗證碼錯誤");
}
},
error:function(){
}
});
}
});
$("#num").click(function(){//點擊獲取手機驗證碼
var boolean = $("#registForm").validate().element($("#phone"));//只要驗證輸入手機號碼的那一個input
if(boolean){
var phoneResult = $("#phone").val();
$.ajax({
url: "${ctx}/register/regist/phoneValidate",
type: "post",
datatype: "json",
data: {phone:phoneResult},
success: function(data){
if(data.result=="true"){
$("#phoneSpan").text("");
alert("手機驗證碼：1234");
}else{
$("#phoneSpan").text(data.msg);
}
},
error:function(){
alert('請求出現錯誤...');
}
});
}
});
$("#phone").focus(function(){
$("#phoneSpan").text("");
});
$("#number").focus(function(){
$("#numberSpan").text("");
});
});