jQuery轻松进行表单验证

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

验证您的第一份表格

您可以开始使用此插件，而无需对标记进行任何重大更改。您可能需要更改的唯一一件事就是在要验证的表单上添加一个 id 或 class （如果还没有）。

这是我们将使用jQuery validate插件进行验证的基本形式的标记。

<form id="basic-form" action="" method="post">
      <label for="name">Name <span>(required, at least 3 characters)</span></label>
      <input id="name" name="name" minlength="3" type="text" required>
      <label for="email">E-Mail <span>(required)</span></label>
      <input id="email" type="email" name="email" required>
      <input class="submit" type="submit" value="SUBMIT">
</form>

我们使用的属性与之前基于HTML5的表单验证教程中使用的属性相同。该表单仍会进行验证，而无需我们添加任何JavaScript。但是，使用插件进行验证将使我们在无效输入字段下方显示错误消息。我们还可以根据需要设置错误的样式。

要使用此插件开始验证表单，只需在网页上添加以下JavaScript代码：

$(document).ready(function() {
  $("#basic-form").validate();
  这是基于以下假设：您已经添加了必需JavaScript文件。 添加这些JavaScript行将确保正确验证您的表单并显示所有错误消息。 这是一个工作示例。  
  该库尝试通过仅在必要时显示错误消息来使用户界面尽可能友好。 例如，如果您在“名称”和“电子邮件”字段之间进行分页而不实际输入任何信息，则不会收到任何错误消息。 但是，如果您在名称字段中仅输入一个字符后尝试移至电子邮件字段，则会收到有关至少输入三个字符的错误消息。  
  使用label元素将错误消息注入到DOM中。 它们都具有error类，因此很容易应用您自己的样式，就像我们在示例中所做的那样。 对于无效的输入也是如此，它们也会添加一个error类。  
  validate()方法的选项 
  
  在前面的示例中，我们只是调用了validate()方法，而没有向其传递任何选项。 但是，我们还可以将一个对象以及该对象内部的许多选项传递给此方法。 这些选项的值将确定表单插件如何处理验证，错误等。 
 
  如果您希望此插件在验证过程中忽略某些元素，则可以通过将类或选择器传递给ignore()来轻松实现。 验证输入时，插件将忽略具有该特定选择器的所有表单元素。  
 为输入字段添加验证规则
  
  您还可以将一些规则传递给validate()方法，以确定如何验证输入值。 rules参数的值应该是具有键值对的对象。 在每种情况下，密钥都是我们要验证的元素的名称。 该键的值是一个对象，其中包含一组将用于验证的规则。  
  您还可以通过使用depends关键字并将回调函数传递给它来返回true或false ，从而在depends验证的不同字段中添加条件逻辑。 这是一个使用简单规则定义如何验证输入的示例。 
 
 $(document).ready(function() {
  $("#basic-form").validate({
    rules: {
      name : {
        required: true,
        minlength: 3
      age: {
        required: true,
        number: true,
        min: 18
      email: {
        required: true,
        email: true
      weight: {
        required: {
          depends: function(elem) {
            return $("#age").val() > 50
        number: true,
        min: 0
  在上面的代码片段中，键name ， age ， email和weight只是输入元素的名称。 每个键都有一个对象作为其值，对象中的键值对确定如何验证输入字段。 这些验证选项类似于您可以在表单的标记中添加的属性。 例如，将required设置为true将使表单提交所需的元素。 将minlength设置为类似3的值将迫使用户在文本输入中至少输入3个字符。 文档页面上还简要介绍了其他一些内置的验证方法。  
  在上面的代码中应注意的一件事是，如果年龄超过50，则使用depends有条件地将权重设置为必填字段。如果在age输入字段中输入的值是，则通过在回调函数中返回true来完成此操作。超过50岁。  
 创建您自己的错误消息 
  该插件还允许您为表单中的不同验证规则设置错误消息。 首先，将messages键的值设置为一个对象，该对象具有用于输入字段和相应错误消息的key-value对。  
  这是一个示例，它将显示每个输入字段的自定义错误消息。  
 messages : {
  name: {
    minlength: "Name should be at least 3 characters"
  age: {
    required: "Please enter your age",
    number: "Please enter your age as a numerical value",
    min: "You must be at least 18 years old"
  email: {
    email: "The email should be in the format: abc@domain.tld"
  weight: {
    required: "People with age over 50 have to enter their weight",
    number: "Please enter your weight as a numerical value"
  就像规则一样， messages依赖于输入字段的名称。 这些输入字段中的每一个都将接受带有键值对作为其值的对象。 在每种情况下，关键是必须遵循的验证规则。 该值只是违反特定规则时要显示的错误消息。  
  例如，如果保留为空， age输入字段将触发required错误消息。 但是，如果在输入字段中输入数字以外的其他内容，则会触发number错误。  
  您会注意到的一件事是，该插件将显示验证规则的通用错误消息，而您没有提供自定义错误消息。 尝试在下面的演示中填写不同的值，您将看到自定义错误消息和常规错误消息按预期显示。  
 更多选项来更改插件行为 
  您可以阻止插件从键了验证输入字段，单击和其他此类事件的值设置onfocusout ， onkeyup ，或onclick给false 。 请记住，布尔值true不是这些键的有效值。 这基本上意味着，如果您希望插件验证或不关注按键事件，则只需保持这些选项不变即可。  
  您还可以使用errorClass和validClass键更改添加到有效或无效输入元素中的errorClass 。 这可以帮助防止由于重用相同的类名而引起的一些不必要的冲突。 同样，您可以选择更改出现错误的元素。 默认情况下，插件使用label元素显示所有错误消息，但是您可以使用errorElement键将其更改为em或任何其他元素。 然后可以使用wrapper键将error元素本身包装在另一个HTML元素中。  
  这些是验证表单时可能会使用的一些最常见的选项。 但是，如果您想执行诸如更改错误消息的位置或将所有错误消息分组在一起的操作，还有一些其他的验证选项可能会派上用场。  
 最后的想法 
  在本教程中，我们学习了如何使用jQuery插件使表单验证更上一层楼。 使用JavaScript表单验证使我们对基本HTML验证有了很多其他控制。 例如，当输入中填充无效值时，您可以轻松地控制不同错误消息的显示方式和显示时间。 同样，您也可以指定插件是否应跳过对某些特定元素的验证。 我强烈建议您阅读此插件的文档以及有关如何正确使用它的一些最佳实践 。 
 
  在我们的下一个教程中，您将了解更多基于JavaScript的工具和插件，以帮助您轻松创建和验证表单。 
 
  翻译自: https://code.tutsplus.com/tutorials/easy-form-validation-with-jquery--cms-33096 
                    在本教程中，您将学习如何使用jQuery插件向您的网站添加表单验证。  使用jQuery插件来验证表单有很多目的。 它为您提供了其他功能，例如轻松显示自定义错误消息以及添加条件逻辑以进行表单验证。 验证库还可以帮助您将验证添加到HTML表单中，而对标记的更改很少或没有更改。 有效性条件也可以随时轻松添加，删除或修改。 入门 在本教程中，我们将使用jQuery Validation插件 。...
				为什么要用jquery validate这个表单验证插件：自己写一个通用且功能全面强大的jquery表单验证插件并不容易。jquery validate这个jquery插件几乎可以轻松应对95%以上的表单验证，具体内容如下
1、在控件中使用默认验证规则，例子：
电子邮件(必填) 
<input id=”email” class=”required email” value=”email@” />
2、可以在控件中自定义验证规则，例子：
自定义(必填,[3,5])
<input id=complex value=hi class={required:true,minle
				功能介绍:jQuery多功能注册表单验证插件代码,能够验证几乎所有字段,让你自定义错误提示的长度,提示内容,提示字体颜色,还能与php动态验证手机号或者用户名在数据库是否存在,还能验证身份证是否输入正确,还能配合短信接口,轻松开发出短信注册,短信找回密码,功能强大丰富,大大提升用户体验,也减少后台php代码的验证工作,亲测,贼好用.用法简单,有详细说明文档.
用法：给input的父盒子加class类名vali，此项必须要加，不然没有提示，可自定义类名myvali配置class或id。 注意： 1.json配置必须要有值,如不需要配置，删除或注释； 2.开启与服务器验证必须要写路径。提交方式和格式不写默认post方法，json格式； 3.一个ingput框只能出现一种验证； 4.表单提交按钮必须是input,type="submit"； 5.表单里不能再出现p标签； 6.开启手机短信验证，发送短信按钮标签必须是input，type="button“
$("p.intro")	选取class="intro" 的<p>元素
$("p#demo")		选取id="demo" 的<p>元素
$("div input")  选取div 下所有的input元素
$("p:first")	选取第一个段落
$("p:last")		选取最后一个段落
$("tr:even")	选择...
　　在开启长篇大论之前，首先将表单验证的效果展示给大家。
　　1.点击表单项，显示帮助提示　　　　　　2.鼠标离开表单项时，开始校验元素　 3.鼠标离开后的正确、错误提示及鼠标移入时的帮助提醒
　　对于初学者而言，html表单验证是一项极其琐碎的事情。要做好表单验证，需要准备以下基本要素：
　　1.html表单结构：包含需要校验的表单元素；
　　2.j...
				jquery validate当前最新版本是1.17.0，下载链接是：https://github.com/jquery-validation/jquery-validation/releases/tag/1.17.0
1.基本用法
从字面就知道既然是jquery的插件，首先得引入jquery，然后下载jquery-validate.js后引入。
其次既然是表单校验，首先得有一个表...