js 表单验证实例
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; } |
浮生若梦 若梦浮生 其生若浮,其死若休,为欢几何