用正則表達式實現表單驗證提交
發表時間：2020-10-17
發布人：葵宇科技
浏覽次數：40
用正則表達式實現表單驗證提交
前端基礎，正好做個(gè)練手，記錄一下(xià)
用到了HTML5的标簽和(hé)JS的基本邏輯還有正則表達式
這麼屑的代碼還有人看？（滑稽）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.onload=function(){
//用戶名驗證模塊
document.getElementById("username").onblur=function(){//用戶名表單驗證，失焦時觸發
//用戶名不能為空
var username=document.getElementById("username")//拿到用戶名文(wén)檔對象
var usernameError=document.getElementById("usernameError")//拿到文(wén)檔報錯對象
if(username.value==""){
usernameError.innerHTML="<font color='red' size='2'>注冊名不能為空!</font>"
}
//用戶名必須在6-14位之間
//用戶登錄正則表達格式
var regExpUesrname=/^[a-zA-Z]\w{5,13}$/
//regExpOK正則true/false接收用
var regExpOK=regExpUesrname.test(username.value)
if(!regExpOK){
if(username.value.length<6){
usernameError.innerHTML="<font color='red' size='2'>注冊名不能小于6位!</font>"
}
if(username.value.length>14){
usernameError.innerHTML="<font color='red' size='2'>注冊名不能大于14位!</font>"
}
document.getElementById("username").onfocus=function(){
username.value=""
//清空報錯span标簽
usernameError.innerText=""
}
}
}
//郵箱驗證模塊
//郵箱失焦事件
document.getElementById("email").onblur=function(){
//拿到郵箱對象
var email=document.getElementById("email")
//拿到郵箱報錯對象
var emailError=document.getElementById("emailError")
//拿到郵箱正則表達對象
var emailregExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
//拿到正則判斷對象
var emailregExpOK=emailregExp.test(email.value)
//郵箱格式判斷
if (!emailregExpOK){
//郵箱格式報錯
emailError.innerHTML="<font color='red' size='2'>郵箱格式錯誤！</font>"
//聚焦清空模塊
document.getElementById("email").onfocus=function(){
email.value=""
//清空報錯span标簽
emailError.innerText=""
}
}
}
//重複密碼驗證單元
//重複密碼失焦事件
document.getElementById("passwordAgain").onblur=function(){
//拿到密碼對象和(hé)密碼重複對象
var password=document.getElementById("password")
var passwordagain=document.getElementById("passwordAgain")
//重複密碼密碼報錯對象
var passwordgaginError=document.getElementById("passwordAgainError")
//密碼不重複事件
if (password.value!=passwordagain.value){
//密碼報錯
passwordgaginError.innerHTML="<font color='red' size='2'>确認密碼與重複密碼不一緻！</font>"
//聚焦清空模塊
document.getElementById("passwordAgain").onfocus=function(){
passwordagain.value=""
//清空報錯span标簽
passwordgaginError.innerText=""
}
}
}
}
</script>
<!--表單提交，form和(hé)action-->
<form action="http://localhost:8080/user" method="post">
<table>
<tr>
<th>用戶名:</th>
<th><input type="text" id="username" name="username"/></th>
<th><span id="usernameError"></span></th>
</tr>
<tr>
<th>郵 箱：</th>
<th><input type="text" id="email" name="email"/></th>
<th><span id="emailError"></span></th>
</tr>
<tr>
<th>密 碼:</th>
<th><input type="text" id="password" /></th>
<th><span id="passwordError"></span></th>
</tr>
<tr>
<th>确認密碼:</th>
<th> <input type="text" id="passwordAgain" name="passwordAgain"/></th>
<th> <span id="passwordAgainError"></span></th>
</tr>
<tr>
<th></th>
<th><input action="http://www.localhost:8086.com" type="submit" id="btn" value="提 交" method="post"/></th>
<th></th>
</tr>
</table>
</form>
</body>
</html>
