JS技巧:Javascript 验证表单插件
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
此前,我曾经写过一个基于JQuery的表单校验 validator.js ,用了一段时间发现出现了一些问题。与大家互相探讨一下。 validator.jsp version: alpha 1.0 举其中一个验证函数为例: ...... function CheckNull(obj, objname){ $(obj).ready( function(){ if (!$(obj).next().is("span")) $(obj).after(" 必填"); } ); $(obj).focus( function(){ $(this).next("span").html(objname+"必填"); $(this).next("span").removeClass(); $(this).next("span").addClass("onFocus"); }); $(obj).blur(function(){ if($.trim($(this).val()) != ""){ $(this).next("span").html("已填"); $(this).next("span").removeClass(); $(this).next("span").addClass("onSuccess"); }else{ $(this).next("span").html(objname+"必填"); $(this).next("span").removeClass(); $(this).next("span").addClass("onError"); } }); } ...... 设计这个验证插件的思路是让团队中不太懂JAVASCRIPT的美工人员也可以编写简单的表单验证程序。 主要原理是,对参数中 obj 的三种状态进行处理。 1.$(obj).ready 当obj加载结束时,自动插入<span>作为提示容器。 2.$(obj).focus 当obj获得焦点时,提示该字段的输入规则。 3.$(obj).blur 当obj失去焦点时,校验字段的合法性。 前端页面调用 <script> $(document).ready(function(){ //页面加载后 CheckNull(account,"用户名"); //校验用户名不为空 }); $("submit").click(function(){ chkfrm(document.form1); //id="submit"按钮添加click事件 }); function chkfrm(obj){ //检查表单各项 $("input:text,input:password,select,",obj).each(function(){ $(this).blur(); }); if ($(".onError:first")==null) obj.submit(); //没有错误就提交表单 else $(".onError:first").prev().focus(); //第一个出错项获得焦点 } </script> 这个插件虽然在一段时间里满足了实际需要,但是在持续的使用中,我发现存在以下几个问题: 1.布局不灵活,在 input 后添加提示语句,如果input都是单行的,那没有问题,但如果是一行当中有多个input 这个插件的提示效果就很糟糕了。 2.校验触发方式存在缺陷,$(this).blur();触发校验并不保险,例如表单有默认值无需填写,用户不触发blur事件前,得不到正确提示。 3.可靠性不强,通过 $(".onError:first")来进行校验,而不是通过CheckNull()的返回值进行判断,当用户有自定义CSS或禁止CSS时会出现麻烦。 4.结构过渡紧密,把呈现与逻辑关系绑在一起,失去了调整的空间。 针对这些问题,我在新版本中采取了完全不同的思路,并且脱离了jQuery,虽然jQuery非常好用,但是如此简单的校验插件,加载jQuery也只是为了在取元素的过程中简便一点,考虑jQuery本身的体积,有点得不偿失,用原生的javascript就足够简便了。另外,我把逻辑与呈现彻底分开,让CheckNull就只是完成校验字段是否为空,而不控制错误信息的呈现。 validator.js version:alpha 2.0 还是同一个函数 ....... function CheckNull(obj, objname) { var flag = false; if (obj.value == null || obj.value == "") flag = false; else flag = true; if(!flag) //统一的处理方式 tips(obj); //flag=false 显示错误提示信息 else clear(obj); //flag=true 清除错误提示信息 return flag; } ....... 前端页面调用并校验 function chkfrm(obj){ with(obj){ var arr = new Array( //把所有校验的返回值存入数组 CheckNull(name, "用户名"), CheckNull(addr, "地址"), CheckNull(tel, "联系电话"), ); if (arr.join("").indexOf("false")<0) //通过join把数组链接成字符串 submit(); //如果返回值中没有false,提交表单 } } 虽然结构以及程序都非常简单直白,但是把错误呈现都归纳到 tips()中去了,那就可以在维持逻辑关系不变的情况下,只调整 tips()一个函数去控制不同的呈现方式,这样设计师就可以有多种的选择,最大限度的保持了插件的灵活性。在后续的版本中还会加入 CheckNull(obj,objname,type) 这样的调用方式,在tips()内置几种不同的样式,通过tips(obj,type)来控制选择提示信息的样式。实现同一张表单不同的表单项有不同形式的提示信息。 现在火速提供 alpha 2.0版本下载,希望抛砖引玉,让这个插件能越来越好。 ================ validator.js version:alpha2.0 ================ 目前以支持如下函数: 字符串长度校验: CheckSLen(obj, objname, min_len, max_len); 字符串空校验: CheckNull(obj, objname); 字符串相等校验: CheckEqual(obj1, obj2, obj1name, obj2name); 数字范围校验: CheckNumRange(obj, objname, min_value, max_value); Email格式校验: CheckEmail(obj, objname); SFZ格式校验: CheckId(obj, objname); 正则表达式校验: CheckExpression(obj, objname, expression); ========================================================
该文章在 2010/8/17 23:34:28 编辑过 |
关键字查询
相关文章
正在查询... |