js表单验证实例讲解
本文实例为大家分享了js表单验证,供大家参考,具体内容如下
JavaScript可用来在数据被送往服务器前对HTML表单中的这些输入数据进行验证。
被JavaScript验证的这些典型的表单数据有:
1)、用户是否已填写表单中的必填项目?
2)、用户输入的邮件地址是否合法?
3)、用户是否已输入合法的日期?
4)、用户是否在数据域(numericfield)中输入了文本?
gspan.html
<html> <head> <title>表单验证实例</title> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <scriptsrc="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> <formmethod="post"action="reg.php"onsubmit="returnregs('click')"> 用户名:<inputtype="text"name="username"/><spanclass="stats1">用户名不能为空</span><br/> 邮箱:<inputtype="text"name="email"/><spanclass="stats1">邮箱不能为空</span><br/> 密码:<inputtype="password"name="password"/><spanclass="stats1">密码不能为空</span><br/> 确认密码:<inputtype="password"name="chkpass"/><spanclass="stats1">密码不能为空</span><br/> <inputtype="submit"/> </form> </body> </html>
check.js
functiongspan(cobj){//获取表单后的span标签显示提示信息 if(cobj.nextSibling.nodeName!='SPAN'){ gspan(cobj.nextSibling); }else{ returncobj.nextSibling; } } //检查表单obj【表单对象】,info【提示信息】fun【处理函数】click【是否需要单击,提交时候需要触发】 functioncheck(obj,info,fun,click){ varsp=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;//页面载入完执行 functionregs(click){ varstat=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){ returntrue; }else{ stat=false; returnfalse; } },click); check(password,"密码必须在6-20位之间",function(val){ if(val.match(/^\S+$/)&&val.length>=6&&val.length<=20){ returntrue; }else{ stat=false; returnfalse; } },click); check(chkpass,"确定密码要和上面一致,规则也要相同",function(val){ if(val.match(/^\S+$/)&&val.length>=6&&val.length<=20&&val==password.value){ returntrue; }else{ stat=false; returnfalse; } },click); check(email,"请按邮箱规则输入",function(val){ if(val.match(/\w+@\w+\.\w/)){ returntrue; }else{ stat=false; returnfalse; } },click); returnstat; }
以上就是本文的全部内容,希望对大家的学习有所帮助。