caCheckerV0.1.2 Beta2
caChecker是一个免费的、使用简单操作方便的、与HTML标签0藕合的JS表单验证框架,caChecker支持自定义验证函数来扩充验证功能。验证一个含有100个元素的大表单,只需要10分钟左右的配置规则时间,不需要复制粘贴大量代码。caChecker完美地实现表单与验证相分离,使用caChecker不需要在原来的form或html控件标签上加任何属性或方法,只需要导入一个JS文件,系统会自动适配做了规则定义的FORM表单。您无需忧虑原有的Form标签上的onsubmit不能正常运行,body标签上的onload无效。caChecker利用代理的原理,保证了原有事件的完美执行。目前,caChecker支持Firefox,IE,Opera等浏览器。现在就让我们一切来探究caChecker的神秘吧!
最新下载:
版本更新说明:
caCheckerV0.1.2
发布时间: 2009-06-19
1.修复自定义onsubmit事件提交控制失败。
2.新增url、mobile、number、color验证。
3.框架添加命名空间。
caCheckerV0.1.1
发布时间: 2009-05-11
完成核心代码,支持email、length、empty验证。
使用步骤:
1.导入框架JS,caChecker.js
2.编写验证规则 CACHK.addCheckForm(表单名称[-N],规则);
详细说明:
CACHK.addCheckForm(表单名称[-N],规则);
每个表单添加一条规则。
表单名称[-N]:同一页面有多个表单name属性都是相同的,可以加-N,例如:
Form1:
<form name="myForm">内容1</form>
Form2:
<form name="myForm">内容2</form>
CACHK.addCheckForm(myForm-0,规则1);
CACHK.addCheckForm(myForm-1,规则2);
索引从0开始!
规则说明:
var role = ["0|empty|0|性名","1|len|>6|年龄","2|email|0|电子邮箱"];
验证规则可以定义成变量,实现重用。
自定义验证:CACHK.chk_函数后缀
chk_:必不可少!是框架的约定!
例 学生表单验证:
CACHK.chk_studentForm = function(elem,role){
if(elem.value == ""){
this.showErrors(elem,role,"不能为空!");
return false;
}
return true;
};
参数说明:
elem:需要验证的元素引用!
role:
role.elemIndex 元素索引
role.roleType 规则类型(empty,len,mail,url 等),验证函数后缀
role.roleIf 规则条件(视规则函数而定),自定义规则函数时,可以获取该值进行处理
role.elemName 元素名称(姓名、年龄、性别等),caChecker会跟据元素名称生成提示语句
已集成的验证库:
验证库后缀 | 验证库描述 | 验证条件 |
len | 长度限制 | >N,<N,!=N,=N 等 |
url | 是否URL | 无需验证条件 |
是否Email | 无需验证条件 | |
mobile | 是否手机号码 | 适合13开头,后9位数字!(无需验证条件) |
empty | 是否为空 | 0表示不能为空,1表示一定为空 |
number | 是否数字型 | 无需验证条件 |
color | 是否颜色类型(#ff0087) | 无需验证条件 |
常用函数库:
函数名称 | 函数说明 | 使用说明 |
showErrors(elem,role,info) | 显示提示信息 | 验证函数: this.showErrors(elem,role,info); CACHK.showErrors(elem,role,info); 外部执行: CACHK.showErrors(elem,role,info); |
isNULL(string) | 是否为NULL或者undefined | 验证函数: this.isNULL(string); CACHK.isNULL(string); 外部执行: CACHK.isNULL(string) |
getElementByEvent(event) | 跟据事件对象获取触发的元素 | 验证函数: this.getElementByEvent(event); CACHK.getElementByEvent(event); 外部执行: CACHK.getElementByEvent(event); |
ltrim(string) | 去左空格 | 验证函数: |
rtrim(string) | 去右空格 | 验证函数: this.rtrim(string); CACHK.rtrim(string); 外部执行: CACHK.rtrim(string); |
trim(string) | 去左右空格 | 验证函数: this.trim(string) CACHK.trim(string) 外部执行: CACHK.trim(string) |
建议都使用CACHK.XXXX方式调用!
完整例子:
example.html
<html>
<head>
<title>caCheckerV1.0 Beta1 Example</title>
<script type="text/javascript" src="caChecker.js">
</script>
<script type="text/javascript">
var formRole1 = ["0|empty|0|姓名","1|len|>6|密码"];
var formRole2 = ["0|mail|0|电子邮箱","1|empty|0|地址","1|address|上海|地址"];
CACHK.addCheckForm("studentForm-0",formRole1);
CACHK.addCheckForm("studentForm-1",formRole2);
//自定义验证函数
CACHK.chk_address = function(elem,role){
var v = this.trim(elem.value);
if(v.indexOf(role.roleIf) == -1){
CACHK.showErrors(elem,role," 只允许" + role.roleIf );
return false;
}
return true;
};
//Form的onsubmit事件
function reCheckForm(formObj,formName){
alert(formName + "通过验证了!可是我这里不给通过!");
return false;
}
</script>
</head>
<body>
<form name="studentForm" οnsubmit="return reCheckForm(this,'studentForm1');">
姓名:<input type="text" name="userName" /><br/>
密码:<input type="password" name="userPwd" /><br/>
<input type="submit" value="保存"/>
<input type="reset" value="重置" />
</form>
<form name="studentForm" id="vaaaa">
电子邮箱:<input type="text" name="userName" /><br/>
地址:<input type="text" name="userPwd" /><br/>
<input type="submit" value="保存"/>
<input type="reset" value="重置" />
</form>
</body>
</html>
验证框架下载:
Mr.CT
Ant Software Studio
2009-06-19