YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Downloads » YUI 和 jQuery 版本的 Validator 校验框架

YUI 和 jQuery 版本的 Validator 校验框架

程序简介:

Validator我分别用 YUI 2.6 和 jQuery 写了两个库的校验框架,基本上能够应付常用的校验工作了。校验恐怕是前端工程师最头疼的工作之一,希望使用这个框架能帮助大家提高开发效率。其实在阿里巴巴国际站开发POST表单项目的时候就是利用这个校验框架的基础开发了POST表单的校验框架。

演示地址:YUI 版本 jQuery 版本

// 程序调用代码
(function(){	
	var byId = YUI.byId, 
	    idType = byId('card-type'), 
		Validator = YUI.Validator, 
		validateSelectWithIdCard = function(){
		var val = parseInt(idType.value, 10), cardOption = {
			"target": "id-card",
			"rule": "idcard",
			"tipCnt": "idcard-txt"
		}, anyOption = {
			"target": "id-card",
			"rule": "require",
			"tipCnt": "idcard-txt"
		};
		
		switch (val) {
			case 1:
				Validator.add(cardOption);
				if (YUI.indexOf(Validator.options, anyOption) > -1) {
					Validator.remove(anyOption);
				}
				break;
			case 2:
				Validator.add(anyOption);
				if (YUI.indexOf(Validator.options, cardOption) > -1) {
					Validator.remove(cardOption);
				}
				
		}
	};
	
	validateSelectWithIdCard();	
    YUI.on(idType, 'change', function(){
		validateSelectWithIdCard();
	});	
	
	Validator.setup({
		"form": "validator-form"
	}).add({
	    "target": "username",
		"rule": "username",
		"fn": function(){
			return true;
		}
	}).add({
		"target": "password",
		"rule": "password",
		"plus": true
	}).add({
		"target": "confirm-password",
		"rule": "password",
        "to": "password" 
	}).add({
		"target": "age",
		"rule": "number"
	}).add({
		"target": "age",
		"rule": "number"
	}).add({
		"target": "birthday",
		"rule": "date"
	}).add({
		"target": "card-type",
		"rule": "require"
	}).add({
		"target": "email",
		"rule": "email"
	}).add({
		"target": "qq",
		"rule": "qq"
	}).add({
		"target": "telephone",
		"rule": "phone"
	}).add({
		"target": "mobile",
		"rule": "mobile"
	}).add({
		"target": "phone",
		"rule": "phone||mobile",
		"tips": "请输入您的手机或座机电话号码!",
		"warn": "您输入的联系电话号码格式不正确!"
	}).add({
		"target": "zip-code",
		"rule": "zip"
	}).add({
		"target": "ip-address",
		"rule": "ip"
	}).add({
		"target": "url",
		"rule": "url"
	}).add({
		"target": "message",
		"rule": "require",
		"plus": function(){
			var cmt = byId('message'), 
			    counter = byId('text-counter'), 
				len = cmt.value.length, 
				max = 300,
				val = max - len;
				
			if (val >= 0) {
				counter.innerHTML = val;
			}
			else {
			    cmt.value = cmt.value.substring(0, max); 
			}
		}
	});
})();

下载地址:validator.zip

程序特点:

  1. 支持大部分的常规校验
  2. 支持联动校验
  3. 支持密码安全级别校验
  4. 支持tab切换校验
  5. 支持输入框获得焦点提示
  6. 自带校验提示显示
  7. 支持Ajax校验
  8. 特殊校验可以自定义校验函数

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:YUI 和 jQuery 版本的 Validator 校验框架

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)