caCheckerV0.1.2 Beta2 已发布

canca

浏览: 12115 次
性别:
来自: 东莞

最近访客更多访客>>

qwertyuiop2

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (13)

社区版块

存档分类

Mobile 框架 JavaScript IE Firefox

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 Beta2

版本更新说明:

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	无需验证条件
mail	是否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)	去左空格	验证函数： this.ltrim(string); CACHK.ltrim(string); 外部执行： CACHK.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" onsubmit="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>