一、原理
表單的校驗透過輸入框中加入onblur事件，輸入框失去焦點時調用js函數，js判斷輸入的值，操作文檔，透過innerHTML屬性把輸入框後面的提示顯示出來。
最後在form標籤中新增onsubmit事件，點擊註冊按鈕時呼叫js函數，僅當所有輸入框的value符合要求時，傳回true,，表單提交。否則回傳false表單不提交。
二、圖片
三、注意事項
js中建立正規表示式需要用"/^…$/” ，^表示從頭開始匹配，$表示匹配到最後一個字元。例如var reg=/^w [@]w [.comn]{3,4}$/;
正規表示式的w，表示a-z，A-Z，0-9還包括底線。
通常使用正規的test方法來判斷字串是否與正規匹配，如果傳回值為true，則匹配成功，傳回false，匹配失敗。
四、實作程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用JavaScript完成表单的校验</title>
<script>
//校验用户名
function checkName(){
var name=document.getElementById("name").value;
var nameSpan=document.getElementById("nameSpan")
//正则表达式判断用户名
var reg=/^\w+$/;
if(name.length<1){
nameSpan.innerHTML="<font size='1' color='red'>用户名不能为空</font>"
}else if(name.length<=6){
nameSpan.innerHTML="<font size='1' color='red'>用户名要至少六位</font>"
}else if(!reg.test(name)){
nameSpan.innerHTML="<font size='1' color='red'>只能由字母数字下划线组成</font>"
}else{
nameSpan.innerHTML="<font size='1' color='red'>符合要求</font>"
return true;
}
}
//校验密码
function checkCode(){
var code=document.getElementById("code").value;
var codeSpan=document.getElementById("codeSpan")
if(code==''){
codeSpan.innerHTML="<font size='1' color='red'>密码不能为空</font>"
}else if(code.length<6){
codeSpan.innerHTML="<font size='1' color='red'>密码至少六位</font>"
}else{
codeSpan.innerHTML="<font size='1' color='red'>符合要求</font>"
return true;
}
}
//校验邮箱
function checkEmail(){
var email=document.getElementById("email").value;
var emailSpan=document.getElementById("emailSpan")
//用正则判断邮箱格式
var reg=/^\w+[@]\w+[.comn]{3,4}$/;
if(email==''){
emailSpan.innerHTML="<font size='1' color='red'>邮箱不能为空</font>"
}else if(!reg.test(email)){
emailSpan.innerHTML="<font size='1' color='red'>邮箱格式不正确</font>"
}else{
emailSpan.innerHTML="<font size='1' color='red'>符合要求</font>"
return true;
}
}
//校验所有信息，决定表单是否提交
function checkForm(){
if(checkName()&&checkCode()&&checkEmail()){
return true;
}
return false;
}
</script>
</head>
<body>
<form id="regist" onsubmit="return checkForm()" action="http://www.baidu.com" method="get" style="margin-left: 520px;width: 400px;padding-left: 20px; height: 280px;border: 1px solid darkgray;">
<h3>注册表单</h3>
用户名：<input type="text" id="name" name="username" onblur="checkName()"/>
<span id="nameSpan" ></span><br/><br />
密码：<input type="password" id="code" name="password" onblur="checkCode()"/>
<span id="codeSpan"></span><br/><br />
邮箱：<input type="text" id="email" name="email" onblur="checkEmail()"/>
<span id="emailSpan"></span><br/><br />
<input type="submit" value="注册"/>
<input type="reset" value="重置"/>
</form>
</body>
</html>登入後複製
更多相關教學請造訪 JavaScript影片教學
