問題:一個註冊界面,包括用戶名、密碼、確認密碼、郵箱,對其進行表單驗證,要求:
各項都不能爲空,
用戶名由字母數字下劃線組成,不能使用數字開頭,
密碼長度必須大於6位,但不能超過15位,
密碼和確認密碼內容需要相同,
郵箱必須符合郵箱的規則
<html>
<body>
<form>
<div>
用戶名:<input type="text" name="username" id="username" />
</div>
<div>
密碼:<input type="password" name="password" id="password" onClick="ckpassword()"/>
</div>
<div>
確認密碼:<input type="password" name="secondpwd" id="secondpwd" onClick="cksecondpwd()"/>
</div>
<div>
郵箱:<input type="text" name="email" id="email" onClick="ckemail()"/>
</div>
<div>
<input type="button" value="提交" onClick="mysubmit()"/>
</div>
</form>
</body>
<script type="text/javascript">
function ckpassword(){
var username=document.getElementById("username").value;
if(username==""){
alert("用戶名不能爲空!");
return false;
}else{
var reg=/\d/;
var reg2=/[a-zA-Z0-9_]/;
if(reg.test(username.substring(0))){
alert("用戶名不能以數字開頭!");
return false;
}else{
if(!reg2.test(username)){
alert("用戶名應該由字母數字下劃線組成");
return false;
}
}
}
};
function cksecondpwd(){
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
if(username==""){
alert("用戶名不能爲空!");
return false;
}else if(password==""){
alert("密碼不能爲空!");
return false;
}else{
if(!(password.length>6)){
alert("密碼長度必須大於6位!");
false;
}else if(!(password.length<=15)){
alert("密碼長度不能超過15位!");
false;
}
}
};
function ckemail(){
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
var secondpwd=document.getElementById("secondpwd").value;
if(username==""){
alert("用戶名不能爲空!");
return false;
}else if(password==""){
alert("密碼不能爲空!");
return false;
}else if(secondpwd==""){
alert("確認密碼不能爲空!");
return false;
}else{
if(!(password==secondpwd)){
alert("密碼和確認密碼內容需要相同!");
return false;
}
}
};
function mysubmit(){
var username=document.getElementById("username").value;
var password=document.getElementById("password").value;
var secondpwd=document.getElementById("secondpwd").value;
var email=document.getElementById("email").value;
if(username==""){
alert("用戶名不能爲空!");
return false;
}else if(password==""){
alert("密碼不能爲空!");
return false;
}else if(secondpwd==""){
alert("確認密碼不能爲空!");
return false;
}else if(email==""){
alert("郵箱不能爲空!");
return false;
}else{
var reg=new RegExp(/([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/);
if(!reg.test(email)){
alert("郵箱必須符合郵箱的規則!");
return false;
}
alert("提交成功");
}
}
</script>
</html>