這里通過一個簡單的實例來聊聊，手機校驗，和用戶名校驗：

---

一、頁面初始的樣子：

先看一下演示效果：

---

二、用戶名輸入錯誤：

---

三、手機號碼輸入錯誤：

---

四、用戶名手機號碼輸入正確格式：

接下來就是代碼講解了，往下看，有驚喜……….

代碼部分

---

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"; //這里跳轉的是路由的路徑}}});

通過上述ＪＳ代碼即可對用戶名和手機號碼進行校驗，校驗成功以后就可跳轉到下一個checkTime頁面。

總結

以上是生活随笔為你收集整理的手机端校验的那些事情（简单实例）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。