表單驗證時常用正則表示式（以“註冊資訊”為例）
阿新 • • 發佈：2018-12-31
個人在使用時看到網上總結的有很多了，但大多文章表述的都比較抽象，使用時需要自己組合，通常因為懶所以實際在用時習慣直接拿來用，總結的是本人寫程式的過程中用的頻率比較高的幾個例項：
另：這裡有一個博主總結的很不錯，連結貼上
/*驗證是否同意協議*/
function checkAgree() {
<span style="white-space:pre"> </span>document.MyForm.subm.disabled = !document.MyForm.isAgree.checked;
}/* 驗證使用者名稱 */ function checkUsername() { var reg = /^\D\w{4,9}$/ig;/* 不能以數字開頭，長度在5-10位 */ var id = "uname"; return commonInfo(reg, id); }
/* 驗證密碼 */
function checkPassword() {
var reg = /^\d{6}$/ig;/* 必須是數字，位數為6位 */
var id = "upwd";
return commonInfo(reg, id);
}/* 驗證真實姓名 */
function checkTruename() {
var reg = /^[\u4e00-\u9fa5]{2,4}$/ig;/* 必須是2-4位的漢字 */
var id = "tname";
return commonInfo(reg, id);
}/*驗證出生日期*/ function checkBirth(){ var reg=/^(19\d{2})|((200\d)-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1]))|((201[0-6])-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1]))$/ig; var id="birthday"; return commonInfo(reg, id); }
/*驗證身份證*/
function checkBirth(){
var reg=/^[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)$/;
var id="birthday";
return commonInfo(reg, id);
}/* 驗證電子郵箱 */ function checkEmail() { <span style="white-space:pre"> </span>/* 字母數字下劃線[a0_] + （0-N個".a0_"） + @ + a0_ + （1-2組由2-3個a0_組成的字元，如com.cn或com） */ <span style="white-space:pre"> </span>var reg = /^(\w)+(\.\w)*@(\w)+(\.\w{2,3}){1,2}$/ig; var id = "email"; return commonInfo(reg, id); }
</pre><pre>/* 驗證手機號 */
function checkPhone() {
var reg = /^1[35789]\d{9}$/ig;/* 這個比較簡單，不說了 */
var id = "phone";
return commonInfo(reg, id);
}/* 提取公共的文字類表單項驗證 */
function commonInfo(reg, id) {
var inputText = document.getElementById(id);
var inputValue = inputText.value;
var inputAlt = inputText.alt;
var inputSpan = document.getElementById(id + "Span");
if (inputValue == null || inputValue.length == 0) {
inputSpan.innerHTML = inputAlt + "不能為空！";
inputSpan.style.color = "red";
inputSpan.style.background="none";
return false;
} else {
if (!reg.test(inputValue)) {
inputSpan.innerHTML = inputAlt + "格式有誤！";
inputSpan.style.color = "red";
inputSpan.style.background="none";
return false;
} else {
inputSpan.innerHTML = "√";
inputSpan.style.color = "white";
inputSpan.style.background="rgb(50,200,100)";
inputSpan.style.padding="2px 4px";
inputSpan.style.borderRadius="15px";
return true;
}
}
}其中還有check驗證碼，獲取驗證碼，提交按鈕是否可用的判斷，兩次密碼輸入一致的判斷，跟在後面，但是跟主題無關了，可以跳過；
附：其餘表單功能補充：
/* 獲得驗證碼 */
function getCode() {
var code = parseInt(Math.random() * 9000 + 1000);
var span = document.getElementById("getCode");
span.innerHTML = code;
span.style.fontSize = "18px";
span.style.padding = "3px 6px";
span.style.color = "red";
span.style.textDecoration= "line-through";
span.style.cursor = "pointer";
span.style.border = "1px #000 solid";
}
/* 校驗驗證碼 */
function checkCode() {
var code = document.getElementById("getCode").innerHTML;
var inputCode = document.getElementById("checkcode").value;
var inputSpan = document.getElementById("codeSpan");
if (inputCode == null || inputCode.length == 0) {
inputSpan.innerHTML = "驗證碼不能為空！";
inputSpan.style.color = "red";
return false;
} else {
if (inputCode != code) {
inputSpan.innerHTML = "驗證碼輸入錯誤！";
inputSpan.style.color = "red";
return false;
} else {
inputSpan.innerHTML = "OK！";
inputSpan.style.color = "green";
return true;
}
}
}
/* 驗證愛好的選擇 */
function checkHobby() {
var choice = document.getElementsByName("hobby");/* 注意這裡只能通過name值獲得，因為id是為唯一的 */
var Hspan = document.getElementById("hobbySpan");
var count = 0;
for (var i = 0; i < choice.length; i++) {
if (choice[i].checked) {
count++;
}
}
if (count >= 2) {
Hspan.innerHTML = "OK！";
Hspan.style.color = "green";
return true;
} else {
Hspan.innerHTML = "至少選擇兩項！";
Hspan.style.color = "red";
return false;
}
}
/* 驗證兩次密碼是否一致 */
function checkSame() {
var reg = /^\d{6}$/ig;/* 必須是數字，位數為6位 */
var inputText = document.getElementById("confirmPassword");
var inputValue = inputText.value;
var inputAlt = inputText.alt;
var inputSpan = document.getElementById("confirmPasswordSpan");
var first = document.getElementById("eu_password").value;
if (inputValue == null || inputValue.length == 0) {
inputSpan.innerHTML = inputAlt + "不能為空！";
inputSpan.style.color = "red";
return false;
} else {
if (!reg.test(inputValue)) {
inputSpan.innerHTML = inputAlt + "格式有誤！";
inputSpan.style.color = "red";
inputSpan.style.background="none";
return false;
} else {
if (first == inputValue) {
inputSpan.innerHTML = "√";
inputSpan.style.color = "white";
inputSpan.style.background="rgb(50,200,100)";
inputSpan.style.padding="2px 4px";
inputSpan.style.borderRadius="15px";
return true;
} else {
inputSpan.innerHTML = "兩次密碼輸入不一致";
inputSpan.style.color = "red";
inputSpan.style.background="none";
return false;
}
}
}
}
/* 驗證是否可以提交 */
function checkSubmit() {
return checkCode() && checkUsername() && checkedPassword() && checkSame()
&& checkedTruename() && checkHobby() && checkedEmail()
&& checkedPhone();
}以下為html程式碼：
<body onload="getCode();">
<form action="javascript:alert('提交成功！')" method="get" name="MyForm" onsubmit="return checkSubmit();">
用 戶 名：
<input type="text" name="uname" id="uname" alt="使用者名稱" onblur="checkUsername();"/>
<span id="unameSpan"></span><br />
輸入密碼：
<input type="password" name="upwd" id="upwd" alt="密碼" onblur="checkPassword();"/>
<span id="upwdSpan"></span><br />
確認密碼：
<input type="password" name="qrpwd" id="qrpwd" alt="密碼" onblur="checkSame();"/>
<span id="qrpwdSpan"></span><br />
真實姓名：
<input type="text" name="tname" id="tname" alt="真實姓名" onblur="checkTruename();"/>
<span id="tnameSpan"></span><br />
電子郵箱：
<input type="text" name="email" id="email" alt="電子郵箱" onblur="checkEmail();"/>
<span id="emailSpan"></span><br />
手機號碼：
<input type="text" name="phone" id="phone" alt="手機號" onblur="checkPhone();"/>
<span id="phoneSpan"></span><br />
愛好：<br />
<input type="checkbox" name="hobby" onclick="checkHobby();"/>音樂
<input type="checkbox" name="hobby" onclick="checkHobby();"/>電影
<input type="checkbox" name="hobby" onclick="checkHobby();"/>籃球<br />
<input type="checkbox" name="hobby" onclick="checkHobby();"/>美術
<input type="checkbox" name="hobby" onclick="checkHobby();"/>唱歌
<input type="checkbox" name="hobby" onclick="checkHobby();"/>跳舞
<span id="hobbySpan"></span><br />
驗證碼：
<input type="text" name="checkcode" id="checkcode" alt="驗證碼" size="4" onblur="checkCode();"/>
<span id="getCode" title="點選更換驗證碼" onclick="getCode();"></span>
<span id="codeSpan"></span><br />
<input type="checkbox" name="isAgree" id="isAgree" onclick="checkAgree();"/>是否同意協議<br />
<input type="submit" name="subm" id="subm" value="提交" disabled="disabled"/>
</form>
</body>