Javascript實現表單檢驗
正如我們所見到的，好多網頁都有註冊界面，在註冊界面中，最常見的即是包括用戶名、密碼、請重復輸入密碼和一個“註冊”按鈕，今天我們就舉例實現一下該界面。
要求：
1.用戶名不為空，且用戶名不能超過12個字符；
2.密碼不為空，且密碼不能超過15個字符；
3.密碼和重復輸入的密碼必須一致；
4.如果發生錯誤，顯示錯誤並聚焦到錯誤位置；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>註冊</title>
<script>
function $(id){
return document.getElementById(id);
}
function test(){
var user_name = $("user_name").value;
var password = $("password").value;
var re_password = $("re_password").value;
if(user_name.length==0){
$("msg").innerHTML = "用戶名不能為空！";
$("user_name").focus();
return false;
}
if(user_name.length>12){
$("msg").innerHTML = "用戶名不能超過12個字符！";
$("user_name").focus();
return false;
}
if(password.length==0){
$("msg").innerHTML = "密碼不能為空！";
$("password").focus();
return false;
}
if(password.length>15){
$("msg").innerHTML = "密碼不能超過15個字符！";
$("password").focus();
return false;
}
if(password!=re_password ){
$("msg").innerHTML="錯誤！密碼不一致！";
$("re_password").focus();
return false;
}
console.log("註冊成功！");
return true;
}
</script>
</head>
<body>
<br />
<span id="msg" style="color: red;"></span>
<form onsubmit="return test()">
<input placeholder="請輸入用戶名" id="user_name" /><br />
<input placeholder="請輸入密碼" type="password" id="password"/><br />
<input placeholder="請再次輸入密碼" type="password" id="re_password"/><br />
<input type="submit" value="註冊" />
</form>
</body>
</html>
註：方法不唯一，此方法僅作參考。
下面對該代碼中的一些點進行講解：
1. （id）的作用類似於C語言中的define,將所使用的功能或語句定義為一個符號或字符串，極大程度的簡化代碼，你也可以不使用該方法，用document.getElementById()還原（id）的作用類似於C語言中的define,將所使用的功能或語句定義為一個符號或字符串，極大程度的簡化代碼，你也可以不使用該方法，用document.getElementById()還原()；
2. 定義的對象必須加.value使其為獲取的輸入的值，而下面聚焦時，需要改用focus；
3. 在每個if語句中，最好再加一個返回值，提高代碼的運行效果，innerHTML的作用是在瀏覽器頁面中顯示；
4. 在整個函數test()的最後，若return false，則為取消提交，若return true，則為正常提交；
大傢可以自己嘗試一下，部分頁面如下：
直接運行代碼如圖：
不輸入任何值，直接點擊註冊，效果如圖：
全部按要求輸入後，會返回最初的樣子，是因為沒有指定成功輸入後跳轉的界面，自己設置即可。
以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。