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

在表单程序中，在页面上需要很多的Js代码来验证表单，每一个field是否必须填写，是否
只能是数字，是否需要ajax到远程验证,blablabla。
如果一个一个单独写势必非常的繁琐，所以我们的第一个目标就是构建一个类似DSL的东西，
用表述的语句而非控制语句来实现验证。
其次一个个单独写的话还有一个问题就是必须全部验证通过才能提交，但是单独验证会因为
这个特征而增加很多额外的控制代码，且经常会验证不全面。所以第二个目标就是能够全面
的整合整个验证的过程。
最后不能是一个无法扩展的一切写死的实现，必要的扩展性还是要的。
首先，我们需要一个能够描述对字段验证的类


代码如下:

function Field(params){
this.field_id=params.fid; //要验证的字段的ID
this.validators=params.val; //验证器对象数组
this.on_suc=params.suc; //当验证成功的时候执行的事件
this.on_error=params.err; //当验证失败的时候执行的事件
this.checked=false; //是否通过验证
}

关于验证器对象我们在后面来讨论，接下来我们扩展这个类，加入validate方法


代码如下:

Field.prototype.validate=function(){
//循环每一个验证器
for(item in this.validators){
//给验证器附加验证成功和验证失败的回调事件
this.set_callback(this.validators[item]);
//执行验证器上的Validate方法，验证是否符合规则
if(!this.validators[item].validate(this.data())){
break; //一旦任意一个验证器失败就停止
}
}
}

再加入一个获取字段值的方法：


代码如下:

//获取字段值的方法
Field.prototype.data=function(){
return document.getElementById(this.field_id).value;
}

设置验证器回调函数的方法set_callback如下：

代码如下:

Field.prototype.set_callback=function(val){
var self=this; //换一个名字来存储this，不然函数的闭包中会覆盖这个名字
val.on_suc=function(){ //验证成功执行的方法
self.checked=true; //将字段设置为验证成功
self.on_suc(val.tips); //执行验证成功的事件
}
val.on_error=function(){ //验证失败的时候执行的方法
self.checked=false; //字段设置为验证失败
self.on_error(val.tips);//执行验证失败的事件
}
}

接下来我们就来看看验证器，验证器是真正执行验证过程的类，根据一般的验证过程，我们
可以将其分类成，长度验证（包括必填验证），正则表达式验证，自定义函数验证，Ajax远
程验证这几种，所以我们定义这几种验证器类，Ajax远程验证为了方便引用了jQuery，其他
部分也有用到：

代码如下:

//长度验证的验证器类
function Len_val(min_l,max_l,tip){
this.min_v=min_l;
this.max_v=max_l;
this.tips=tip;
this.on_suc=null;
this.on_error=null;
}
Len_val.prototype.validate=function(fd){
if(fd.length<this.min_v||fd.length>this.max_v){
this.on_error();
return false;
}
this.on_suc();
return true;
}
//正则表达式验证器
function Exp_val(expresion,tip){
this.exps=expresion;
this.tips=tip;
this.on_suc=null;
this.on_error=null;
}
Exp_val.prototype.validate=function(fd){
if(!fd){
this.on_suc();
return true;
}
if(this.exps.test(fd)){
this.on_suc();
return true;
}else{
this.on_error();
return false;
}
}
//远程验证器
function Remote_val(url,tip){
this.p_url=url;
this.tips=tip;
this.on_suc=null;
this.on_error=null;
}
Remote_val.prototype.validate=function(fd){
var self=this;
$.post(this.p_url,{f:fd},
function(data){
if(data.rs){
self.on_suc();
return;
}else{
self.on_error();
}
},"json"
);
return false;
}
//自定义函数验证器
function Man_val(tip,func){
this.tips=tip;
this.val_func=func;
this.on_suc=null;
this.on_error=null;
}
Man_val.prototype.validate=function(fd){
if(this.val_func(fd)){
this.on_suc();
}else{
this.on_error();
}
}

最后我们用一个userform的类来做一个入口，在构造的时候传入Field对象的列表，并且将
每一个控件的onblur事件绑定到validate的包装器上

代码如下:

function UserForm(items){
this.f_item=items; //把字段验证对象数组复制给属性
for(idx=0;idx<this.f_item.length;idx++){ //循环数组
var fc=this.get_check(this.f_item[idx]); //获取封装后的回调事件
$("#"+this.f_item[idx].field_id).blur(fc); //绑定到控件上
}
}
//绑定验证事件的处理器，为了避开循环对闭包的影响
UserForm.prototype.get_check=function(v){
return function(){ //返回包装了调用validate方法的事件
v.validate();
}
}

接下来需要定义一个方法来绑定提交按钮的onclick事件：


代码如下:

//绑定提交事件到元件
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="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="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" id="f1" name="f1"/><span id="t1"></span><br/>
<input type="button" id="bt" value="提交"/>
</body>
</html>

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

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

赞 (0)

相关推荐

  • 轻量级 JS ToolTip提示效果

    轻量级 JS ToolTip提示效果

    鼠标经过出现的提示效果,比title更漂亮,可订制.JS: 复制代码 代码如下: //---------------------------tooltip效果 start----------------------------------- //获取某个html元素的定位 function GetPos(obj){ var pos=new Object(); pos.x=obj.offsetLeft; pos.y=obj.offsetTop; while(obj=obj.offsetParent

  • js验证框架之RealyEasy验证详解

    使用Really_easy_field_validation_with_Prototype进行表单验证,具体内容如下 1.第一步当然是先引入js和css文件. <link href="${ ctx}/skin/css/validation.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="${ c

  • 非常实用的js验证框架实现源码 附原理方法

    本文为大家分享一个很实用的js验证框架实现源码,供大家参考,具体内容如下 关键方法和原理: function check(thisInput) 方法中的 if (!eval(scriptCode)) { return false; } 调用示例: 复制代码 代码如下: <input type="text" class="text_field percentCheck" name="progress_payment_two" id="

  • ToolTip 通过Js实现代替超链接中的title效果

    自定义Tooltip特效 body ul { list-style: none; } body li { margin: 60px; } div { border: 1px solid #CCC; padding: 10px; background: #dff5ff; margin-left: 30px; } function initEvent() { var links = document.getElementsByTagName("a"); for (var i = 0; i

  • 使用JS组件实现带ToolTip验证框的实例代码

    使用JS组件实现带ToolTip验证框的实例代码

    本组件依赖JQuery 本人测试的JQuery 是1.8, 兼容IE8,IE9,谷歌,火狐等. //验证输入框 function ValidateCompent(input){ var _input = $(input).clone(true); _input.css("height",$(input).css("height")); _input.css("width", $(input).css("width")); va

  • jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】

    jQuery悬停文字提示框插件jquery.tooltipster.js用法示例【附demo源码下载】

    本文实例讲述了jQuery悬停文字提示框插件jquery.tooltipster.js用法.分享给大家供大家参考,具体如下: 运行效果截图如下: index.html页面: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery Tooltips悬停文字提示框效果</title> <meta charset="utf-8" /> <lin

  • jquery.cvtooltip.js 基于jquery的气泡提示插件

    序 1.插件名cvtooltip中的cv是ChinaValue的首字母缩写,而tooltip就是提示啦. 2.适用于新功能的提示,引导用户的提示,即时类消息的提示,操作失败提示(操作成功了也没人拦着)等等等,使用css实现,不附带任何图片文件. 3.目前发现的问题,在Chorme中表现的不给力,是由于Chrome对页面的解析与IE和FF不同,导致jquery的position或者offset返回值不同. 4.该插件依然是练习之作,一人之力,错误难免. 实例演示 1.载入页面的同时,气泡提示也显示

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

    在表单程序中,在页面上需要很多的Js代码来验证表单,每一个field是否必须填写,是否 只能是数字,是否需要ajax到远程验证,blablabla. 如果一个一个单独写势必非常的繁琐,所以我们的第一个目标就是构建一个类似DSL的东西, 用表述的语句而非控制语句来实现验证. 其次一个个单独写的话还有一个问题就是必须全部验证通过才能提交,但是单独验证会因为 这个特征而增加很多额外的控制代码,且经常会验证不全面.所以第二个目标就是能够全面 的整合整个验证的过程. 最后不能是一个无法扩展的一切写死的实现

  • 快速学习jQuery插件 jquery.validate.js表单验证插件使用方法

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证

  • 在Vant的基础上实现添加表单验证框架的方法示例

    Vant 一套基于Vue的移动端UI框架,有赞出品. 因为UI设计的够漂亮,源码结构也比较清晰,插件定位也比较明确,重要是实战过程中的使用体验不错.在最近的项目当中就使用 Vant 作为移动端的基础UI框架,但在实践过程中发现该框架和其他框架有不一样的地方.例如它不内置表单验证,接下来,我把自己实现验证框架的思路分享出来. 分析需求 我们找的插件主要能解决以下问题 支持中文 适应UI框架 分组验证 动态验证(数据动态,规则动态) 去网络上搜索了一些框架,推荐两款(在官方也有推https://cn

  • 解决JS表单验证只有第一个IF起作用的问题

    文章来自:https://blog.csdn.net/qq_38215042/article/details/84675988 具体代码如下所述: if(条件语句){ return false; }else{ return true; } if(条件语句){ return false; }else{ return true; } if(条件语句){ return false; }else{ return true; } 你写的是不是上面这种情况?其实会出现只执行了第一个这种情况,主要是你在if

  • 一个即时表单验证的javascript代码

    可爱吧--教你做可爱女人--化妆 美容 美化 瘦身 护肤--深圳可爱吧 // 此脚本由刘海民编写 // 网站:http://www.szrgb.net // 邮箱:lovelium@gmail.com var num=5; var mon1=0; var mon2=0; var mon3=0; var mon4=0; var mon5=0; //封装得到对像ID涵数 function getObj(objName){return(document.getElementById(objName))

  • jquery validate.js表单验证入门实例（附源码）

    jquery validate.js表单验证入门实例（附源码）

    小编上网查阅了许多关于jquery.validate的文章,大部门只是介绍它的api和用法,没有一个详细的的入门案例介绍,研究了半天还是无从下手.为此,小编自己做了一个jquery validate.js表单验证入门实例,写的不是特别好,但应该适用于初学者,分享给大家. 以下是validate.js表单验证入门实例参考源码,文章下面有源码下载地址: <html> <head> <meta http-equiv="Content-Type" content=

  • vue.js表单验证插件(vee-validate)的使用教程详解

    vue.js表单验证插件(vee-validate)的使用教程详解

    综述 名称:vee-validate 用途:简单的 Vue.js 表单验证插件 官网:地址 github:地址 特别提示 配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样 插件既可以应用于SPA也可以应用于多页面,通用性强 安装 单页安装 npm install vee-validate --save 浏览器安装 <!-- unpkg --> <script src="https://unpkg.com/vee-validate@2.0.0-rc.

  • JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】

    本文实例讲述了JS表单验证插件之数据与逻辑分离操作.分享给大家供大家参考,具体如下: 之前已经写过一个表单验证插件了,为什么还会重复造轮子呢?第一个问题是代码结构比较乱,虽然通过原型继承的写法将处理分层,但业务逻辑和数据结构混杂在一起,导致第二个问题--可扩展性和灵活性差. 认真分析表单验证的过程,可以分为两步:怎么验证和如何验证.怎么验证是数据层面的问题,如何验证是业务逻辑层面的问题. 点击:这里 查看源码 策略模式将对象和规则区分 如何让算法(数据层)和对象(逻辑层)分开来,使得算法可以独立

  • JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】

    本文实例总结了JS表单验证方法.分享给大家供大家参考,具体如下: 回回写表单,回回要写不同的检查JS,很麻烦,后来写了通用的检查函数,很粗糙,但比较实用,以后再好好改改: 包含页: Check-Form.js 代码如下: //规则检查排序 function RegCheck(objs) { var str = objs.checktype; switch (str) { case "cn" : //要检查的表单控件的输入类型必须为中文 return CnWordRegCheck(obj

  • 分享纯手写漂亮的表单验证

    哈哈 手工馒头好吃,今天小编跟大家分享手工js表单验证代码,感兴趣的朋友快来吧. 因为是自定义样式,所以兼容所有浏览器版本,个人认为非常漂亮:网址wuxi.rongzi.com css <style> /*tooltip*//* CSS属性顺序按照 字母首字母 排列*/ .ui-slider-tooltip{ background:#fa; border:px solid #fa; color:#fff; display: block; text-align: left; padding: p

随机推荐