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

Javascript
JavaScript DOM学习第八章 表单错误提示
JavaScript DOM 学习第九章 选取范围的介绍
JavaScript CSS修改学习第一章 查找位置
JavaScript CSS修改学习第二章 样式
JavaScript CSS修改学习第三章 修改样式表
JavaScript CSS 修改学习第四章 透明度设置
JavaScript CSS修改学习第五章 给“上传”添加样式
JavaScript CSS修改学习第六章 拖拽
Jquery乱码的一次解决过程 图解教程
javascript 包裹节点 提高效率
javascript inneHTML的地雷
javascript 定义新对象方法
判定对象是否为window的js代码
jquery validator 插件增加日期比较方法
jquery 得到当前页面高度和宽度的两个函数
JavaScript 编写匿名函数的几种方法
jQuery 操作下拉列表框实现代码
jQuery入门问答 整理的几个常见的初学者问题
第一个JavaScript入门基础 document.write输出
javascript入门基础之私有变量

No. « 288 289 290 291 »

技术文章搜索

关键字

Javascript 验证表单插件

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-28   浏览: 111 ::
收藏到网摘: 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);

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