jQuery validate验证插件使用详解


Posted in Javascript onMay 11, 2016

Validate验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML、CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证。

Description

浏览器支持:IE7+ 、Chrome、Firefox、Safari、Mobile Browser

jQuery版本:1.7.0+

Usage
载入jQuery、validate

<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery-validate.js"></script>

DOM标签验证规则填写

<div class="form_control">
 <input class="required" value="315359131@qq.com" type="text" name="email" data-tip="请输入您的邮箱" data-valid="isNonEmpty||isEmail" data-error="email不能为空||邮箱格式不正确">
</div>
<div class="form_control">
 <select class="required" data-valid="isNonEmpty" data-error="省份必填">
  <option value="">请选择省份</option>
  <option value="001">001</option>
  <option value="002">002</option>
 </select>
</div>

给需要验证的表单元素的class填入required(不建议在这个class上做其他样式)。
建议input用独立div包裹,因为验证的message是从当前input的父元素上append生成。
data-tip:在尚未验证而获取焦点时出现的提示。
data-valid:验证规则,若有组合验证,以||符号分割。
data-error:验证错误提示,对应data-valid,以||符号分割。
单选/复选比较特殊,需要添加元素包裹单选/复选集合,并在包裹元素上加验证规则。

<div class="form_control">
 <span class="required" data-valid="isChecked" data-error="性别必选" data-type="radio">
   <label><input type="radio" name="sex">男</label>
   <label><input type="radio" name="sex">女</label>
   <label><input type="radio" name="sex">未知</label>
 </span>
</div>
<div class="form_control">
 <span class="required" data-valid="isChecked" data-error="标签至少选择一项" data-type="checkbox">
   <label><input type="checkbox" name="label">红</label>
   <label><input type="checkbox" name="label">绿</label>
   <label><input type="checkbox" name="label">蓝</label>
 </span>
</div>

JS调用

//**注意:必须以表单元素调用validate**
 $('form').validate({
  type:{
   isChecked: function(value, errorMsg, el) {
    var i = 0;
    var $collection = $(el).find('input:checked');
    if (!$collection.length) {
     return errorMsg;
    }
   }
  },
  onFocus: function() {
   this.parent().addClass('active');
   return false;
  },
  onBlur: function() {
   var $parent = this.parent();
   var _status = parseInt(this.attr('data-status'));
   $parent.removeClass('active');
   if (!_status) {
    $parent.addClass('error');
   }
   return false;
  }
 });

jQuery validate验证插件使用详解

表单提交前的验证

$('form').on('submit', function(event) {
  event.preventDefault();
  $(this).validate('submitValidate'); //return true or false;
 });

validate内置验证规则

required:true 必输字段
remote:"check.php" 使用ajax方法调用check.php验证输入值
email:true 必须输入正确格式的电子邮件
url:true 必须输入正确格式的网址
date:true 必须输入正确格式的日期
dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
number:true 必须输入合法的数字(负数,小数)
digits:true 必须输入整数
creditcard: 必须输入合法的信用卡号
equalTo:"#field" 输入值必须和#field相同
accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
minlength:10 输入长度最小是10的字符串(汉字算一个字符)
rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
range:[5,10] 输入值必须介于 5 和 10 之间
max:5 输入值不能大于5
min:10 输入值不能小于10

例子:
验证用户名,密码,确认密码,主页,生日,邮箱
首先引入Jquery、引入jquery.validate.js、引入messages_cn.js并且为表单定义一个id,为需要验证的控件定义name属性,并赋值,此插件使用的是控件的name属性,而非id。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="jquery邮箱验证.aspx.cs" Inherits="练习.jquery邮箱验证" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>
  <style type="text/css">
  #aa{ color:Red;}
  </style>
   <script src="Jquery1.7.js" type="text/javascript"></script>
  <script src="jquery.validate.js" type="text/javascript"></script>
  <script src="messages_cn.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {


    $('#form1').validate({
      rules: {
        username: { required: true, minlength: 6, maxlength: 12 },
        password: { required: true, minlength: 6 },
        passwordok:{required: true, equalTo: "#password"},
        index: { required: true, url: true },
        birthday: { required: true, dateISO: true },
        bloodpress:{required: true,digits:true},
        email: { required: true, email: true }
    },
    errorshow: function (error, element) {
      error.appendTo(element.siblings('span'));
    }

 })
    })
  
  </script>
</head>
<body>
  <form id="form1" runat="server">
  <div>
  <table>
  <tr><td>用户名:</td><td>
  <input name="username" type="text" /><span id="aa">*</span></td></tr>
  <tr><td>密码:</td><td>
  <input id="password" name="password" type="text" /><span id="aa">*</span></td></tr>
  <tr><td>确认密码:</td><td>
  <input id="repassword" name="passwordok" type="text" /><span id="aa">*</span></td></tr>
   <tr><td>主页:</td><td>
  <input name="index" type="text" /><span id="aa">*</span></td></tr>
  <tr><td>生日:</td><td>
  <input name="birthday" type="text" /><span id="aa">*</span></td></tr>
  <tr><td>血压:</td><td>
  <input name="bloodpress" type="text" /><span id="aa">*</span></td></tr>
 <tr><td>邮箱:</td><td><input name="email" type="text" /><span id="aa">*</span></td></tr>
 <tr><td></td><td>
  <input id="Button1" type="button" value="button" /></td></tr>
</table>
  </div>
  </form>
</body>
</html>

实现如下效果:

jQuery validate验证插件使用详解

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
用 Javascript 验证表单(form)中的单选(radio)值
Sep 08 Javascript
jquery下onpropertychange事件的绑定方法
Aug 01 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
node.js开机自启动脚本文件
Dec 24 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
js限制input标签中只能输入中文
Jun 26 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
javaScript中定义类或对象的五种方式总结
Dec 04 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
Jquery插件仿百度搜索关键字自动匹配功能
May 11 #Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 #Javascript
React.js入门实例教程之创建hello world 的5种方式
May 11 #Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 #Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 #Javascript
使用JavaScript实现ajax的实例代码
May 11 #Javascript
jQuery的框架介绍
May 11 #Javascript
You might like
PHP高手需要要掌握的知识点
2014/08/21 PHP
PHP中$_SERVER使用说明
2015/07/05 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
JTrackBar水平拖动效果
2007/07/15 Javascript
Mootools 1.2教程 类(一)
2009/09/15 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
ionic选择多张图片上传的示例代码
2017/10/10 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
[06:11]2014DOTA2国际邀请赛 专访团结一心的VG战队
2014/07/21 DOTA
Python中实现字符串类型与字典类型相互转换的方法
2014/08/18 Python
举例讲解Python中字典的合并值相加与异或对比
2016/06/04 Python
Python中表达式x += y和x = x+y 的区别详解
2017/06/20 Python
Python实现进程同步和通信的方法
2018/01/02 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
python中线程和进程有何区别
2020/06/17 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
ASOS英国官网:英国在线时装和化妆品零售商
2017/05/19 全球购物
公务员个人自我评价分享
2013/11/06 职场文书
管理心得体会
2013/12/28 职场文书
办护照工作证明范本
2014/01/14 职场文书
商业活动邀请函
2014/02/04 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
合作经营协议书
2014/04/17 职场文书
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers