html部分
看图说话
<div class="applyPart-code">
<div id="ph-colose-code">
<img src="./images/btn_del.png" alt="">
</div>
<div class="ph-code">
<div class="ph-code-phone">
<div class="ph-code-phone-conetnt">
报名手机
<input type="text" id="ph-phone" placeholder="请输入手机号">
</div>
<!-- <p class="isApply">该手机号已经报名该论坛</p> -->
<p id="ph-phone-fu" class="isApply"></p>
</div>
<div class="ph-code-get">
<div class="ph-code-get-left">验证码</div>
<div class="ph-code-get-right">
<div class="ph-code-get-right-text"><input type="text" placeholder="请输入验证码" id=""></div>
<div class="ph-code-get-right-code">获取验证码</div>
</div>
</div>
</div>
<div class="ph-confirm">
确定
</div>
</div>
jquery部分
// 点击确定提交手机号
$('.ph-confirm').on('click',function(){
var phone = $('#ph-phone').val()
var flag = false;
// 电话包括移动 联通 电信
var myreg=myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;
var message = "";
if(phone == ''){
message = "手机号码不能为空!";
$('#ph-phone-fu').text(message)
}else if(phone.length !=11){
message = "请输入有效的手机号码!";
$('#ph-phone-fu').text(message)
}else if(!myreg.test(phone)){
message = "请输入有效的手机号码!";
$('#ph-phone-fu').text(message)
}else if(checkPhoneIsExist()){
message = "该手机号码已经被绑定!";
console.log(message)
$('#ph-phone-fu').text(message)
}else{
return flag=true;
}
});
//验证手机号是否存在
function checkPhoneIsExist(){
var phone = jQuery("#ph-phone").val();
var flag = true;
jQuery.ajax(
{ url: 后端接口,
data:{phone:phone},
dataType:"json",
type:"GET",
async:false,
success:function(data) {
var status = data.status;
if(status == "0"){
flag = false;
}
}
});
return flag;
}