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);

身份证格式校验:    CheckId(obj, objname);

正则表达式校验:    CheckExpression(obj, objname, expression);

========================================================



相关阅读:
FreeBSD 4.10 汉化总结
JS高级拖动技术 setCapture,releaseCapture
将Access数据库移植到SQLServer
RGB颜色值转HTML十六进制(HEX)代码的JS函数
WEB标准学习,认识两种网页声明的含义
Javascript控制target属性
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
Win2003自动登录的方法
jquery uaMatch源代码
用javascript实现源代码的隐藏与解密的方法
PHP中创建并处理图象
一个小助手批处理实例代码
改Windows系统字体颜色
Linux Ubuntu服务器版操作系统介绍
快速导航

Copyright © 2016 phpStudy |