手机端校验的那些事情（简单实例）

这里通过一个简单的实例来聊聊，手机校验，和用户名校验：

一、页面初始的样子：

二、用户名输入错误：

三、手机号码输入错误：

四、用户名手机号码输入正确格式：

代码部分

HTML

<ul class="fill-mess">
<li>
<div class="name-mes">
<div>预订人</div>
<div  class="input-name"><input type="text" placeholder="请输入姓名" class="inut-name" /></div>
</div>
</li>
<div class="space-underline"></div>
<li>
<div class="name-tel">
<div>手机</div>
<div class="input-phonenum"><input type="text" placeholder="请输入手机号码" class="inut-phone" /></div>
</div>
</li>
<div class="space-underline"></div>
<li>
<div class="name-leaving-message">
<div>留言</div>
<div><input type="text" placeholder="请输入留言内容" class="inut-text" /></div>
</div>
</li>

</ul>

JS

/* 校验手机号码和用户名*/

function verify_inputMessage(){

$("#submit").click(function(){
var name = $(".inut-name").val();
var phone = $(".inut-phone").val();
var reg=/^[\u4e00-\u9fa5]{0,}$/;

if(!(reg.exec(name))){

/* alert("用户名错误！");*/
$(".input-name").after("<div class='error-name'>用户名错误！</div>").after("<div class='dialog'></div>");

}else{
if( !(/^1[34578]\d{9}$/.test(phone))){

/*   alert("手机号错误！");*/
$(".input-phonenum").after("<div class='error-phone'>手机号错误！</div>").after("<div class='dialog'></div>");
}else{

//跳转到成功的页面
location.href = "/hotel/checkTime"; //这里跳转的是路由的路径
}
}

});