原生JS寫表單驗證提交功能
阿新 • • 發佈：2018-12-20
先上效果圖：
表單的基礎內容就是暱稱判斷、手機號判斷、郵箱判斷、身份證號碼判斷，這裡是用到正則驗證檢驗格式。 頁面的表單寫法就是一個form的提交。輸入框用input來實現，輸入內容用value來獲取。每個輸入框用唯一的ID名字來標記：
<body> <div class="content"> <div class="title">使用者註冊</div> <form onsubmit="return false"> <div><label><span>*</span>暱稱：</label><input onfocus="clearErr()" id="name" type="text" placeholder="只能包含中文、英文、數字和下劃線"></div> <div><label><span>*</span>手機：</label><input onfocus="clearErr()" id="phone" type="text" placeholder=""></div> <div><label>郵箱：</label><input onfocus="clearErr()" id="email" type="text"></div> <div><label>身份證號：</label><input onfocus="clearErr()" id="cardCode" type="text"></div> <div><label>畢業學校：</label><input onfocus="clearErr()" id="school" type="text"></div> <div><button id="registerBtn" type="submit">註冊</button></div> <div id="errContent"></div> </form> </div> </body>
通過JS來實現輸入驗證，和正則驗證：
<script> window.onload = function(){ var oRegisterBtn = document.getElementById('registerBtn'); var oName = document.getElementById('name'); var oPhone = document.getElementById('phone'); var oEmail = document.getElementById('email'); var oCardCode = document.getElementById('cardCode'); var oschool = document.getElementById('school'); var oErrContent = document.getElementById('errContent'); oRegisterBtn.onclick = function(){ var doRegister = true; var errStr = ""; if(!oName.value){ errStr += "使用者名稱不能為空</br>"; doRegister = false; }else if(/[^\u4e00-\u9fa5\w]/.test(oName.value)){ errStr += "使用者名稱格式不對" +"</br>"; doRegister = false; } if(!oPhone.value){ errStr += "手機號不能為空</br>"; doRegister = false; }else if(!/^1[3|4|5|8][0-9]\d{4,8}$/.test(oPhone.value)){ errStr += "手機號格式不對</br>"; doRegister = false; } if(oEmail.value && !/^\[email protected][a-z0-9]+(\.[a-z]+){1,3}$/.test(oEmail.value)){ errStr += "郵箱格式不對</br>"; doRegister = false; } if(oCardCode.value && !/[1-9]\d{14}|[1-9]\d{17}|[1-9]\d{16}x/.test(oCardCode.value)){ errStr += "身份證號式不對</br>"; doRegister = false; } if(doRegister){ //此處寫相應的ajax提交 alert("您的資料已提交..."); }else{ oErrContent.innerHTML = errStr; } } } function clearErr(){ document.getElementById('errContent').innerHTML = ""; } </script>
樣式內容也簡單貼上吧：
<style>
*{
margin:0;
padding:0;
}
.content{
width:800px;
margin:50px auto;
}
.title{
font-size:18px;
font-weight:bold;
padding-left:340px;
margin-bottom:30px;
}
input{
border:1px solid #a9a9a9;
height:34px;
line-height:34px;
width:550px;
margin-bottom:20px;
padding-left:5px;
}
label{
width:120px;
text-align:right;
display:inline-block;
}
#registerBtn{
background:#3498db;
color:#fff;
font-size:14px;
text-align:center;
width:100px;
line-height:34px;
border:none 0;
cursor:pointer;
margin:20px 20px 0 0;
margin-left:120px;
}
label span{
color:red;
}
#errContent{
padding:20px 0 0 30px;
text-align:center;
}
</style>
表單驗證用到的地方多，也有很多人寫過，所以我這裡只是用更簡潔的方法來實現。同理可以推陳出新很多內容