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
5517
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
