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

Javascript
jquery 弹出层实现代码
jQuery 扩展对input的一些操作方法
扩展jQuery 键盘事件的几个基本方法
Iframe 自适应高度并实时监控高度变化的js代码
CCPry JS类库 代码
jquery text()要注意啦
json 入门基础教程 推荐
json 实例详细说明教程
JavaScript中的JSON 中文版翻译
javascript GUID生成器实现代码
DOM 脚本编程中的兄弟节点
JavaScript Sort 表格排序
提高网站性能之 如何对待JavaScript
js 函数的执行环境和作用域链的深入解析
键盘 keycode的值 javascript时触发事件时很有用的要素
cnblogs csdn 代码运行框实现代码
简单实用的HTML到UBB转换脚本工具实现说明
Javascript结合css实现网页换肤功能
JQuery 网站换肤功能实现代码
JS OOP包机制,类创建的方法定义

No. « 269 270 271 272 »

技术文章搜索

关键字

Javascript 验证表单插件

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

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