jQuery.Validate表单验证插件的使用示例详解
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。
请在这里查看示例 validate示例
示例包含
- 验证错误时，显示红色错误提示
- 自定义验证规则
- 引入中文错误提示
- 重置表单需要执行2句话
源码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<title>demo</title>
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/messages_zh.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
}
.red {
color: red;
}
.green {
color: green;
}
</style>
</head>
<body>
<form id="form">
<div>
<input type="text" name="a" />
</div>
<div>
<input type="submit" value="提交">
<input class="reset" type="button" value="重置">
</div>
</form>
</body>
<script>
$(function() {
var validator = $('#form').validate({
submitHandler:function(form){
$('body').append('表单验证成功，发送了一个请求');
},
rules: {
a: {
required: true,
isEven: true,// 使用自定义的验证规则
},
},
messages: {
a: {
required: '<div><span class="red">*</span><span>此项必填</span></div>',
isEven: '<div><span class="red">*</span><span>不是偶数</span></div>',
},
},
// 验证成功后的回调
success: function(label) {
label.html('<div><span class="green">*</span><span>通过验证</span></div>');
}
});
// 自定义验证
jQuery.validator.addMethod('isEven', function(value, element) {
return this.optional(element) || !(value%2);
}, '请输入一个偶数');
// 重置表单
$(".reset").click(function() {
validator.resetForm();// 插件方法-删除错误提示
$('#form')[0].reset();// 原生方法-清空输入内容
});
});
</script>
</html>
相关阅读：
jQuery Validate插件自定义验证规则的方法
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
JQuery validate插件Remote用法大全
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
以上所述是小编给大家介绍的jQuery.Validate表单验证插件的使用示例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
基于Bootstrap+jQuery.validate实现Form表单验证
基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 1.form 表单代码[html] 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>Bootstrap Form Template</title>
-
jquery.validate表单验证插件使用方法解析
为什么要用jquery validate这个表单验证插件:自己写一个通用且功能全面强大的jquery表单验证插件并不容易.jquery validate这个jquery插件几乎可以轻松应对95%以上的表单验证,具体内容如下 使用方式 1.在控件中使用默认验证规则,例子: 电子邮件(必填) <input id="email" class="required email" value="email@" /> 2.可以在控件中自定义验证规则
-
jquery表单验证插件（jquery.validate.js）的3种使用方式
jquery 验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery 插件和 jquery 验证插件: 第一步:引入插件 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jq
-
jquery.validate表单验证插件使用详解
今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js 它是与jquery一起结合用来使用的,使用它是非常方便,只需写校验规则和错误字段即可. 我们常见的校验规则有以下几种: (1)required:true 必输字段 (2)email:true 必须输入正确格式的电子邮件 (3)date:true
-
基于Bootstrap+jQuery.validate实现表单验证
这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤为重要. 用户注册和登录其实往往比我们想象的难.就比如表单校验,里面涵盖的内容其实挺多,就前台而言,你需要了解: 1.正则表达式的基本了解 其实正则并不难,并且在学会后能带给你极大的成就感,享受那种事半功倍的效果吧. 2.ajax异步请求 在验证用户名是否存在.用户登录时账号或者密码错误时给出相应的
-
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证
-
功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1).html表单结构:包含需要校验的表单元素: 2).js逻辑控制:在需要校验的表单元素上绑定事件,如点
-
jQuery.Validate表单验证插件的使用示例详解
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 请在这里查看示例 validate示例 示例包含 验证错误时,显示红色错误提示 自定义验证规则 引入中文错误提示 重置表单需要执行2句话 源码示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
-
jQuery Validate表单验证插件 添加class属性形式的校验
本文实例介绍了jQuery Validate 表单验证插件,添加class属性形式的校验,分享给大家供大家参考,具体内容如下 效果如下: 一.jQuery表单验证插件,添加class属性形式的校验 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery表单验证插件----添加cla
-
jQuery Validate表单验证插件的基本使用方法及功能拓展
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数:
-
jQuery Validate表单验证插件实现代码
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提醒 对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校
-
jQuery.validate.js表单验证插件的使用代码详解
Validate Validate是基于jQuery的一款轻量级验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML.CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证. 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi
-
jquery validate表单验证插件
对于初学者而言,html表单验证是一项极其琐碎的事情.要做好表单验证,需要准备以下基本要素: 1.html表单结构:包含需要校验的表单元素: 2.js逻辑控制:在需要校验的表单元素上绑定事件,如点击.获取焦点.失去焦点等事件,并设置这些事件对应的执行函数: 3.css样式设置:针对需要校验的表单元素,需要设置默认的初始样式,以及触发元素绑定事件后的变化样式. 这3类基本要素中,html表单结构的创建相对简单.表单验证的重点和难点在于如何利用js及时有效地提醒用户有关表单操作的信息.这里我参考了百
-
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
本文实例讲述了Bootstrap简单实用的表单验证插件BootstrapValidator用法.分享给大家供大家参考,具体如下: Bootstrap是现在非常流行的一款前端框架,这篇来介绍一款基于Bootstrap的验证插件BootstrapValidator. 先来看一下效果图(样式是不是还不错O(∩_∩)O哈哈~). Bootstrapvalidator下载地址:https://github.com/nghuuphuoc/bootstrapvalidator/? 引入对应的CSS和JS <l