JavaScript 可用來在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。
表單數據經常需要使用 JavaScript 來驗證其正確性
下面是今天這個界面的 HTML CSS JavaScript 部分關鍵代碼

---

<div class="form-body"><div class="input"><div class="type1"><span class="fuhao">*</span><span class="text">用戶名：</span><input type="text" class="input-text" id="user" value="" onblur="user()"><span class="tip">6-30位字母、數字或‘——’，字母開頭</span></div><span class="error" id="userSpan"> </span><div class="error"><input type="checkbox">我已閱讀并遵守<a href="#" class="policy"> 《中國鐵路客戶服務中心網站服務條款》</a></div><div class="next"><input type="submit" value="下一步" class="next-buttom" onclick=codeUser()></div>

部分重復的 HTML代碼省略掉了 這里觸發表單驗證的情況有兩種

• 在input框中的事件οnblur=“js函數”
  這種可以做到及時判斷也是平時用到最多的

• 最后按鈕上的鼠標點擊事件οnclick=codeUser()
  這個是將所有判斷放在一個點擊事件上

CSS樣式就不多說大家根據自己的需求去更改 我這里只做了最基本的樣式

下面是 JavaScript 部分代碼

//調用所有封裝 // function codeUser(){ // user() // passer() // passer2() // namer() // ider() // emailer() // phoner() // } //驗證用戶名 function user(){var useinput = document.getElementById('user').value;var usereg = /^[a-zA-Z]\w{6,}$/g;if(usereg.test(useinput)){userSpan.innerHTML = "格式正確"; }else{userSpan.innerHTML = "用戶名長度不能少于6個字符，且為英文字母開頭";} } //驗證密碼 function passer(){var passinput = document.getElementById('password').value;var passreg = /^[0-9A-Za-z]{6,}$/g;if(!passreg.test(passinput)){passwordSpan.innerHTML ="密碼必須為數字和字母且6位以上"}else{passwordSpan.innerHTML ="格式正確"} }

及時和點擊只用一種 所以將上面統一調用做了注釋可以根據需求來選擇
主要是通過得到前臺 input 中輸入數據的值 進行正則判斷 在后臺確定返回的提示內容顯示在 HTML的 span標簽中

下面提供幾個正則判斷

//兩個及以上漢字 /^[\u4E00-\u9FA5]{2,}$/g //身份證號驗證 /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/ //通用郵箱驗證 /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ //手機號驗證 /^[1]([3-9])[0-9]{9}$/

下面是效果圖

最后是給大家推薦一個正則判斷可視化的網站方便理解正則的選擇 正則可視化http://www.regexper.com/
比如我們上面郵箱的正則可以看到

---

如有錯誤，請指正！

總結

以上是生活随笔為你收集整理的JavaScript表单验证及注册界面的全部內容，希望文章能夠幫你解決所遇到的問題。

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