1、關於JavaScript表單驗證，如果使用雙向綁定的前端js框架，會更容易的多。但是博主還是建議大家不要脫離源生js本身。因為源生js才是王道。
注意：
a、代碼中的錯誤提示可能會沒有，在代碼中找到 “錯誤.jpg” 圖片，自己制作一個
b、驗證的判斷已經完成，只需要根據自己的驗證規則進行表單驗證，更換自己的正則表達式。
c、博主將錯誤提示圖片插入本文檔中。需要更名為 “錯誤.jpg”,放到與html根目錄下方可使用。
（錯誤提示圖片）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1">
<form action="正則驗證手機號.html" name="form1" method="post" onsubmit="return test()">
<tr>
<td align="right">用戶名：</td>
<td><input type="text" name="username"></td>
<td><span id="namemsg">*</span></td>
</tr>
<tr>
<td align="right">密碼：</td>
<td><input type="password" name="pwd"></td>
<td><span id="pwdmsg">*</span></td>
</tr>
<tr>
<td align="right">確認密碼：</td>
<td><input type="password" name="pwd1"></td>
<td><span id="pwd1msg">*</span></td>
</tr>
<tr>
<td align="right">手機號：</td>
<td><input type="text" name="phone"></td>
<td><span id="iphone1">*</span></td>
</tr>
<tr>
<td align="right">座機號：</td>
<td><input type="text" name="phone1"></td>
<td><span id="iphone2">*</span></td>
</tr>
<tr>
<td align="right">身份證號：</td>
<td><input type="text" name="sfzid"></td>
<td><span id="sfzmsg">*</span></td>
</tr>
<tr>
<td colspan="3">
<input type="submit" name="sub" value="注冊">
<input type="reset" name="ret" value="重置" onclick="test1()">
</td>
</tr>
</form>
</table>
<script type="text/javascript">
//用戶名驗證
document.form1.username.onkeyup=function(){
var reg=/^[a-zA-Z]{1}[A-Z|a-z|0-9]{5,29}/;
if(reg.test(this.value)&&this.value.length>=6&&this.value.length<=30){
document.getElementById("namemsg").innerHTML="輸入正確";
}else{
document.getElementById("namemsg").innerHTML="<img src='錯誤.jpg' width='15' height='15'>";
}
}
//密碼驗證
document.form1.pwd.onkeyup=function(){
var reg1=/[A-Za-z]+[0-9]+/;
if(reg1.test(this.value)&&this.value.length>=6&&this.value.length<=8){
document.getElementById("pwdmsg").innerHTML="輸入正確";
}else{
document.getElementById("pwdmsg").innerHTML="<img src='錯誤.jpg' width='15' height='15'>";
}
}
//確認密碼
document.form1.pwd1.onkeyup=function(){
if(this.value==document.form1.pwd.value&&this.value!=""){
document.getElementById("pwd1msg").innerHTML="輸入正確";
}else{
document.getElementById("pwd1msg").innerHTML="<img src='錯誤.jpg' width='15' height='15'>";
}
}
//手機號驗證
document.form1.phone.onkeyup=function(){
var reg2=/^(13|14|15|17|18)[0-9]{9}/;
if(reg2.test(this.value)&&this.value.length==11){
document.getElementById("iphone1").innerHTML="輸入正確";
}else{
document.getElementById("iphone1").innerHTML="<img src='錯誤.jpg' width='15' height='15'>";
}
}
//座機號驗證
document.form1.phone1.onkeyup=function(){
var reg3=/^[0-9]{3,4}(\-{1})[0-9]{7,8}/;
if(reg3.test(this.value)&&this.value.length==13||this.value.length==12){
document.getElementById("iphone2").innerHTML="輸入正確";
}else{
document.getElementById("iphone2").innerHTML="<img src='錯誤.jpg' width='15' height='15'>";
}
}
//身份證號驗證
document.form1.sfzid.onkeyup=function(){
var reg4=/^\d{17}[(0-9)|X|x ]{1}/;
if(reg4.test(this.value)&&this.value.length==18){
document.getElementById("sfzmsg").innerHTML="輸入正確";
}else{
document.getElementById("sfzmsg").innerHTML="<img src='錯誤.jpg' width='15' height='15'>";
}
}
//注冊按鈕方法
function test(){
var str="輸入正確"
if(document.getElementById("namemsg").innerHTML!==str){
document.getElementById("namemsg").innerHTML="<img src='錯誤.jpg' width='15' height='15'>";
document.form1.username.focus();
document.form1.username.value="";
return false;
}
if(document.getElementById("pwdmsg").innerHTML!==str){
document.getElementById("pwdmsg").innerHTML="<img src='錯誤.jpg' width='15' height='15'>";
document.form1.pwd.focus();
document.form1.pwd.value="";
return false;
}
if(document.getElementById("pwd1msg").innerHTML!==str){
document.getElementById("pwd1msg").innerHTML="<img src='錯誤.jpg' width='15' height='15'>";
document.form1.pwd1.focus();
document.form1.pwd1.value="";
return false;
}
if(document.getElementById("iphone1").innerHTML!==str){
document.getElementById("iphone1").innerHTML="<img src='錯誤.jpg' width='15' height='15'>";
document.form1.phone.focus();
document.form1.phone.value="";
return false;
}
if(document.getElementById("iphone2").innerHTML!==str){
document.getElementById("iphone2").innerHTML="<img src='錯誤.jpg' width='15' height='15'>";
document.form1.phone1.focus();
document.form1.phone.value="";
return false;
}
}
</script>
</body>
</html>