手把手教你自己写一个js表单验证框架的方法(2)


//绑定提交事件到元件
UserForm.prototype.set_submit=function(bid,bind){
var self=this;
$("#"+bid).click(
function(){
if(self.validate()){
bind();
}
}
);
}


这里提到了一个UserForm的validate方法,如下:

复制代码 代码如下:


//验证所有的字段
UserForm.prototype.validate=function(){
for(idx in this.f_item){ //循环每一个验证器
this.f_item[idx].validate(); //再检测一遍
if(!this.f_item[idx].checked){
return false; //如果错误就返回失败,阻止提交
}
}
return true; //一个都没错就返回成功执行提交
}



最后用一个例子来看看怎么用:

复制代码 代码如下:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>test</title>
<script type="text/javascript" src="https://www.jb51.net/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="https://www.jb51.net/kernel.js"></script>
<script type="text/javascript">
var form;
$(
function(){
var uf=new UserForm([new Field({
fid:"f1",
val:[new Len_val(1,5,"长度错误"),new Exp_val(v_int,"不是数字")],
suc:function(text){
$('t1').val('');
$('t1').attr('class','suc');
},
err:function(text){
('t1').val(text);
$('t1').attr('class','error');
}
})
]);
uf.set_submit(
"bt",
function(form){
alert("表单已经提交了");
}
);
}
);
</script>
<style>
.suc { background-color:#00ff00;}
.error { background-color:#ff0000;}
</style>
</head>
<body>
<input type="text"/><span></span><br/>
<input type="button" value="提交"/>
</body>
</html>


要注意的地方就是在循环中使用闭包会茶几,必须用一个方法来代理一下,呵呵


希望对初学js但是还不知道该做点什么怎么做的朋友能有所帮助

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdxzgx.html