jQuery validate验证插件使用详解

前端技术 2023/09/06 JavaScript

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;
  }
 });

表单提交前的验证

 $(\'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>

实现如下效果：

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

本文地址：https://www.stayed.cn/item/15581

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案