本文章对mootools formcheck插件进行改进,//注意，这里不对FormChekc源码做详细分析，仅仅简单介绍下怎么扩展的，且后面会付上扩展后的js文件和使用手册。
Mootools FormCheck 下载地址：http://mootools.floor.ch/en/download/
去年进公司的时候接触到了一种新的JS前端框架技术Mootools，它的语法与JQuery比较相似，个人觉得它与JQuery最大的区别在于Mootools提供面向对象的编程方式。作为应用系统基本上大部分页面都有表单，而对表单的较验则是用的FormCheck插件，我在用FormCheck插件的时候发现以下不爽的问题：
1、验证表达式的配置太难看了。validate['required'] 我觉得里面这个单引号多余.
2、在有的情况下想自定义一个Function来处理数据的验证，这个FormCheck冒似没有提供。因为FormCheck是使用正则表达式来验证的数据的，它无非就是调用正则的test方法来验证，也许你会想到用下面这种方式来变通：
//...省略了其它配置
regexp:{
customValidate:{
test:function(v){
//do something...
return true/false;
}
}
}
//...省略了其它配置
//这样配置验证表达式：class="validate['customValidate']"
这样做确实可以，我一开始就是这样做的，但是后来发现有些需求需要根据输入的值做一些更人性化的提示，完蛋了，它彻底的不支持，没办法只好看源代码改咯....
第一步：去掉那讨厌的单引号。
找到register : function(el, position)方法//这个方法是给当前的输入框注册验证器的
在这个方法的下面添加如下方法代码：
/**
* 从这类字符串( "required",c{validatePassword} )中分割出表达式列表
* @param exps
* @param splitChar
* @returns {Array}
* @private
*/
_getExpressions:function(exps,splitChar){
splitChar=splitChar||',';
var expressions=new Array(),sb=new Array(),methodCount=0,blockCount=0,arrayCount=0,c;
for(var i=0;i<exps.length;i++){
c=exps.charAt(i);
if(c=='('){
methodCount++;
}else if(c==')'){
methodCount--;
}else if(c=='{'){
blockCount++;
}else if(c=='}'){
blockCount--;
}else if(c=='['){
arrayCount++;
}else if(c==']'){
arrayCount--;
}else if(c==splitChar&&methodCount==0&&blockCount==0&&arrayCount==0){
expressions.push(sb.join(''));
sb.splice(0,sb.length);
continue;
}
sb.push(c);
}
if(sb.length!=0){
expressions.push(sb.join(''));
}
return expressions;
},
然后修改register : function(el, position)方法内的代码如下：
register : function(el, position) {
el.validation = [];
el.getProperty("class").split(' ').each(function(classX) {
if (classX.match(/^validate(\[.+\])$/)) {
var valid = true;
/******************* Modify BEGIN*************************/
//注掉下面这行代码
//var validators = eval(classX.match(/^validate(\[.+\])$/)[1]);//正是因为这句话导致validate中的表达式一定得用引号括住
var validators=[];
var vStr = classX.match(/^validate\[(.+)\]$/)[1];
this._getExpressions(vStr).each(function(item){
if(item.charAt(0)=="'" || item.charAt(0)=='"'){//忽略引号 做兼容
validators.push(item.substring(1,item.length-1));
}else{
validators.push(item);
}
});
delete vStr;
/*******************Modify END*************************/
//...这里省略了其余的代码
第二步：增加自定义验证方式
在类的options下面加入如下属性
customValidation:{
_compare:function(v1,v2,exp){
if(v1&&v1!=''&&v2&&v2!=''){
var numRgx=/^\d+$/;
if(numRgx.test(v1)&&numRgx.test(v2)){
if(eval([v1,exp,v2].join('')))return true;
}else{
if(eval(["'",v1,"'",exp,"'",v2,"'"].join('')))return true;
}
return false;
}
return true;
},
gt:{
msg:"当前值必需大于 \"%{minValue}\".",
fn:function(v,minValue,el){
if(!this.options.customValidation._compare(v,minValue,">=")){
return {minValue:minValue};
}
return true;
}
},
ge:{
msg:"当前值必需大于等于 \"%{minValue}\".",
fn:function(v,minValue,el){
if(!this.options.customValidation._compare(v,minValue,">=")){
return {minValue:minValue};
}
return true;
}
},
eq:{
msg:"当前值必需是 \"%{value}\".",
fn:function(v,newValue,el){
if(!this.options.customValidation._compare(v,newValue,"==")){
return {value:newValue};
}
return true;
}
},
nq:{
msg:"当前值不能等于 \"%{value}\".",
fn:function(v,value,el){
if(!this.options.customValidation._compare(v,value,"!=")){
return {value:value};
}
return true;
}
},
lt:{
msg:"当前值必需小于 \"%{value}\".",
fn:function(v,newValue,el){
if(!this.options.customValidation._compare(v,newValue,"<")){
return {value:newValue};
}
return true;
}
},
le:{
msg:"当前值必需小于等于 \"%{value}\".",
fn:function(v,newValue,el){
if(!this.options.customValidation._compare(v,newValue,"<=")){
return {value:newValue};
}
return true;
}
},
range:{
msg:"当前值需在\"%{begin}\"至\"%{end}\"之间.",
fn:function(v,begin,end){
if(v!=''){
if(v>=begin&&v<=end){
return true;
}else{
return {begin:begin,end:end};
}
}
return true;
}
},
fileSuffix:{
msg:"文件类型必需是 %{suffixes} 文件.",
fn:function(v,suffix){
suffix=$splat(suffix);
var suf=v.lastIndexOf('.');
if(suf!=-1){
suf=v.substr(suf+1).toLowerCase();
if(suffix.some(function(sf){
return suf==sf.toLowerCase();
})){
return true;
}
}
return {suffixes:suffix.join("、")};
}
}
}
找到validate : function(el)方法//此方法在el需要被验证的时候触发
在此validate 方法下面加入以下方法:
/**
* 这个Function负责执行验证函数里面的参数
*/
_EXPRESSION_EXECUTE_FN:new Function("return eval(arguments[0])"),
/**
* 从表达式中获取结果
* @param exp
* @param scope
* @returns {*}
* @private
*/
_getResultByExp:function(exp,scope){
return this._EXPRESSION_EXECUTE_FN.call(scope||window,exp);
},
找到validate方法下的el.validation.each(function(rule) {代码段
在第一个else的最后面加入如下代码：
/************************** Modify Begin ****************************/
var customExpRegx=/^c{(.+)}/i;
var cExp=rule.match(customExpRegx),me=this;
if(cExp){
var exp=cExp[1];
var exps=me._getExpressions(exp);
exps.each(function(e){
var v,vh,vr,args=[el.get('value')];
if(e.indexOf('(')!=-1){//处理传参的情况
exr=e.match(/^(\S+?)\((.+)\)/);
v=exr[1];
me._getExpressions(exr[2]).each(function(arg){
args.push(
me._getResultByExp(arg,el)
);
},me);
}else{
v=e;
}
args.push(el);
vh=me.options.customValidation[v];//从配置中取得验证器方法
if(vh){
if($type(vh)=='function'){
vr=vh.apply(me,args);
}else{
vr=vh.fn.apply(me,args);
}
if(vr===true){
el.isOk=el.isOk&&true;
}else{
el.isOk=false;
if($type(vr)=='object'){//处理提示消息绑定值的情况
el.errors.push(vh.msg.replace(/\%{(\w+)}/g,function(){
var vm=vr[arguments[1]];
if($type(vm)=='array'){
return vm.join(',');
}else{
return vm;
}
}));
}else if($type(vr)=='string'){//返回字符串直接将其作为提示信息
el.errors.push(vr);
}else{
el.errors.push(vh.msg||'当前值不合法');
}
}
}
},this);
}
/************************** Modify End ****************************/
完事...
示例：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" src="mootools-1.2.5-core-yc.js"></script>
<script type="text/javascript" src="mootools-1.2.5.1-more.js"></script>
<link media="screen" rel="stylesheet" href="theme/blue/formcheck.css" type="text/css">
<script type="text/javascript" src="lang/en.js"></script>
<script type="text/javascript" src="formcheck.js"></script>
<script type="text/javascript">
window.addEvent("domready",function(){
new FormCheck('form', {
submitReload:1,
display : {
showErrors:1,
indicateErrors : 1,
fadeDuration : 1000
},
customValidation:{
validatePassword:function(v){
if(v==null||v=='')return true;
if(v.length<6){
return "密码长度要大于6位哦，亲";
}
var pl=0;
if(/\d/.test(v)){
pl++;
}
if(/[a-zA-Z]/.test(v)){
pl++;
}
if(/[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/.test(v)){
pl++;
}
if(pl<=1){
return "密码再设复杂点吧，亲";
}
return true;
}
}
});
});
</script>
</head>
<body>
<div style="position: absolute; left:30%;top:30%">
<form id="form" action="http://www.baidu.com" method="POST">
<lable>
email:<input type="text" name="email" class="validate[required,email]"/></br>
password:<input type="text" class='validate["required",c{validatePassword}]' name="password" id="password" /><br/>
confirmation:<input type="text" class="validate[c{eq($('password').get('value'))}]" name="confirm" /> <br/>
<input type="submit" value="submit"/>
</lable>
</form>
</div>
</body>
</html>
效果如下：
详细的使用示例请参看rar附件中的使用文档....
将FormCheck1.6.rar中的formcheck.js替换原来1.6版本下的forcheck.js（不用担心，完全兼容原来的）
相关推荐
这个库的设计理念是为开发者提供一种优雅、高效的方式来编写可维护的前端代码，它强调代码的组织结构和模块化，使得大型项目能够更易于管理和扩展。 MooTools的核心特点包括： 1. **面向对象编程**：MooTools基于...
开发者可能定义了自定义的MooTools类，扩展了MooTools的内置组件，或者实现了特定的事件处理逻辑。阅读和理解这些代码对于深入学习MooTools的使用和优化至关重要。 总的来说，MooTools为开发者提供了强大而灵活的...
- **与其他库的关系**：MooTools与jQuery、Prototype等其他JavaScript库在功能上有许多相似之处，但MooTools更注重代码的组织结构和可维护性。 - **互操作性**：MooTools允许在项目中与其他库共存，通过NoConflict...
对于Joomla爱好者而言，Mootools不仅是Joomla自带的JS库，而且是开发Joomla扩展和模板时不可或缺的一部分。 Mootools的核心理念是模块化设计，它将JavaScript的功能拆分成一系列可复用的模块，如核心、DOM、事件、...
它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。Mootools从Prototype.js中汲取了许多有益的设计理念，语法也和其极其类似。但它提供的功能要比Prototype.js多，整体设计也比Prototype.js要相对...
2. **Class系统**：MooTools的`Class`系统是其核心之一，它允许创建可复用的面向对象结构。`Class`支持继承、混入（mixins）以及初始化和清理方法，使得类的设计更加灵活。源码分析可以帮助我们理解类是如何被实例化...
**MooTools 详解** MooTools 是一个轻量级且功能强大的JavaScript库，它提供了一种优雅的方式来处理DOM操作、事件、动画效果以及Ajax交互。这个“mootools详细教程chm”包含了丰富的资源，旨在帮助开发者深入理解和...
Mootools本身是一个轻量级、模块化的JavaScript库，强调代码的优雅和性能，而Mootools UI则进一步扩展了这个库的功能，专注于UI层面的开发。 Mootools UI框架的核心特性包括： 1. **组件化设计**：Mootools UI提供...
MooTools是一个轻量级的JavaScript库，设计思想源自于Prototype，但两者在实现和功能上有许多不同之处。MooTools 1.2是该库的一个稳定版本，它提供了丰富的功能集，包括DOM操作、事件处理、动画效果、Ajax交互等。这...
开发者可以通过`extend`方法来扩展已有类，通过`implement`方法添加新方法或属性。此外，`Object`类是所有MooTools类的基础，提供了便利的操作如`keys`（获取对象所有键）和`values`（获取对象所有值）。 2. **DOM...
MooTools 是一个轻量级、模块化的JavaScript...通过阅读文档，开发者可以找到特定功能的使用方法，通过HTML文件查看效果并模仿实现，而源代码则有助于理解MooTools的内部机制，对于定制和扩展MooTools功能非常有帮助。
8. **插件机制**：MooTools的插件机制允许开发者轻松扩展框架功能，创建自定义组件，满足特定项目需求。 9. **兼容性**：MooTools致力于跨浏览器兼容性，确保在多种浏览器环境下运行良好，减少了开发者处理兼容问题...
**前端项目-mootools-more.zip** 是一个包含MooTools扩展库的压缩包，主要针对的是使用MooTools JavaScript框架进行前端开发的项目。MooTools是一个轻量级且高度模块化的JavaScript库，旨在提高开发效率，提供面向...
比prototypejs更丰富、更强大的mootools.js插件 1.4.5 core下载。mootools.js可以生成较为复杂的、动态的网页交互效果，和jquery一样强大。。Mootools从Prototype.js中汲取了许多有益的设计理念，语法也和其极其类似...
MooTools是一个轻量级的JavaScript库，设计用于简化Web开发中的DOM操作、事件处理、动画效果以及Ajax交互。1.2.3是MooTools的一个稳定版本，它提供了丰富的功能集，同时保持了高性能和良好的浏览器兼容性。在本文中...
MooTools 是一个轻量级且模块化的JavaScript库，旨在提供高效和可扩展的Web开发工具。它遵循了“More, Please”的理念，强调优雅的代码和强大的功能。MooTools 1.2 是这个库的一个重要版本，提供了许多改进和优化，...
- **自定义扩展**：MooTools允许用户扩展其核心功能，创建自己的类和插件，以适应特定项目需求。 5. **与其他库的比较** - **与jQuery**：MooTools和jQuery都是流行的JavaScript库，但MooTools更注重面向对象编程...
- **类与对象**：MooTools的核心特性之一是其面向对象的编程模型，它允许创建类并实例化对象，提供继承、封装和多态性。 - **DOM操作**：MooTools提供了简洁的API来查找、添加、删除和修改HTML元素，简化了DOM操作...
它能够帮助你更快，更简单地编写可扩展和兼容性强的JavaScript代码。Mootools从Prototype.js中汲取了许多有益的设计理念，语法也和其极其类似。但它提供的功能要比Prototype.js多，整体设计也比Prototype.js要相对...
7. **模块化**：MooTools遵循CommonJS模块规范，开发者可以通过`.extend()`方法将功能扩展到核心类，或者创建自定义的类来封装特定的下拉菜单逻辑。 8. **可扩展性**：Mootools的动态下拉菜单设计可以轻松适应不同...