自定义表单验证：
代码：
<!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.οnlοad=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].οnfοcus=setFocusHandler(getEl(e[i].tips),e[i].focusMsg,"onfocus");
this.form[e[i].name].οnblur=setBlurHandler(e[i]);
setText(getEl(e[i].tips),e[i].defaultMsg,"onshow");
}
this.form.οnsubmit=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>
508
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
