本文通过实例讲解JavaScript如何进行表单验证，包括用户名、密码、确认密码和邮箱的合法性检查，利用函数`check`进行焦点变化时的验证，并提供错误提示。在`reg.html`中设置样式和事件，`check.js`中定义验证逻辑，确保表单数据输入符合规范。
本节主要讲解JavaScript表单验证实例
reg.html
<head>
<style>
.stats1{
color:#aaa;
}
.stats2{
color:#000;
}
.stats3{
color:red;
}
.stats4{
color:green;
}
</style>
<script src="check.js"></script>
</head>
<body>
<form action="reg.php" method="post" οnsubmit="regs()">
username:<input type="text" name="username" value="">
<span class="stats1">请输入用户名</span><br>
password:<input type="password" name="password" value=""><br>
<span class="stats1">请输入用户密码</span><br>
repass:<input type="password" name="repass" value=""><br>
<span class="stats1">请输入用户确认密码</span><br>
email:<input type="text" name="email" value=""><br>
<span class="stats1">请输入邮箱</span><br>
other:<input type="text" name="other" value=""><br>
<span class="stats1">请输入其他</span><br>
submit:<input type="submit" name="sub" value="submit"><br>
</form>
</body>
check.js
//获取下一个span，可以通过这个对象给状态
function gspan(cobj){
while(true){
if(cobj.nextSibling.nodeName!="SPAN")
cobj=cobj.nextSibling;
else
return cobj.nextSibling;
}
}
//通用的检查方法，第一个参数obj是用来检查的对象
第二个参数info 是用来检查的提示信息
第三个参数 fun 是一个回调函数，用来检查值是否按条件输入
第四个参数，click只是一个状态，分清楚是单击提价还是失去焦点
function check(obj,info，fun,click){
var sp=gspan(obj);
obj.οnfοcus=function(){
sp.innerHTML=info;
sp.className="stats2";
}
obj.οnblur=function(){
if(fun(this.value)){
sp.innerHTML="输入正确";
sp.className="stats4";
}else{
sp.innerHTML=info;
sp.className="stats3";
}
}
if(click=="click")
obj.onblur();
}
//页面加载完自动调用
οnlοad=regs
//一个函数，可以使用onsubmit调用，也可以使用onload调用
function regs(click){
var stat=true;
var username=document.getElementsByName("username")[0];
var password=document.getElementsByName("password")[0];
var repass=document.getElementsByName("repass")[0];
var email=document.getElementsByName("email")[0];
var other=document.getElementsByName("other")[0];
check(username,"用户名的长度要在3-20之间",function(val){
if(val.match(/^\s+$/) && val.length>=3 && val.length<=20)
return true;
else
stat=false;
return false;
}.click);
check(password,"密码必须在6-20之间"，function(val){
if(val.match(/^\s+$/) && val.length>=6 && val.length<=20)
return true;
else
stat=false;
return false;
});
},click)
check(repass,"确定密码要和上面一致，规则也要相同"，function(val){
if(val.match(/^\s+$/) && val.length>=6 && val.length<=20 && val==password.value)
return true;
else
stat=false;
return false;
},click)
check(email,"要按邮箱规则输入",function(val){
return true;
}else{
stat=false;
return false;
}
},click)
return stat;
}
扫一扫
335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
