`
风过无声
  • 浏览: 88025 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jQuery Validate 1.1.2

 
阅读更多

1.简介

JQuery-validate是基于JQuery的一个JS校验框架。

其中1.1.2依赖与JQuery1.7+

2.使用

1）input组件中通过属性来指定校验类型

--简单校验类型

data-required：必填，支持text，radio，checkbox，select等所有的组件

data-pattern：基于正则表达式的校验

data-trim：校验时是否去除前后空白

data-ignore-case：校验时大小写不敏感，默认为true

data-mask：

data-prepare：

--复杂校验类型

data-conditional：通过调用validate方法中的conditionnal参数中指定的方法进行校验，多个方法用空格分隔，每个方法需返回boolean类型的值。

data-validate：调用扩展的校验规则。

2）通过向jQuery.fn.validate(options)方法中传递options参数来设置校验特性

--普通参数

conditional：定义data-conditional的使用方法

filter：需要校验组件的选择器

nameSpace：

onBlur：失去焦点时触发该组件的校验，默认为false

onChange：值改变时触发该组件的校验，默认为false

onKeyup：keyup事件发生时触发该组件的校验，默认为false

onSubmit：表单提交时触发该表单的校验，默认为true

prepare：

sendForm：表单校验通过后是否自动提交，默认为true

waiAria：

--回调方法

valid：表单校验通过时调用，方法中this为该表单，提供两个参数event和options

invalid：表单失败通过时调用，方法中this为该表单，提供两个参数event和options

eachField：每个控件校验时调用，方法中this为该控件，提供三个参数event，status和options

eachInvalidField：每个控件校验失败时调用，方法中this为该控件，提供三个参数event，status和options

eachValidField：每个控件校验成功时调用，方法中this为该控件，提供三个参数event，status和options

3.错误描述

<form>
    <input type="text" data-describedby="messages" data-description="test" />

    <span id="messages"></span>
</form>

$('form').validate({
    description : {
        test : {
            required : '<div class="error">Required</div>',
            pattern : '<div class="error">Pattern</div>',
            conditional : '<div class="error">Conditional</div>',
            valid : '<div class="success">Valid</div>'
        }
    }
});

4.例子

1）简单校验类型

<html>
	<head>
		<meta charset="UTF-8" />
		<title>Simple</title>
		<script src="jquery-2.1.1.js"></script>
		<script src="jquery-validate.min.js"></script>
		<script language="javascript">
		<!--
		$(function(){
			$("#simple").validate({
				onBlur: true,
				sendForm: false,
				valid: function() {
					alert("ajax request");
				},
				description: {
					name: {
						required: "请输入用户名",
						pattern: "用户名仅能包含a-z的英文字母"
					}
				}
			});
		});
		-->	
		</script>
	</head>
	<body>
		<form id="simple">
			<div>
			<label>
				用户名：
				<input id="name" data-required data-trim data-ignore-case="false" data-pattern="^[a-z]+$" 
						data-describedby="messages" data-description="name"/>	
				<span id="messages"></span>
			</label>
			</div>
		</form>
	</body>
</html>

2）data-conditional

<html>
	<head>
		<meta charset="UTF-8" />
		<title>data-conditional</title>
		<script src="jquery-2.1.1.js"></script>
		<script src="jquery-validate.min.js"></script>
		<script language="javascript">
		<!--
		$(function(){
			$("#simple").validate({
				onBlur: true,
				sendForm: false,
				valid: function() {
					alert("ajax request");
				},
				conditional: {
					valid_name: function() {
						var name = $.trim($(this).val());
						if (name == "") {
							return false;
						}
						if (!name.match(/^[a-z]+$/)) {
							return false;
						}
						return true;
					}
				},
				description: {
					name: {
						conditional: "用户名不能为空，并且仅能包含a-z的字母"
					}
				}
			});
		});
		-->	
		</script>
	</head>
	<body>
		<form id="simple">
			<div>
			<label>
				用户名：
				<input id="name" data-conditional="valid_name" 
						data-describedby="messages" data-description="name"/>	
				<span id="messages"></span>
			</label>
			</div>
		</form>
	</body>
</html>

3）data-validate

<html>
	<head>
		<meta charset="UTF-8" />
		<title>data-conditional</title>
		<script src="jquery-2.1.1.js"></script>
		<script src="jquery-validate.min.js"></script>
		<script language="javascript">
		<!--
		$(function(){
			$("#simple").validate({
				onBlur: true,
				sendForm: false,
				valid: function() {
					alert("ajax request");
				},
				description: {
					name: {
						valid: "校验通过",
						required: "请输入用户名",
						pattern: "用户名仅能包含a-z的英文字母"
					}
				}
			});
			$.validateExtend({
				valid_name: {
					required: true,
        	pattern: /^[a-z]+$/
				}	
			});
		});
		-->	
		</script>
	</head>
	<body>
		<form id="simple">
			<div>
			<label>
				用户名：
				<input id="name" data-validate="valid_name" 
						data-describedby="messages" data-description="name"/>	
				<span id="messages"></span>
			</label>
			</div>
		</form>
	</body>
</html>

5.参考文档

https://github.com/DiegoLopesLima/Validate#readme

分享到：
| 夏令时
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics