<input type="tel" class="input01 pos-ab" id="phone" maxlength="11" placeholder="请输入手机号"/>
<img src="img/sh-btn_03.png" class="sh-btn pos-ab">
//验证手机号
$(".sh-btn").click(function(){
var tel = document.getElementById("phone");
if(!tel.value) {
alert("请输入您的联系方式!");
tel.focus();
return false;
}
if(!/^1[0-9]{10}$/.test(tel.value)) {
alert("手机号格式不正确!");
tel.focus();
return false;
}
$(".shouquan").hide();
})
function check_phone(phone){
if(!(/^1[3456789]\d{9}$/.test(phone))){
return false
}else{
return true
}
}
验证2.0版本:
html: “data-role”属性是HTML 5的一个新特征,通过设置该属性,jQuery Mobile就可以很快地定位到指定的元素,并对内容进行相应的处理,相当于之前写的focus();
<div class="form">
<img src="img/bg3.png?v=1.12" class="bg03">
<input type="text" class="inp name1 bm_name" data-role="none" maxlength="10">
<input type="tel" class="inp tels1 bm_tels" data-role="none" maxlength="11">
<input type="tel" class="inp IDcard bm_IDcard" data-role="none" maxlength="18">
<input type="text" class="inp name2 bm_name2" data-role="none" maxlength="10">
<input type="tel" class="inp tels2 bm_tels2" data-role="none" maxlength="11">
<input type="text" class="inp time bm_time" name="time" id="shijian" data-role="none" readonly="">
<input type="button" class="bm_btn" data-role="none" value="">
</div>
js:
$(".bm_btn").click(function(){
var bminp=$(".inp");
var bm1=$(".bm_name").val();
var bm2=$(".bm_tels").val();
var bm3=$(".bm_name2").val();
var bm4=$(".bm_tels2").val();
var bm5=$(".bm_time").val();
var bm6=$(".bm_IDcard").val();
var pattern1=/^1[3456789]\d{9}$/; //手机号正则
var pattern2=/^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/; //邮箱正则
var pattern3=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/; //身份证正则
if(bminp.hasClass("bm_name")){
if(bm1==""){
alert("请输入推荐人的姓名!");
return false;
}
};
if(bminp.hasClass("bm_tels")){
if(bm2==""){
alert("请输入推荐人的手机号码!");
return false;
}
if(!pattern1.test(bm2)){
alert("请输入推荐人正确的手机号码!");
return false;
}
};
if(bminp.hasClass("bm_IDcard")){
if(bm6==""){
alert("请输入推荐人的身份证!");
return false;
}
if(!pattern3.test(bm6)){
alert("请输入正确的身份证号码!");
return false;
}
};
if(bminp.hasClass("bm_name2")){
if(bm3==""){
alert("请输入被推荐人的姓名!");
return false;
}
};
if(bminp.hasClass("bm_tels2")){
if(bm4==""){
alert("请输入被推荐人的手机号码!");
return false;
}
if(!pattern1.test(bm4)){
alert("请输入被推荐人正确的手机号码!");
return false;
}
};
if(bminp.hasClass("bm_time")){
if(bm5==""){
alert("请选择到访!");
return false;
}
};
$('.bm_btn').attr("disabled",true);
console.log("提交内容:"+bm1,bm2,bm3,bm4,bm5,bm6)
$.ajax({
url : "http://wx.whyimingkeji.com/jiaotouyhhf/index.php?form-form_190812",
data: {recommender:bm1,tel:bm2,be_recommender:bm3,be_tel:bm4,visit_time:bm5,id_card:bm6},
dataType:'json',
type:'post',
success:function(res){
console.log(res);
//后端返回消息alert(res.return_msg);
if (res.return_code== 'success') {
console.log("提交成功!");
alert("提交成功!");
window.location.reload();
}else{
$('.bm_btn').removeAttr("disabled"); //disabled 带有一个禁用输入字段的 HTML 表单
//.removeAttr 移除属性
console.log("提交失败,请检查失败原因");
console.log("res:"+res);
}
}
});