【內容:javascript案例-註冊表單校驗】
前面我們已經學過了正則，以下我們在對錶單數據進行驗證時，就會使用到正則表達式，並且會使用上面提到過的dom來顯示一些錯誤信息。
需求:
1. 驗證郵箱符合規則，並且不能爲空
2. 驗證會員名密碼不能爲空，並且保證長度至少6位
3. 重複密碼要與密碼一致.
分析:
1. 驗證非空 /^\s*$/
2. 驗證郵箱符合規則，正則表達式是: /^(\w)+@(\w)+(\.\w+)+$/
3. 驗證會員名與密碼長度至少6位 /^ (\w){6,}$/
4. 驗證重複密碼與密碼一致，我們不需要使用正則，直接比較就可以。
5. 對於上述操作，我們在使用時，可以使用javascript中提供的test方法完成。
6. 爲了保證數據不正確情況下，表單不能提交，我們需要使用onsubmit，如果綁定的函數返回的是false,表單就不能被提交
實現:
<script type="text/javascript">
function checkForm(){
//1.獲取數據
varemail=document.getElementById("email");
varusername=document.getElementById("username");
varpassword=document.getElementById("password");
varrepassword=document.getElementById("repassword");
//2..驗證非空
if(checkNull(email.value)){
//如果返回true,代表email爲空
document.getElementById("email_msg").innerHTML="<fontcolor='red'>郵箱不能爲空</font>";
returnfalse;
}
if(checkNull(username.value)){
//如果返回true,代表email爲空
document.getElementById("username_msg").innerHTML="<fontcolor='red'>會員名不能爲空</font>";
returnfalse;
}
if(checkNull(password.value)){
//如果返回true,代表email爲空
document.getElementById("password_msg").innerHTML="<fontcolor='red'>密碼不能爲空</font>";
return false;
}
if(checkNull(repassword.value)){
//如果返回true,代表email爲空
document.getElementById("repassword_msg").innerHTML="<fontcolor='red'>重複密碼不能爲空</font>";
returnfalse;
}
//3.驗證郵箱符合規則
if(!checkEmail(email.value)){
//如果返回true,代表符合規則
document.getElementById("email_msg").innerHTML="<fontcolor='red'>請輸入有效的郵箱地址</font>";
returnfalse;
}
//4.驗證會員名或密碼長度大於6位
if(!checkLength(username.value)){
document.getElementById("username_msg").innerHTML="<fontcolor='red'>會員名長度必須大於6位</font>";
returnfalse;
}
if(!checkLength(password.value)){
document.getElementById("password_msg").innerHTML="<fontcolor='red'>會員名長度必須大於6位</font>";
returnfalse;
}
//5.驗證兩次輸入密碼一致
if(password.value!=repassword.value){
document.getElementById("repassword_msg").innerHTML="<fontcolor='red'>兩次密碼輸入不一致</font>";
returnfalse;
}
returntrue;
}
//驗證長度
functioncheckLength(data){
varreg=/^\w{6,}$/;
returnreg.test(data);
}
//驗證郵箱
functioncheckEmail(data){
varreg=/^(\w)+@(\w)+(\.\w+)+$/;
returnreg.test(data);
}
//驗證非空
functioncheckNull(data){
varreg=/^\s*$/; //0個或多個空字符串
return(reg.test(data))//如果data符合規則，返回true，否則返回false
}
</script>