js 表单验证实例

时间:2022-08-22 13:35:02

gspan.html

?
< html >
< head >
     < title >表单验证实例</ title >
     < meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     < script src="check.js" type="text/javascript"></ script >
     < style >
         span{ font-size:12px; }
         .stats1{ color : #ccc; }
         .stats2{ color :black; }
         .stats3{ color :red; }
         .stats4{ color :green; }
 
     </ style >
</ head >
< body >
     < form method="post" action="reg.php" onsubmit="return regs('click')" >
         用户名:< input type="text" name="username" />< span class="stats1">用户名不能为空</ span >< br />
         邮箱:< input type="text" name="email" />< span class="stats1">邮箱不能为空</ span >< br />
         密码:< input type="password" name="password" />< span class="stats1">密码不能为空</ span >< br />
         确认密码:< input type="password" name="chkpass" />< span class="stats1">密码不能为空</ span >< br />
         < input type="submit" />
     </ form >
</ body >
</ html >

 

check.js

?
function gspan(cobj){       //获取表单后的span 标签 显示提示信息
     if (cobj.nextSibling.nodeName != 'SPAN' ){
         gspan(cobj.nextSibling);
     } else {
         return cobj.nextSibling;
     }
}
 
//检查表单 obj【表单对象】, info【提示信息】 fun【处理函数】  click 【是否需要单击, 提交时候需要触发】
function check(obj, info, fun, click){
     var sp = gspan(obj);
     obj.onfocus = function (){
         sp.innerHTML = info;
         sp.className = 'stats2' ;
     }
 
     obj.onblur = function (){
         if (fun( this .value)){
             sp.innerHTML = "输入正确!" ;
             sp.className = "stats4" ;
         } else {
             sp.innerHTML = info;
             sp.className = "stats3" ;
         }
     }
 
     if (click == 'click' ){
         obj.onblur();
     }
}
 
onload = regs;      //页面载入完执行
 
function regs(click){
     var stat = true ;        //返回状态, 提交数据时用到
     username = document.getElementsByName( 'username' )[0];
     password = document.getElementsByName( 'password' )[0];
     chkpass = document.getElementsByName( 'chkpass' )[0];
     email = document.getElementsByName( 'email' )[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(chkpass, "确定密码要和上面一致,规则也要相同" , 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){
         if (val.match(/\w+@\w+\.\w/)){
             return true ;
         } else {
             stat = false ;
             return false ;
         }
     }, click);
     return stat;
}