Javascript 验证表单插件- Javascript - 软晨网（RuanChen.com）

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

技术文章搜索

关键字

Javascript 验证表单插件

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-28 浏览: 151 ::

收藏到网摘: n/a

jQuery教程:认识jQuery javascript教程:call方法

此前，我曾经写过一个基于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 的三种状态进行处理。

$(obj).ready 当obj加载结束时，自动插入<span>作为提示容器。
$(obj).focus 当obj获得焦点时，提示该字段的输入规则。
$(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>

这个插件虽然在一段时间里满足了实际需要，但是在持续的使用中，我发现存在以下几个问题：

布局不灵活，在 input 后添加提示语句，如果input都是单行的，那没有问题，但如果是一行当中有多个input 这个插件的提示效果就很糟糕了。
校验触发方式存在缺陷，$(this).blur();触发校验并不保险，例如表单有默认值无需填写，用户不触发blur事件前，得不到正确提示。
可靠性不强，通过 $(".onError:first")来进行校验，而不是通过CheckNull()的返回值进行判断，当用户有自定义CSS或禁止CSS时会出现麻烦。
结构过渡紧密，把呈现与逻辑关系绑在一起，失去了调整的空间。

针对这些问题，我在新版本中采取了完全不同的思路，并且脱离了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);

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

jQuery教程:认识jQuery javascript教程:call方法

Javascript 验证表单插件

评论 (0) All