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.参考文档
相关推荐
在网页开发中，jQuery Validate 是一个非常常用的验证插件，用于对用户输入的数据进行校验，确保数据的有效性和完整性。这个插件可以帮助开发者创建复杂的表单验证规则，提高用户体验，减少服务器端的压力。结合 ...
《jQuery Validate插件详解与实例应用》 在Web开发中，表单验证是不可或缺的一环，它能够确保用户输入的数据符合预设的规则，提高数据的准确性和安全性。jQuery Validate是一个强大的JavaScript库，专为jQuery设计...
《jQuery Validate插件详解与应用指南》 在Web开发领域，表单验证是不可或缺的一环，它能够确保用户输入的数据符合预设的规则，从而提高数据的准确性和系统的稳定性。jQuery Validate是一个强大的JavaScript库，专...
首先，`jquery.js`是jQuery的核心库，它是jQuery Validate的基础，没有它，我们无法使用jQuery Validate。确保引入了最新的jQuery版本，以便利用其强大的DOM操作和事件处理能力。 其次，`myvalidate.js`可能是你...
在本文中，我们将深入探讨如何利用jQuery Validate来创建自定义验证样式。 首先，我们从标题"jquery validate 验证自定义样式"开始。jQuery Validate插件默认提供了一些基本的样式，但这些样式可能不能满足所有设计...
解决jquery validate remote 只验证一次的问题
《jQuery Validate验证手册》是针对JavaScript库jQuery的一个插件，主要功能是提供强大的表单验证功能，帮助开发者创建用户友好的、功能丰富的交互式表单。这个插件基于jQuery库，利用JavaScript的强大功能，简化了...
《jQuery Validate插件详解及其应用》 在Web开发中，表单验证是不可或缺的一部分，它确保用户输入的数据符合预设的规则，提高了用户体验并减少了服务器端的负担。jQuery Validate插件是实现这一功能的强大工具，它...
### 修改jQuery Validate默认错误提示显示位置 在网页开发过程中，表单验证是非常重要的一个环节，它不仅能够提高用户体验，还能确保数据的有效性和安全性。jQuery Validate插件是实现表单验证功能的一个强大工具，...
jquery.validate.1.9.0.min.js jquery.validate.1.12.0.min.js jquery.validate.1.13.1.min.js jquery.validate.1.16.0.min.js jquery.validate.1.14.0.min.js jquery.validate.1.15.1.min.js jquery.validate....
jQuery Validate 是一个非常流行的JavaScript库，用于在网页表单中进行验证。这个库极大地简化了对用户输入数据的检查，确保在提交之前满足特定的业务规则。在本篇博文中，我们将深入探讨如何自定义jQuery Validate...
`jQuery Validate`是一个非常流行的JavaScript库，用于在前端进行表单验证。这个库极大地简化了对用户输入数据的检查，确保它们符合特定的规则和格式。`jQuery Validate`结合自定义CSS样式，可以让表单验证既实用又...
jQuery Validate 插件是Web开发中广泛使用的工具，主要用于实现前端表单验证，它极大地简化了用户输入数据的检查过程，提供了丰富的验证规则和自定义方法。在这个“jQuery Validate插件验证表单小练”中，我们将深入...
《jQuery Validate与Struts2整合应用详解》 在Web开发中，前端验证用户输入的数据是必不可少的一环，jQuery Validate插件就是一款强大的JavaScript验证工具，它可以帮助我们方便地实现表单验证。与此同时，Struts2...
《jQuery Validate修改版：提升表单验证体验》 在网页开发中，用户输入的验证是不可或缺的一环，它能够确保用户提交的数据符合预期，避免无效数据的产生，从而提高用户体验和服务器端处理效率。jQuery Validate插件...
在本文中，我们将深入探讨如何使用jQuery Validate插件来创建一个功能完备的注册表单，进行数据提交前的验证。jQuery Validate是一个强大的JavaScript库，它为HTML表单提供了灵活且易于使用的验证规则，确保用户输入...
《关于jQuery Validate Plugin指定需要验证对象的解决方案》 在Web开发中，表单验证是必不可少的一环，确保用户输入的数据符合预设的规则。jQuery Validate Plugin是一款强大的客户端表单验证插件，它使得这一过程...
**jQuery validate 和 form 插件详解** 在网页开发中，用户界面的交互性和数据验证是不可或缺的部分。jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理和动画效果。`jQuery validate` 和 `...
首先，`jQuery Validate`的核心功能是验证用户在表单中输入的数据，确保其符合预设的验证规则。例如，我们可以设定密码必须包含字母、数字、特殊字符等要求，以提高安全性。在提供的例子中，它会检查用户输入的密码...