Javascript 验证表单插件
此前，我曾经写过一个基于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时会出现麻烦。
- 结构过渡紧密，把呈现与逻辑关系绑在一起，失去了调整的空间。
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);
========================================================