1.當輸入格式全部正確時,註冊成功
2.只要有一個格式錯誤,將不能提交表單
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function check(name,errorId,reg,info){
var oUserNode=document.getElementsByName(name)[0];
var strName=oUserNode.value;
var oSpanNode=document.getElementById(errorId);
//用正則表達式校驗
/* var reg=/^hncu/i; */
if(reg.test(strName)){
oSpanNode.innerHTML=(info+"格式正確").fontcolor("green").bold();
return true;
}else{
oSpanNode.innerHTML=(info+"用戶名格式錯誤").fontcolor("red").bold();
return false;
}
}
function checkUser(){
var reg=/^hncu/;
return check("user","userspan",reg,"用戶名");
}
function checkPwd(){
var reg=/\d{6}/;
return check("pwd","pwdspan",reg,"密碼");
}
function checkPwd2(){
var strPwd1=document.getElementsByName("pwd")[0].value;
var strPwd2=document.getElementsByName("pwd2")[0].value;
var pwdNode=document.getElementById("pwdspan2");
if(strPwd1==strPwd2){
pwdNode.innerHTML="兩次密碼輸入一致".fontcolor("green").bold();
return true;
}else{
pwdNode.innerHTML="兩次密碼輸入不一致".fontcolor("red").bold();
return false;
}
}
function checkMail(){
var reg=/\w+@\w+(\.\w+)+/;
return check("mail","mailspan",reg,"郵箱地址");
}
/*
訪問表單組件的兩種簡便方式:
1)使用表單組件的id去訪問
2)使用標籤名直接當該對象的數據進行訪問 document.forms[i]
*/
function mySubmit(){
if(checkUser() && checkPwd() && checkPwd2() && checkMail()){
regForm.submit();
//document.forms[0].innerHTML
alert("註冊成功");
}
}
</script>
</head>
<body οnmοusemοve="show_coords(event);">
<h1>用戶註冊</h1>
<form id="regForm" action="">
<table>
<tr> <td>用戶名稱:</td> <td><input type="text" name="user" οnblur="checkUser();" /></td> <td><span id="userspan"></span></td> </tr>
<tr> <td>用戶密碼:</td> <td><input type="password" name="pwd" οnblur="checkPwd();" /></td> <td><span id="pwdspan"></span></td> </tr>
<tr> <td>確認密碼:</td> <td><input type="password" name="pwd2" οnblur="checkPwd2();"/></td> <td><span id="pwdspan2"></span></td> </tr>
<tr> <td>郵箱地址:</td> <td><input type="text" name="mail" οnblur="checkMail();" /></td> <td><span id="mailspan"></span></td> </tr>
<tr> <td colspan="3"><input type="button" value="註冊" οnclick="mySubmit();"></td> </tr>
</table>
</form>
</body>
</html>