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

Javascript
JavaScript 语言精粹学习笔记
有关div页面拖动、缩放、关闭、遮罩效果代码
JQuery this 和 $(this) 的区别
JS 时间显示效果代码
jquery 表单进行客户端验证demo
JS 获取span标签中的值的代码 支持ie与firefox
JavaScript 获取用户客户端操作系统版本
可以读取EXCEL文件的js代码
JS去除字符串的空格增强版(可以去除中间的空格)
监控用户是否关闭浏览器的js代码
javascript 继承实现方法
JSON 入门指南 想了解json的朋友可以看下
javascript 函数调用规则
动态表格Table类的实现
JSON 客户端和服务器端的格式转换
jQuery ui1.7 dialog只能弹出一次问题
javascript 遍历验证所有文本框的值
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
javascript 简练的几个函数
csdn 博客中实现运行代码功能实现

No. « 154 155 156 157 »

技术文章搜索

关键字

Javascript 验证表单插件

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

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