2010.08.19——— 我佛山人 validator v4.0 详解

2010.08.19——— 我佛山人 validator v4.0 详解


首先，大致介绍一下：

1. 引入js和css

<link href="css/validator.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/mootools.js" ></script>
<script type="text/javascript" src="js/full-validator.js" ></script>

2. 写法的大体框架

Validator.setup({
	form : 'demo',
	configs : 'xml,attribute,tag,json',
	warns : 'summary, follow, color,class, alert,tips'
})

2.1 form 后面跟的是form标签的id

<form action="my_action_page_url" id="demo">  
... ...   
</form> 

2.2 configs 指定表单验证规则的配置方式 默认为tag 一共有四种

对了 在这里先介绍一下验证的一些属性

for：指定需要此验证的id
rule：指定验证的类型(username，password，email，IdCard 身份证，ip，date，range 范围，qq，mobile等等)
empty：为空时的提示
warn：不符合验证规则的提示
tips：tips或者follow的内容
pass：验证成功显示的内容

2.2.1 xml xml的方式验证

当configs指定为xml方式验证时，可以设置一个xml的属性

Validator.setup({   
    form : 'demo',  //指定要验证的表单的id   
    configs : 'xml',//指定表单验证规则的配置方式   
    xml : {    
        url : 'my_dir/xml_file_name.xml'        //指定XML文件的路径   
    }   
});

xml属性里面可以配置路径和xpath 详见chm文档的"使用XML文件配置"和XmlReader

xml的格式如下：

<?xml version="1.0" encoding="UTF-8"?>  
<formset>  
    <form name="demo" path="/validator/validator.html">  
    
        <item for="IPAddress" rule="date" empty="请填写您的出生年月日" warn="您输入的日期不存在或格式不正确" tips="请输入一

次您的出生年月日(格式：1980-01-01)" pass="验证正确了" />  
        
    </form>  
</formset>

2.2.2 attribute attribute的方式验证

当configs指定为attribute方式验证时

Validator.setup({   
    form : 'demo',          //指定要验证的表单的id   
    configs : 'attribute'   //指定表单验证规则的配置方式   
});

详见chm文档的"使用属性配置"和AttributeReader

2.2.3 tag tag的方式验证

当configs指定为tag方式验证时，可以设置一个tag的属性

Validator.setup({       
   form : 'demo',  //指定要验证的表单的id       
   configs : 'tag',    //指定表单验证规则的配置方式       
   tag : { ns : 'my', name : 'tag'} //name：自定义标签的名字 默认v，ns：自定义标签的命名空间 默认ui  
});

tag属性里面可以name和ns 详见chm文档的"使用自定义标签配置"和TagReader

tag的格式如下：

<input id="IPAddress" name="IPAddress" type="text" value="192.168.128.254" /><ui:v for="IPAddress" rule="ip" empty="请填写您

的当前IP地址" warn="您输入的IP不存在或格式不正确" pass="验证正确了" /> 

2.2.4 json json的方式验证

当configs指定为json方式验证时，可以设置一个xml的属性

Validator.setup({   
    form : 'demo',  //指定要验证的表单的id   
    configs : 'json',   //指定表单验证规则的配置方式   
    json : {    
        url : 'my_dir/json_file_name.xml'   //指定JSON文件的路径   
    }   
});

json属性里面可以配置wait,utl和type 详见chm文档的"使用JSON数据件配置"和JsonReader

json的格式如下：

{"rules" : [{"for":"Card", "rule":"IdCard", "empty":"号码不允许为空", "warn":"号码不正确", "tips":"请输入15位或18位的身份

证", "pass":"验证正确"},{"for":"Name", "rule":"username", "empty":"不允许为空", "warn":"验证错误", "tips":"昵称是由英文与下

划线组成的4~20位的字符", "pass":"验证正确",  "require" : "false"},{"for":"Password", "rule":"password",  "level":"2", 

"empty":"密码不允许为空", "warn":"密码安全度太低", "tips":"请输入6~16位数字、字母及特殊字符的混合字符", "pass":"验证正确"}]} 

2.3 warns 信息的显示方式,默认为跟随方式follow 一共有6种

2.3.1 alert 用alert显示错误信息

Validator.setup({   
    form : 'demo',  //指定要验证的表单的id   
    warns : 'alert',    //指定表单验证的信息显示方式   
    title : '提交失败，请按以下提示检查您的输入：'    //用显示整个表单验证的所有失败信息的第一行提示   
});

 

title : 当warns中使用summary或alert时，提供的第一行内容提示

详见chm文档的"使用警告信息提示"和AlertMessenger

2.3.2 follow 用跟随方式显示错误信息

Validator.setup({       
  form : 'demo',  //指定要验证的表单的id       
  warns : 'follow'    //指定表单验证的信息显示方式       
  follow : {               
	warn : 'msg block', //验证失败时的样式               
	tips : 'msg tips',          //提示信息的样式               
	remote : 'msg loading',//远程验证时的样式               
	pass : 'msg pass',      //验证成功时的样式               
	blur : 'msg'                //失去焦点时的提示样式       
  }   
});

  

follow属性主要用来修改默认的css类名

详见chm文档的"使用跟随信息提示"和FollowMessenger

2.3.3 tips 用浮动框显示错误信息

Validator.setup({       
  form : 'demo',  //指定要验证的表单的id       
  warns : 'tips'  //指定表单验证的信息显示方式       
  tips : {               
	offset : {                   
	  x : 0,  //浮动层左下角相对于表单项左上角的横坐标偏移量                   
	  y : 0       //浮动层左下角相对于表单项左上角的纵坐标偏移量               
	},               
	'class' : 'tooltips'    //浮动层使用的CSS类名,注意class前后必须带引号           
  }   
}); 

详见chm文档的"使用浮动信息提示"和TipsMessenger

2.3.3 class 用class样式显示错误信息

Validator.setup({   
    form : 'demo',  //指定要验证的表单的id   
    warns : 'class' //指定表单验证的信息显示方式   
    'class' : {    
            warn : 'style-warn',    //指定验证失败时使用的CSS类   
            pass : 'style-pass'     //指定验证成功时使用的CSS类   
        }   
});  

详见chm文档的"使用样式信息提示"和ClassMessenger

2.3.3 color 用颜色样式显示错误信息

Validator.setup({       
  form : 'demo',  //指定要验证的表单的id       
  warns : 'color' //指定表单验证的信息显示方式       
  color : {           
	warn : 'yellow',    //指定验证失败时文字变成黄色           
	pass : 'black'      //指定验证成功时文字变成黑色       
  }   
});   

详见chm文档的"使用颜色信息提示"和ColorMessenger

2.3.3 summary 用汇总显示错误信息

Validator.setup({   
    form : 'demo',  //指定要验证的表单的id   
    warns : 'summary',//指定表单验证规则的信息显示方式   
    summary : {    
                id : 'summary',     //指定汇总信息显示到的HTML Element的id  <div id="summary" class="summary"></div>    
    },   
    title : '提交失败，请按以下提示检查您的输入：'    //用于显示汇总信息的第一行提示   
}); 

 

汇总信息显示方式只显示验证失败项的失败信息,为了得到更丰富的信息,您可以与浮动提示方式一起使用


详见chm文档的"使用汇总信息提示"和SummaryMessenger