实用的表单验证插件--jquery Validation

时间  2019-12-05
标签 实用 表单 验证 插件 jquery validation 栏目 HTML 繁體版
原文   原文链接

Validation文档翻译

前言

Validation做为表单验证中最经常使用的插件，为我在开发过程当中提供了不少便利的地方。虽说我很经常使用，可是我真的不敢说我会用Validation。每次使用都是在菜鸟教程上粘贴代码，修改rule就这么用了。因此本身决定仍是从头撸一遍文档，可是没找到中文文档。这就有了翻译这个文档的意愿了，那就开始吧。官方文档的位置css

起步

引用

使用下菜鸟教程的cdn，由于依赖jquery，因此必须先引入jqueryhtml

<script src =“http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js”> </ script>
<script src =“http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js”> </ script>>

使用方式

  1. 将校验规则写到控件中：jquery

    <form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <legend>Please provide your name, email address (won't be published) and a comment</legend>
    <p>
      <label for="cname">Name (required, at least 2 characters)</label>
      <input id="cname" name="name" minlength="2" type="text" required>
    </p>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required>
    </p>
    <p>
      <label for="curl">URL (optional)</label>
      <input id="curl" type="url" name="url">
    </p>
    <p>
      <label for="ccomment">Your comment (required)</label>
      <textarea id="ccomment" name="comment" required></textarea>
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
<script>
$("#commentForm").validate();
</script>
    根据表单控件的类型和属性进行校验，这样比较不灵活

  2. 将校验规则写到js代码中ajax

    $("#signupForm").validate({
    rules: {
      firstname: "required",
      lastname: "required",
      username: {
        required: true,
        minlength: 2
      },
      password: {
        required: true,
        minlength: 5
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      },
      email: {
        required: true,
        email: true
      },
      topic: {
        required: "#newsletter:checked",
        minlength: 2
      },
      agree: "required"
    },
    messages: {
      firstname: "请输入您的名字",
      lastname: "请输入您的姓氏",
      username: {
        required: "请输入用户名",
        minlength: "用户名必需由两个字母组成"
      },
      password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母"
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字母",
        equalTo: "两次密码输入不一致"
      },
      email: "请输入一个正确的邮箱",
      agree: "请接受咱们的声明",
      topic: "请选择两个主题"
    }
});
    每一个表单空间单独的进行配置，配置对象中的rule用于设置校验标准，messages用于设置校验错误的提示信息。

文档

.validate([option])

validate是Validation的主函数，用于验证选择的表单。数组

option

类型：objectapp

  • debug（默认值：false）
    类型：boolean
    容许debug模式。若是他设置为true，表单不会被提交并且验证的错误信息将在控制台被输出。
    例子：组织表单进行提交，设置提示验证信息和debug信息。dom

    $("#myform").validate({
  debug: true
});

  • submitHandler（默认值：原生的表单提交）
    类型：function()
    表单验证经过后提交表单的回调函数。
    例子：当表单验证后使用ajax提交表单。curl

    $("#myform").validate({
  submitHandler: function(form) {
    $(form).ajaxSubmit();
  }
});

    例子：使用回调函数先执行部分操做而后再提交表单。注意：参数中的form对应的是一个DOM元素，并且这里提交不会再次出发此回调函数。ide

    $("#myform").validate({
  submitHandler: function(form) {
    // 表单提交前的操做
    form.submit();
  }
});

    此回调有两个参数：函数

    • form

      类型：DOM元素
当前被验证的form表单元素。

    • event

      类型：事件对象
表单提交的事件

  • invalidHandle
    类型：function()
    当表格没有经过验证提交时的回调函数
    例子：当用户尝试提交一个验证无效的表单时，在表格内显示一个展现有多少错误信息

    $("#myform").validate({
  invalidHandler: function(event, validator) {
// 'this' refers to the form
var errors = validator.numberOfInvalids();
    if (errors) {
      var message = errors == 1
        ? 'You missed 1 field. It has been highlighted'
        : 'You missed ' + errors + ' fields. They have been highlighted';
      $("div.error span").html(message);
      $("div.error").show();
    } else {
      $("div.error").hide();
    }
  }
});

    此回调函数有两个参数：

    • event
      类型：事件对象

    一个自定义事件对象，由于该函数被绑定为一个事件处理程序。

    • validator
      类型：Validator

    当前表单验证的实例。

  • ignore（默认值：ignore）
    类型：css选择器
    当验证的时候，将选择器元素过滤出来不进行校验。使用jquery的not()方法，因此被过滤的表单空间不进行校验。type值为submit和reset的input元素也被过滤掉，他们都是被被禁的元素。
    例子：当校验的时候过滤掉带有“ignore”类名的元素

    $("#myform").validate({
  ignore: ".ignore"
});

  • rules（默认值：校验规则从标签的类名、属性、数据中）
    类型：对象
    键值对定义用户的校验规则。键对应的元素（或者一组的复选框/单选框）的name属性，值是一个对象含有规则/键值对或字符串组成。能够与类名、属性、数据中的校验规则并用。每一个规则均可以定义为一个含有depends属性，用于与符合某些条件的规则。看下面第二个例子能更清楚这种规则定义方式。
    例子：定义一个必填的name元素和一个必填的email元素（使用简便方式）和有一个有效的email地址。

    $("#myform").validate({
  rules: {
    // simple rule, converted to {required:true}
    name: "required",
    // compound rule
    email: {
      required: true,
      email: true
    }
  }
});

    例子：定义一个必填email地址的contact元素，最后取决于一个复选框是否选中来验证email规则

    $("#myform").validate({
  rules: {
    contact: {
      required: true,
      email: {
        depends: function(element) {
          return $("#contactform_email").is(":checked");
        }
      }
    }
  }
});

    例子：配置一个规则须要一个参数，且有一个依赖的回调函数

    $("#myform").validate({
  rules: {
 // at least 15€ when bonus material is included
 pay_what_you_want: {
   required: true
   min: {
     // min needs a parameter passed to it
     param: 15,
     depends: function(element) {
       return $("#bonus-material").is(":checked");
     }
   }
 }
  }
});

  • messages(默认值：被使用的验证规则的默认验证信息)
    类型：对象
    键值对的形式定义自定义信息。键是验证元素的name值，值是这个元素显示出的验证信息。值除了是一个单纯的字符串，也能够是对应此元素每一个验证规则的对象。重载一个元素的默认验证信息（经过这个方式）。每message多是一个字符串或者是一个函数。这个函数被调用在validator的做用域内，这个函数的第一个参数是验证规则中的参数，第二个参数是验证的元素，并且必须返回一个字符串做为验证信息。
    例子：定义一个必填的name元素和一个必填的验证email规则的元素。一个简单的信息对应必填的name元素，两个信息对应email元素。

    $("#myform").validate({
  rules: {
    name: "required",
    email: {
      required: true,
      email: true
    }
  },
  messages: {
    name: "Please specify your name",
    email: {
      required: "We need your email address to contact you",
      email: "Your email address must be in the format of name@domain.com"
    }
  }
});

    例子：校验name元素规则为必填和至少两个字符。提供一个函数信息使用jquery.validataor.format以免在两个地方指定参数。

    $("#myform").validate({
  rules: {
    name: {
      required: true,
      minlength: 2
    }
  },
  messages: {
    name: {
      required: "We need your email address to contact you",
      minlength: jQuery.validator.format("At least {0} characters required!")
    }
  }
});

  • groups
    类型：对象
    定义错误信息的组。一个组包含做为键的任意组名和一个用空格分隔的元素name的字符串列表做为值。使用errorPlaement去控制这个组的验证信息被放置的位置。
    例子：用一个table布局form元素，放置错误信息在下一个单元input以后。

    $("#myform").validate({
  groups: {
    username: "fname lname"
  },
  errorPlacement: function(error, element) {
    if (element.attr("name") == "fname" || element.attr("name") == "lname" ) {
      error.insertAfter("#lastname");
    } else {
      error.insertAfter(element);
    }
  }
});
  • normalizer
    类型：函数
    为验证，预处理或转换元素的值。这个放在后面详细说。

  • onsubmit(默认值：true)
    类型：bool
    在表单提交的时候进行验证。设置false时只能其余事件引发验证。
    设置成函数能够设什么时候执行验证。
    一个布尔值的true不是一个有效值，就是true无需设置。
    例子：当表单提交的不验证，容许用户使用自定义的方式提交。包括按键、失去焦点、点击事件等。

    $("#myform").validate({
  onsubmit: false
});

  • onfocusout
    类型：布尔或者函数
    校验元素（除了checkboxes或者radio按钮）在失去焦点的时候。若是这个元素没有输入任何内容，则跳过全部规则，除非这个元素已经被标记为错误。
    设置一个函数去界定什么时候进行校验。
    一个true值不是一个有效的值。
    例子：禁用对焦验证。

    $("#myform").validate({
  onfocusout: false
});

    他的回调函数被传入两个参数：

    • element
      类型：元素

    这个元素是当前正在被验证的，是一个dom元素。

    • event
      类型：时间对象

    这个失去焦点的事件对象。

  • onkeyup
    类型：布尔值或者函数
    验证元素在释放按键的时候。当没有表单元素标记为无效的时候，也不会发生。除上述状况以外，全部的规则将被每次按键事件所引发。设置false将禁止。
    设置一个函数去界定什么时候进行校验。
    一个true值不是一个有效的值。
    例子：禁止按钮验证

    $("#myform").validate({
  onkeyup: false
});

    这个回调函数被传两个参数：

    • 元素
      类型：元素

    这个元素是当前正在被验证的，是一个dom元素。

    • event
      类型：时间对象

    这个按键的事件对象。

  • onkeyup
    校验checkboxes、radio按钮，和select元素在click事件。设置false时去禁止。
    设置一个函数去界定什么时候进行校验。
    一个true值不是一个有效的值。
    例子：禁止点击校验checkboxes、radio按钮和select元素。

    $("#myform").validate({
  onclick: false
});
    • 元素
      类型：元素

    这个元素是当前正在被验证的，是一个dom元素。

    • event
      类型：时间对象

    这个点击的事件对象。

  • focusinvalid
    类型：布尔值
    聚焦最后一个激活的元素或者第一个验证无效的元素，经过使用validator.focusinvalid()方法。最后一个被激活的元素是表单提交的时候最后一个聚焦的元素，阻止他失去焦点。若是没有一个元素被聚焦他将会获取表单中第一个元素，除非这个配置为false。
    例子：禁止聚焦无效的元素。

    $("#myform").validate({
  focusInvalid: false
});

  • focusCleanup（默认值为：false）
    类型：布尔值
    若是设置为enabled，移除错误信息的css类名和隐藏全部的错误信息，当此元素被聚焦的时候。防止联合focusinvalid一块儿使用。
    例子：在聚焦表单元素的时候，移除错误的css类名和隐藏错误信息。

    $("#myform").validate({
  errorClass: "invalid"
});

  • errorClass（默认值为：'error'）
    类型：字符串
    使用这个类名建立标签，查找错误的标签并添加到错误的元素。
    例子：设置错误的类名为'invalid'

    $("#myform").validate({
  errorClass: "invalid"
});

  • validClass（默认值为：'valid'）
    类型：字符串
    这个类名是增长到表单元素，在这个元素被验证认定为有效的以后。
    例子：设置有效的类名为'success'

    $("#myform").validate({
  validClass: "success"
});

  • errorElement（默认值为：'label'）
    类型：字符串
    使用这个标签类型去建立错误信息提示。默认的是label，这样的好处是能够用for属性建立一个意思明确的连接在错误信息和字段。
    例子:设置错误的标签类型为'em'。

    $("#myform").validate({
  errorElement: "em"
});

  • wrapper（默认值为：window）
    类型：字符串
    包裹错误标签用此属性定义的标签。结合errorLabelContainer属性建立一个错误信息列表。
    例子：包裹每一个错误元素使用li标签，建立一个错误信息列表。

    $("#myform").validate({
  wrapper: "li"
});

  • errorLabelContainer
    类型：css选择器
    隐藏和展现验证时的容器
    例子：全部的错误的标签被展现在一个id为‘messageBox’无序列表,经过errorContainer选项传递的选择器指定元素中。全部的错误元素被包裹在一个li元素中，制成一个信息列表。

    $("#myform").validate({
  errorLabelContainer: "#messageBox",
  wrapper: "li",
  submitHandler: function() { alert("Submitted!") }
});

  • errorContainer
    类型：css选择器
    隐藏和展现验证时的容器
    例子：使用一个额外的容器包裹错误信息。当验证错误的时候，这个元素将全部的错误信息显示和隐藏。然而，错误标签自己被添加到做为errorLabelContainer给出的元素，这里是无序列表。 所以，错误标签也被包装到li元素（包装选项）中。

    $("#myform").validate({
  errorContainer: "#messageBox1, #messageBox2",
  errorLabelContainer: "#messageBox1 ul",
  wrapper: "li", debug:true,
  submitHandler: function() { alert("Submitted!") }
});

  • showErrors
    类型：函数
    一个自定义信息展现的回调函数。获取错误信息的对象做为第一个参数，一个错误信息的数组做为第二个。此函数的上下午为验证对象自己。这些参数只包含当前已经验证过的元素，当在focusout或keyup上进行验证时，它们能够是单个元素。能够经过调用this.defaultShowErrors（）来触发（除了本身的消息）默认行为。
    例子：每次一个错误信息呢被展现的时候更新无效元素的数量。伴随着默认的错误信息的展现。

    $("#myform").validate({
  showErrors: function(errorMap, errorList) {
    $("#summary").html("Your form contains "
      + this.numberOfInvalids()
      + " errors, see details below.");
    this.defaultShowErrors();
  }
});
    • errorMap
      类型：对象

    键值对，对象的键是校验的input元素name，而值是显示的校验信息。

    • errorList
      类型：数组

    一个包含当前已经被校验过的元素的数组。包含的对象有两个属性

    - message
类型：字符串
input元素展现的验证信息
- element
类型：元素
此条目的dom节点

  • errorPlacement （默认值为：放置错误信息的标签在无效的input元素后面）
    类型：函数
    自定义产生的错误验证标签的位置。第一个参数产生的验证错误信息的jquery对象。第二个参数是验证无效的input元素的jquery对象。
    例子：使用一个table来布局form表单，防止错误信息在input后的td里。

    $("#myform").validate({
  errorPlacement: function(error, element) {
    error.appendTo( element.parent("td").next("td") );
  }
});

    这个回调函数有两个参数：

    • error
      类型：jquery对象

    要插入DOM中的错误标签。

    • element
      类型：jquery对象

    验证信息对应的已经验证input元素，用于error的定位。

  • success
    类型：字符串或函数
    若是已经定义，将产生一个对有效input元素的验证信息。若是是赋值的是字符串，则将给这个验证信息的标签加上一个class类名。若是赋值是函数，这个验证信息标签的jquery是第一个参数，第二个参数是被验证的input元素（注意是dom元素）。能够对验证信息进行修改文字。
    例子：添加一个'valid'类名到验证信息的元素，使用css控制样式。

    $("#myform").validate({
  success: "valid",
  submitHandler: function() { alert("Submitted!") }
});

    例子：添加一个'valid'类名到验证信息的元素，经过css控制演示，而且添加文字‘ok！’

    $("#myform").validate({
  success: function(label) {
    label.addClass("valid").text("Ok!")
  },
  submitHandler: function() { alert("Submitted!") }
});

    这个回调函数传入两个参数：

    • label
      类型：jquery

    验证信息标签，使用它能够添加class类名和替换文本内容。

    • element
      类型：dom元素

    当前验证经过的表单元素对应的dom元素。

  • highlight（默认值：添加errorClass（在option中设置）到表单元素）
    类型：函数
    设置无效表单元素如何高亮。
    例子：经过先淡出再淡入的效果高亮一个验证无效的元素。

    $("#myform").validate({
  highlight: function(element, errorClass) {
    $(element).fadeOut(function() {
      $(element).fadeIn();
    });
  }
});

    例子：添加一个error class到他的验证无效元素和验证信息

    $("#myform").validate({
  highlight: function(element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
      .addClass(errorClass);
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).removeClass(errorClass).addClass(validClass);
    $(element.form).find("label[for=" + element.id + "]")
      .removeClass(errorClass);
  }
});

    这个回调函数传入三个参数：

    • element
      类型：DOM元素

    当前验证无效的表单元素。

    • errorClass
      类型：字符串

    option中errorClass当前值。

    • validClass
      类型：字符串

    option中validClass当前值。

  • unhighlight（默认值：移除errorClass）
    类型：函数
    设置失去聚焦的回调函数，参数与highlight相同。
  • ignoreTitle（默认值：false）
    类型：布尔值

.valid()

检查是否符合验证规则，使用这个方法的以前必须对form元素执行validate()。
例子：设置一个form表单的验证规则，而后检查表单是否符合验证规则在点击按钮以后。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Sets up validation for a form, then checks if the form is valid when clicking a button.</title>
<link rel="stylesheet" href="https://jqueryvalidation.org/files/demo/site-demos.css">
<style>
 
  </style>
</head>
<body>
<form id="myform">
<form id="myform">
  <input type="text" name="name" required>
  <br>
  <button type="button">Validate!</button>
</form>
</form>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
var form = $( "#myform" );
form.validate();
$( "button" ).click(function() {
  alert( "Valid: " + form.valid() );
});
</script>
</body>
</html>

.rules()

读取、添加和移除一个元素的规则。

  • rules()
    这个方法不用任何参数。读取这个表单元素的验证规则。

  • rules("add",rules)

    • add
      类型：字符串
    • rules
      类型：对象

    添加的验证规则。接受validate方法中相同格式的验证规则。

  • rules("remove",rules)

    • remove
      类型：字符串
    • rules
      类型：对象

    设置为用空格隔开的规则名称字符串，则会删除这些规则并返回。若是没有设置的话，移除全部的规则并返回。

未完待续……

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程