请转载此文的朋友务必附带原文链接，谢谢。
原文链接：http://xuyran.blog.51cto.com/11641754/1861926
<form class="mui-input-group"> <div class="mui-input-row"> <input type="tel" placeholder="手机" required="required"> </div> <div>请输入正确的手机号码</div> <div class="mui-input-row ss"> <input type="text" placeholder="验证码" id="yzm" required="required"> <button type="button" class="btn" id="getCode">发送</button> </div> <div>验证码必须为6位数字</div> <div class="mui-input-row" > <input type="password" placeholder="限制6-20位字符，区分大小写" name="password" required="required"> </div> <div>密码不得小于6或大于20个字符</div> <div class="mui-input-row" > <input type="password" placeholder="确认密码" name="password-sure" required="required"> </div> <div>两次密码输入不一致</div> <div class="mui-input-row" id="submit"> <button type="button" class="btn">提交</button> </div> </form>
jquery代码如下：
$(function(){
//手机号检查
$("input[type='tel']").keyup(function(){
var reg = /^\d*$/;
if(this.value.length > 11){
this.value = this.value.substr(0,11);
$(this).focus();
}
else if(!reg.test(this.value)){
$(this).parent().next().show().html("手机号码只能为数字");
$(this).focus();
}else{
$(this).parent().next().hide();
}
}).blur(function(){
if(this.value == ""){
$(this).parent().next().show().html("手机号码不能为空");
$(this).focus();
}
else if(!/^1[3|4|5|8]\d{9}$/.test(this.value)){
$(this).parent().next().show().html("请输入正确的手机号码");
$(this).focus();
}else{
$(this).parent().next().hide();
}
})
//获取短信验证码
$("#getCode").click(function(){
$("input[type='tel']").trigger('blur');
var time = 120;
var error = $(this).parent().prev().css("display");
alert(error);
alert(error != "block");
var phoneNum = $("input[type='tel']").val();
if(phoneNum != ""&& error != "block"){
$.ajax({
type:"post",
url:"/Ajax/VerificationCode.ashx",
dataType:"json",
data:{
method:"SendCode",
Phone:phoneNum
},
success:function(data){
if(data.reslut.msg == 1){
var t = setInterval(function(){
time--;
$(this).attr("disabled",true).addClass("grey")
.html(time+"s<p style='font-size:10px'>已发送</p>")
if(time == 0){
clearInterval(t);
$("#getCode").removeAttr("disabled").removeClass("grey").html("重新获取验证码");
}
},1000);
}else{
alert(data.result.msbox);
}
}
});
}
})
//验证码检查
$("#yzm").keyup(function(){
var reg = /^\d*$/;
if(this.value.length > 6){
this.value = this.value.substr(0,6);
}
else if(!reg.test(this.value)){
$(this).parent().next().show();
$(this).focus();
}else{
$(this).parent().next().hide();
}
}).blur(function(){
if(this.value == ""){
$(this).parent().next().show().html("验证码不能为空");
}else if(this.value.length < 6){
$(this).parent().next().show().html("验证码必须为6位数字");
}
})
//密码检查
$("input[name = 'password']").blur(function(){
if(this.value.length < 6||this.value.length > 20){
$(this).parent().next().show();
}else{
$(this).parent().next().hide();
}
})
//确认密码
$("input[name= 'password-sure']").keyup(function(){
var password = $("input[name = 'password']").val();
if(this.value != password){
$(this).parent().next().show();
}else{
$(this).parent().next().hide();
}
}).blur(function(){
if(this.value == "") {
$(this).parent().next().show().html("密码不能为空");
}
})
//整个表单验证
$("#submit").click(function(){
$(".mui-input-row input").triggerHandler('blur');
var numError = $('.mui-input-row + div').css("display");
if(numError == "block"){
return false;
}
$.ajax({
type:"post",
url:"/Ajax/User.ashx",
dataType:"json",
data:{
method:"Reg",
Phone: $("input[type = 'tel']").val(),
Pwd: $("input[name = 'password']").val(),
Code: $("#yzm").val()
},
success:function(data){
var result = data.split("|");
if (result[0] == "error") {
alert(result[1]);
//location.reload();
}
if (result[0] == "success") {
alert(result[1]);
window.location.href="registerSuccess.html";
}
}
})
})
})免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
