1、表單校驗步驟
（1）確定事件（submit事件），創建一個函數並和該事件綁定。
（2）書寫函數對輸入的數據是否合法進行校驗（需要設定ID並通過ID來獲取用戶輸入的數據的值）。
（3）輸入的信息合法，可以正常提交；不合法的話，不能提交用戶信息並給出提示信息。
2、校驗函數
（1）非空校驗：
通過ID獲取值，對是否為空進行校驗。
var uValue = document.getElementById("user").value; if(uValue==""){ alert("用戶名不能為空!"); return false; } var pValue = document.getElementById("password").value; if(pValue==""){ alert("密碼不能為空!"); return false; }
相應的表單中要設置ID屬性，以便通過ID獲取表單中的數據。
<tr>
<td>
用戶名
</td>
<td>
<input type="text" name="user" size="34px" id="user"/>
</td>
</tr>
<tr>
<td>
密碼
</td>
<td>
<input type="password" name="password" size="34px" id="password" />
</td>
</tr>
測試：
（2）確認密碼校驗：
var rpValue = document.getElementById("repassword").value; if(rpValue!=pValue){ alert("兩次密碼輸入不一致!"); return false; }
測試結果：
（3）郵箱格式校驗（正則表達式：https://www.cnblogs.com/zhai1997/p/11354683.html）：
var eValue = document.getElementById("email").value; if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){ alert("郵箱格式不正確!"); return false; }
測試結果：
3、完整代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注冊頁面</title>
<script>
function checkForm(){
var uValue = document.getElementById("user").value;
if(uValue==""){
alert("用戶名不能為空!");
return false;
}
var pValue = document.getElementById("password").value;
if(pValue==""){
alert("密碼不能為空!");
return false;
}
var rpValue = document.getElementById("repassword").value;
if(rpValue!=pValue){
alert("兩次密碼輸入不一致!");
return false;
}
var eValue = document.getElementById("email").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
alert("郵箱格式不正確!");
return false;
}
}
</script>
</head>
<body>
<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
<tr>
<td height="600px" ">
<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
<table border="1px" width="450px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr>
<td>
用戶名
</td>
<td>
<input type="text" name="user" size="34px" id="user"/>
</td>
</tr>
<tr>
<td>
密碼
</td>
<td>
<input type="password" name="password" size="34px" id="password" />
</td>
</tr>
<tr>
<td>
確認密碼
</td>
<td>
<input type="password" name="repassword" size="34px" id="repassword"></input>
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<input type="text" name="email" size="34px" id="email"/>
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<input type="text" name="username" size="34px" id="username"></input>
</td>
</tr>
<tr>
<td>
性別
</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>
出生日期
</td>
<td>
<input type="text" name="birthday" size="34px" id="birthday"></input>
</td>
</tr>
<tr>
<td colspan="2">
<center>
<input type="submit" value="注冊" />
</center>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
4、改進
以上方法只有在提交的時候才能發現數據的錯誤，對於用戶來說很不方便，以下的改進代碼可以增加頁面的用戶友好性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注冊頁面</title>
<script>
function showTips(id,info){
document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
}
function check(id,info){
var uValue = document.getElementById(id).value;
if(uValue==""){
document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
}else{
document.getElementById(id+"span").innerHTML="";
}
}
</script>
</head>
<body>
<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
<tr>
<td height="600px" ">
<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
<table border="1px" width="450px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr>
<td>
用戶名
</td>
<td>
<input type="text" name="user" size="34px" id="user"
onfocus="showTips('user','用戶名必填！')"
onblur="check('user','用戶名不能為空！')"/>
<span id="userspan"></span>
</td>
</tr>
<tr>
<td>
密碼
</td>
<td>
<input type="password" name="password" size="34px" id="password"
onfocus="showTips('password','密碼必填')"
onblur="check('password','密碼不能為空!')"/>
<span id="passwordspan"></span>
</td>
</tr>
<tr>
<td>
確認密碼
</td>
<td>
<input type="password" name="repassword" size="34px" id="repassword"></input>
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<input type="text" name="email" size="34px" id="email"/>
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<input type="text" name="username" size="34px" id="username"></input>
</td>
</tr>
<tr>
<td>
性別
</td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>
出生日期
</td>
<td>
<input type="text" name="birthday" size="34px" id="birthday"></input>
</td>
</tr>
<tr>
<td colspan="2">
<center>
<input type="submit" value="注冊" />
</center>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
可以看出在沒有填寫密碼的時候，頁面能夠立即給出提示信息。