当前位置:首页 > JavaScript

caCheckerV0.1.2 发布

canca17年前 (2009-06-20)JavaScript466

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>
 
 

查看例子

 

验证框架下载:

caChecker.js

Mr.CT
Ant Software Studio
2009-06-19

扫描二维码推送至手机访问。

版权声明:本文由Ant.Master's Blog发布,如需转载请注明出处。

本文链接:https://iant.work/post/324.html

标签: JavaScript
分享给朋友:

“caCheckerV0.1.2 发布” 的相关文章

javascript MailTo 邮件技巧

调用email的方法 //<a href="mailto:talantlee@126.com">Email</a>window.location.href="mailto:talantlee@126.com";myform.action="mailto:talant…

javascript IE与FireFox 一些兼容写法

1>获取控件用document.getElementById,不用document.all(FF等浏览器不支持)2><button> 会被firefox解释为提交form或者刷新页面,需要写标准<button type="button">3>使用childN…

javascript 弹出式窗体详解

1>window.prompt(text, value) 簡單的基與模態窗體的對話框,(返回你輸入)   var v=window.prompt("提示","請輸入你的名字")2>window.confirm(text,mess)  模態確認框(返回"是/否…

Javascript 逻辑表达式

1>逻辑表达式    看例子:     var cc;      var  dd=new Object();      var false1="false…

javascript在IE和Firefox中的兼容考虑

1.document.formName.item("itemName") 问题说明:IE下,可以使用document.formName.item("itemName")或document.formName.elements["elementName"];Firefox下,只能使用docum…

JavaScript 为网页添加快捷键

为网页添加快捷键即为网页添加onkeydown事件。 FireFox里获取键入键的ASCII码与IE获取是有些差别的。因为FF里没有Event对象。 但FF里事件触发方法中默认传送其事件对象。 即我们在JS里写该事件方法时,要多加一个参数。 例: <sc...…

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。