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 基础知识 被自己遗忘的
Oct 15 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
Jul 03 Javascript
JS分页效果示例
Oct 11 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
深入理解jQuery layui分页控件的使用
Aug 17 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
前端vue如何使用高德地图
Nov 05 Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 Javascript
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
分享一个Laravel好用的Cache宏
2015/03/02 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
php服务器的系统详解
2019/10/12 PHP
PHP反射基础知识回顾
2020/09/10 PHP
JAVASCRIPT 对象的创建与使用
2021/03/09 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
js实现微信分享代码
2020/10/11 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
代码分析vue中如何配置less
2018/09/28 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
[46:14]VGJ.T vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
浅谈python jieba分词模块的基本用法
2017/11/09 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
python批量爬取下载抖音视频
2019/06/17 Python
python global和nonlocal用法解析
2020/02/03 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
中国旅游网站:同程旅游
2016/09/11 全球购物
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
一道输出判断型Java面试题
2014/10/01 面试题
美发活动策划书
2014/01/14 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
2015大学生实训报告
2014/11/05 职场文书
地震捐款简报
2015/07/21 职场文书
公司酒会致辞
2015/07/30 职场文书
员工升职自我评价
2019/03/26 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
Python爬虫入门案例之爬取去哪儿旅游景点攻略以及可视化分析
2021/10/16 Python
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB
Spring Data JPA框架持久化存储数据到数据库
2022/04/28 Java/Android