javaScript表单提交验证

来源：互联网发布：淘宝店铺钻石号出售编辑：程序博客网时间：2024/04/30 06:22

1.HTML文件及控制样式

<html><head><title>表单验证</title><script src="formCheck.js"></script><style>/*span font*/span{font-size:12px;}/*默认*/.status1{color:#aaa;}/*聚焦*/.status2{color:#000;}/*错误*/.status3{color:red;}/*正确*/.status4{color:blue;}</style></head><body><form action="login.html" method="post" onsubmit="return sub('sub')" name="frm1"><ul><li><label for="username">用 户 名:<input type="text" name="username"><span class="status1">请输入用户名</span></label></li><li><label for="password">密    码:<input type="password" name="password"><span class="status1">请输入密码</span></label></li><li><label for="repress">密码确认:<input type="password" name="repass"><span class="status1">请输入确认密码</span></label></li><li><label for="email">邮    件:<input type="text" name="email"><span class="status1">请输入邮箱</span></label></li><li><label for="other">其    他:<input type="text" name="other"><span class="status1">请输入其他</span></label></li><li><label for="submit">提    交:<input type="submit" name="submit"></label></li></ul></form></body></html>

js控制文件

/*获取表单中相应input输入后的span * *param: obj:需要获取span的对象 * *返回: 返回获取的span节点对象 * * */function getSpan(obj){while(true){if(!obj.nextSibling.nodeName.match(/span/i)){obj=obj.nextSibling;}else{return obj.nextSibling;}}}/*检查表单中输入对象是否合法 * *param: obj:被检查的对象tip:检查后span输入的文字fun:检查规则函数<回调函数> * * */function checkForm(obj,tip,fun,sub){//获取obj后面的spanvar sobj=getSpan(obj);//obj获得焦点时(将tip提示显示出来,改变其css属性)obj.onfocus=function(){sobj.innerHTML=tip;sobj.className="status2";}//obj失去焦点时(检查是否合格,做出相应提示)obj.onblur=function(){//检查是否合格if(fun(this.value)){sobj.innerHTML="输入正确";sobj.className="status4";}else{sobj.className="status3";//错误时改变提示信息颜色}}//点击提交按钮触发的检查if(sub=="sub"){obj.onblur();}}/*页面加载时自动载入运行*/onload=sub;function sub(sub){var flag=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];//username检查checkForm(username,"用户名的长度为3-20位字符",function(val){if(val.match(/^\S+$/) && val.length>=3 && val.length<=20){return true;}else{flag=false;return false;}},sub);//password检查checkForm(password,"密码长度必须在6-20位之间",function(val){if(val.match(/^\S+$/) && val.length>=6 && val.length<=20){return true;}else{flag=false;return false;}},sub);//repass检查function repassC(){checkForm(repass,"确认密码与密码一致,规则相同",function(val){if(val==password.value && val!=""){return true;}else{flag=false;return false;}},sub);}repassC();//email检查checkForm(email," 要按邮箱规则输入",function(val){if(val.match(/\w+@\w+.\w+/)){return true;}else{flag=false;return false;}},sub);//其他checkForm(other,"请输入其他",function(val){return true;flag=false;},sub);return flag;}

0 0