当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Javascript 验证表单插件

Javascript
jQuery中isFunction方法的BUG修复
将函数的实际参数转换成数组的方法
javascript 删除数组中重复项（uniq）
js 巧妙去除数组中的重复项
javascript下一种表单元素获取方法存在的问题
javascript 三种数组复制方法的性能对比
js 多层叠的TAB选项卡
javascript 自动标记来自搜索结果页的关键字
起点页面传值js,有空研究学习下
javascript 的Document属性和方法集合
JavaScript 使用简略语法创建对象的代码
使用JQuery进行跨域请求
jquery 经典动画菜单效果代码
jquery 常用操作方法
js提示信息jtip封装代码，可以是图片或文章
javascript面向对象的方式实现的弹出层效果代码
jquery中的sortable排序之后的保存状态的解决方法
js或css实现滚动广告的几种方案
使用JavaScript库还是自己写代码？
js 右键菜单，支持不同对象不同菜单(兼容IE、Firefox)

No. « 281 282 283 284 »

技术文章搜索

关键字

Javascript 验证表单插件

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-28   浏览: 113 ::
收藏到网摘: n/a

     此前，我曾经写过一个基于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);

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