前端基礎，正好做個練手，記錄一下
用到了HTML5的標籤和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")//拿到使用者名稱檔案物件
var usernameError=document.getElementById("usernameError")//拿到檔案報錯物件
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(){
//拿到密碼物件和密碼重複物件
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和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>