表单验证以及获取手机验证码的小demo

//  需求：根据不同的响应结果，进行响应。
//  (1) 如果接口调用成功
//      如果响应代码为100，倒计时
//      如果响应代码为101，提示手机号重复
//  (2)如果接口调用失败，告诉用户"服务器繁忙，请稍候再试"

function showTips(content) {
$('.tips>p').text(content).stop(true).slideDown(1000).delay(100).slideUp(2000)
}
// 明确需求:
// 实现 点击按钮, 给用户手机发送短信
// 调用后台提供的接口, 后台就可以帮我们发送短信了

// 1. 发送请求前, 进行格式校验
//  (1) 手机号码不能为空   如果为空提示"手机号不能为空"
//  (2) 手机号码格式必须正确, 提示"请输入正确的手机号码"

var $sendBt = $('#sendBt');
$sendBt.click(function () {

//  (1) 手机号码不能为空   如果为空提示"手机号不能为空"
if($('#mobile').val().trim()===""){
showTips("呵呵");
return;
}
//(2) 手机号码格式必须正确, 提示"请输入正确的手机号码"(正则验证)
if(!/^1\d{10}$/.test($('#mobile').val())){
showTips("哈哈");
return;
}
// 点击发送时，按钮显示为"发送中",并且不能重复提交请求
$sendBt.val("发送中。。。").addClass("disabled");
$.ajax({
type:"get",
<
111e6
/span>url:"getCode.php",
data:{
mobile:$('#mobile').val()
},
dataType:"json",
success: function (data) {
console.log(data);
if(data.code ===100){
showTips(data.msg);
var count = 3;
var timer = setInterval(function () {
count--;
$sendBt.val(count+'秒后再次发送');
if(count === 0){
clearInterval(timer);
$sendBt.val('发送验证码').removeClass('disabled');
}
},1000)
}
if(data.code ===101){
showTips(data.msg);
$sendBt.val('再次发送验证码').removeClass('disabled');
}

},
error: function (error) {
showTips("服务器繁忙");
//恢复按钮
$sendBt.val("获取验证码").removeClass("disabled");
}
})

})
//注册功能

//总需求：点击注册按钮，向服务端发送请求
var $submitBt = $('#submitBt');

$submitBt.click(function () {
//需求1:表单校验
//1.1 用户名不能为空，否则提示"请输入用户名"
if($('.name').val().trim() == ""){
showTips("请输入用户名");
return;
}
//1.2 密码不能为空，否则提示"请输入密码"
if($('.pass').val().trim() == ""){
showTips("请输入密码");
return;
}
//1.3 确认密码必须与密码一直，否则提示"确认密码与密码不一致"
if($('.repass').val() !== $('.pass').val()){
showTips("确认密码与密码不一致");
return;
}
//  (1) 手机号码不能为空   如果为空提示"手机号不能为空"
if($('#mobile').val().trim()==""){
showTips("呵呵");
return;
}
//(2) 手机号码格式必须正确, 提示"请输入正确的手机号码"(正则验证)
if(!/^1\d{10}$/.test($('#mobile').val())){
showTips("哈哈");
return;
}
//1.6 短信验证码必须是4位的数字，否则提示"验证码格式错误"
if(!/\d{4}$/.test($('.code').val())){
showTips("验证码提示错误");
return;
}
//需求2：点击注册按钮时，按钮显示为"注册中...",并且不能重复提交请求
if($submitBt.hasClass('disabled')){
return;
}

$submitBt.val('注册中...').addClass('disabled');

//        console.log($('#ajaxForm').serialize());
//需求3：根据不同响应结果，处理响应
$.ajax({
url: "register.php",
type: "post",
dataType: "json",
// $(表单).serialize 方法 会将所有表单中 设置了 name 属性的表单元素,
// 进行 参数拼接, jquery 直接支持在 data 传输这种格式
// name=1234&pass=1234&mobile=15751776628&code=1234
data: $('#ajaxForm').serialize(),
//3.1 接口调用成功
success: function (data) {
console.log(data);
//100 提示用户注册成功，3s后跳转到首页
if(data.code ===100){
showTips(data.msg);
setTimeout(function () {
location.href = "www.baidu.com";
},3000)
}
//101 提示用户"用户名jepson已经存在"
if(data.code ===101){
showTips(data.msg);
$submitBt.val('立即注册').removeClass('disabled');
}
//102 提示用户"验证码错误"
if(data.code ===102 ){
showTips(data.msg);
$submitBt.val("立即注册").removeClass('disabled');
}
},
//3.1 接口调用失败，提示"服务器繁忙，请稍后再试",恢复按钮的值
error: function (error) {
showTips("服务器繁忙，请稍后再试");
$submitBt.val('立即注册').removeClass('disabled');
}
})

})