求份完整的JS注册表单验证

发布网友发布时间：2022-04-26 18:19

共1个回答

热心网友时间：2022-04-22 15:17

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
form.input,div{margin:0; padding:0;}
body{font-size:12px; margin:0; padding:0;}
#login{width:1151; height:624px;}
.parent{width:100%; height:27px; line-height:27px;}
.parent label{display:inline-block;width:333px; height:27px;line-height:27px; text-align:right;}
.bor{padding-left:333px; color:#999;}
.three{width:308px; height:25px; border:1px solid #999;}
#email{width:196px; height:25px; border:1px solid #999;}
.wrong{background:url(images/wrong.png) no-repeat; padding-left:25px; color:#F00; display:inline-block; height:25px; line-height:25px;}
.right{background:url(images/right.png) no-repeat; padding-left:25px; color:#00F; display:inline-block; height:25px;line-height:25px;}
</style>
<title>注册界面</title>
</head>

<body>
<div id="login">
<form action="form" method="get" name="login" style="margin-top:24px">
<div class="parent"><label>邮箱地址：</label><input type="text" id="email" /> @
<select style="width:86px; height:20px;">
<option value="163.com">163.com</option>
<option value="126.com">126.com</option>
<option value="yeah.net">yeah.net</option>
</select>
</div>
<div class="bor">6-18个字符，区分大小写</div>
<div class="parent"><label>密码：</label><input type="password" id="pwd" class="three" /></div>
<div class="bor">6-16个字符，区分大小写</div>
<div class="parent"><label>确认密码：</label><input type="password" id="dpwd" class="three" /></div>
<div class="bor">请再次输入密码</div>
<div class="parent"><label>手机号码：</label><input type="text" id="phoneNum" class="three" /></div>
<div class="bor">密码遗忘或被盗时，可通过手机短信取回密码</div>
<div class="parent"><label>验证码：</label><input type="text"/></div>
<input type="button" id="dad" value="注册" style="position:relative;left:333px;" />
</form>
</div>
<script type="text/javascript">
for(i=0;i<4;i++){
document.getElementsByTagName("input")[i].onfocus=function(){
}
document.getElementsByTagName("input")[i].onblur=function(){
var spanLength=this.parentNode.getElementsByTagName("span").length;
if(spanLength>0){
this.parentNode.removeChild(this.nextSibling)
}
var id=this.getAttribute("id");
if(id=="email"){
emailReg=/^\w{6,18}$/
if(!emailReg.test(this.value)){
span=document.createElement("span")
spanTxt=document.createTextNode("您输入的格式有错误")
span.className="wrong"
span.appendChild(spanTxt)
this.parentNode.appendChild(span)
}else{
span=document.createElement("span")
spanTxt=document.createTextNode("恭喜您输入正确")
span.className="right"
span.appendChild(spanTxt)
this.parentNode.appendChild(span)
}
}
if(id=="pwd"){
pwdReg=/^\w{6,16}$/
if(!pwdReg.test(this.value)){
span=document.createElement("span")
spanTxt=document.createTextNode("您输入的格式有错误")
span.className="wrong"
span.appendChild(spanTxt)
this.parentNode.appendChild(span)
}else{
span=document.createElement("span")
spanTxt=document.createTextNode("恭喜您输入正确")
span.className="right"
span.appendChild(spanTxt)
this.parentNode.appendChild(span)
}
}
if(id=="dpwd"){
if(this.value!=document.getElementById("pwd").value||this.length<=0){
span=document.createElement("span")
spanTxt=document.createTextNode("您输入的格式有错误")
span.className="wrong"
span.appendChild(spanTxt)
this.parentNode.appendChild(span)
}else{
span=document.createElement("span")
spanTxt=document.createTextNode("恭喜您输入正确")
span.className="right"
span.appendChild(spanTxt)
this.parentNode.appendChild(span)
}
}
if(id=="phoneNum"){
phoneReg=/^1[3|4|5|8]\d{9}$/
if(!phoneReg.test(this.value)){
span=document.createElement("span")
spanTxt=document.createTextNode("您输入的格式有错误")
span.className="wrong"
span.appendChild(spanTxt)
this.parentNode.appendChild(span)
}else{
span=document.createElement("span")
spanTxt=document.createTextNode("恭喜您输入正确")
span.className="right"
span.appendChild(spanTxt)
this.parentNode.appendChild(span)
}
}
}
document.login.getElementsByTagName("input")[i].onkeyup=function(){
this.blur();
this.focus();
}
}
document.getElementById("dad").onmousedown=function(){//onmousedown按下鼠标键
for(i=0;i<4;i++){
document.login.getElementsByTagName("input")[i].focus();//对所有的文本框进行验证
document.login.getElementsByTagName("input")[i].blur();//取消聚集
}
}
document.getElementById("dad").onmouseup=function(){//onmouseup弹起鼠标键
var errorNum=0;//
for(i=0;i<document.login.getElementsByTagName("span").length;i++){
if(document.login.getElementsByTagName("span")[i].className=="wrong"){
errorNum++;//加一次
}
}
if(errorNum==0){
document.login.submit()
}else{
alert("填写错误，请重新输入正确的内容。")
}
}
</script>
</body>
</html>
自己写着玩的
最好自己再修改下，看不懂我就没办法了。