Javascript 验证表单插件

作者佚名技术来源网页制作浏览发布时间 2012-03-06

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

布局不灵活，在 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，提交表单
   }
}

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: JavaScript教程：switch-case下一篇: Javascript代码:校验身份证号程序

关于Javascript 验证表单插件的所有评论

随机推荐