自定义表单验证
自定义表单验证：
?
代码：
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>
<link rel="stylesheet" href="css/validator.css" type="text/css"></link>
<link rel="stylesheet" href="css/style.css" type="text/css"></link>
?
</HEAD>
<script type="text/javascript">
//form表单调用验证的信息
var object={};
object.onready=function(handler){
window.onload=handler;
}
handler=function(){
?? alert("提交前调用自己的函数");
?? return false;
}
object.onready(function(){
?? var v=new Validate(config);
?? v.register();
});
//配置验证属性
var config={form:"myForm",submit:handler,elements:[
?? ?{name:"userName",allownull:false,defaultMsg:"用户名不能为空",focusMsg:"请输入用户名",rightMsg:"恭喜你，用户名输入正确！",errorMsg:"抱歉，用户名输入不合法",tips:"userNameTip",regexp:/^\w{6,12}$/},
{name:"password",allownull:false,defaultMsg:"密码不能为空",focusMsg:"请输入密码",rightMsg:"恭喜你，密码输入正确！",errorMsg:"抱歉，密码输入不合法",tips:"passwordTip",regexp:/^\w{6,12}$/}
]};
?
//进行验证信息
Validate=function(config){
?? this.config=config;
?? this.form=document.getElementById(this.config.form);
?? this.register=function(){
?var e=this.config.elements;
?for(var i=0;i<e.length;i++){
? ? this.form[e[i].name].onfocus=setFocusHandler(getEl(e[i].tips),e[i].focusMsg,"onfocus");
this.form[e[i].name].onblur=setBlurHandler(e[i]);
? ? setText(getEl(e[i].tips),e[i].defaultMsg,"onshow");
?}
?this.form.onsubmit=submitHandler(this.form);
?? }
?? //得到Id
?? getEl=function(id){
?? ? ?return document.getElementById(id);
?? }
?? //设置提示文本
?? setText=function(obj,msg,image){
?? ? ?obj.className=image;
?? ? ?obj.innerHTML=msg;
?
?? }
?? //设置得到焦点提示文本
?? setFocusHandler=function(obj,msg,image){
?? ? ?return function(){
? ? setText(obj,msg,image);
?}
??}
??judgeInfoAllowNull=function(shuxing,value){
? ? if(!value){ ? ? ? ? //没有填的情况
setText(getEl(shuxing.tips),shuxing.defaultMsg,"onshow"); ? ? ? ? ? //默认信息
}else{ ? ? ? ? ?//有填的情况
if(value.match(shuxing.regexp)){
setText(getEl(shuxing.tips),shuxing.rightMsg,"oncorrect"); ? ? ? ? ? //填写正确的情况
}else{
setText(getEl(shuxing.tips),shuxing.errorMsg,"onerror"); ? ? ? ? ? ?//填写不正确的情况
}
}
?? ?}
judgeInfoAllowNotNull=function(shuxing,value){
? ? if(!value){ ? ? ? ? //没有填的情况
setText(getEl(shuxing.tips),shuxing.errorMsg,"onerror"); ? ? ? ? ? //错误信息
}else{ ? ? ? ? ?//有填的情况
if(value.match(shuxing.regexp)){
setText(getEl(shuxing.tips),shuxing.rightMsg,"oncorrect"); ? ? ? ? ? //填写正确的情况
}else{
setText(getEl(shuxing.tips),shuxing.errorMsg,"onerror"); ? ? ? ? ? ?//填写不正确的情况
}
}
?? ?}
?
?? //设置失去焦点时进行判断后提示文本
?? ?setBlurHandler=function(shuxing){
? return function(){
? ? ?var v=this.value;
?? ? ? ? ?if(shuxing.allownull){ ? //允许为null的情况
?? ? ? ? ? ? ?judgeInforAllowNull(shuxing,v);
?}else{ ? ? ? ? ? ? //不允许为null的情况
? judgeInfoAllowNotNull(shuxing,v);
?}
? }
}
?
submitHandler=function(f){
? ?var c=this.config;
var isTrue=true;
return function(){
for(var i=0;i<c.elements.length;i++){
?var shuxing=c.elements[i];
?var value=f[shuxing.name].value;
?if(shuxing.allownull){ ? //允许为null的情况
judgeInfoAllowNull(shuxing,value);
?}else{ ? ? ? ? ? ? //不允许为null的情况
judgeInfoAllowNotNull(shuxing,value);
?}
? }
? var handler=c.submit;
? isTrue=handler();
? return isTrue;
}
}
}
?
?
</script>
<BODY>
<form action="" method="POST" id="myForm" name="myForm">
<center>
<table>
<tr>
<td>用户名：</td><td><input type="text" name="userName" value="" width=80></input><span id="userNameTip"></span></td>
</tr>
<tr>
<td>密 ?码：</td><td><input type="text" name="password" value="" ?width=80></input><span id="passwordTip"></span></td>
<tr>
<td></td><td><input type="submit" name="submit" value="我要提交"><td>
</tr>
</table>
</center>
</form>
</BODY>
</HTML>
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////