版权声明: https://blog.csdn.net/qq_37185081/article/details/80337957
需要做的是一个注册功能:
需要验证所有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("");
});
});