表单验证是用户体验的重要组成部分。如果你设计了一个表单，它看起来很好，但没有得到验证，那么肯定会有问题（或者不太正确）。

通常，给用户的错误消息可以帮助他们快速解决问题，并确保他们的信息按照您的要求结构化。它还确保用户在提交表单之前填写了所有必需的信息。

jQuery Tiny Validate插件包含了您需要了解的关于表单验证的所有信息，每个方法都有很多示例。让我们开始吧。

特征：

• 重量轻、速度快。
• 实时字段验证。
• 支持AJAX表单。
• 内联和摘要错误消息。
• 10+内置验证规则。
• 通过Regex轻松添加您自己的规则。

如何使用它:

1.在文档中插入主要的JavaScript和规则。

<!-- jQuery is required -->
<script src="/path/to/cdn/jquery.min.js"></script>
 
<!-- Core JavaScript -->
<script src="src/jquery.tinyvalidate.js"></script>
 
<!-- Rules -->
<script src="src/jquery.tinyvalidate.rules.js"></script>

2.使用CSS类将验证规则添加到表单字段，如下所示：

• 必修的
• 电子邮件
• url
• 拉链
• 日期
• 电话
• ssn（序列号）
• 通货
• 选择一个
• 最大值
• 等于

<form class="example" action="" method="post">
  <fieldset>
  <legend>Project Information</legend>
    <div class="text">
      <label for="project-name">Project Name: *</label>
      <input type="text" pattern="\w+" required id="project-name" />
    </div>
    <div class="text">
      <label for="project-bud">Budget:</label>
      <input class="currency" size="8" type="text" id="project-bud" />
      <span class="unit">US Dollars</span>
    </div>
    <div class="text">
      <label for="project-zip">Zip Code: *</label>
      <input class="required zip" type="text" id="project-zip" />
    </div>
    <div class="dropdown">
      <label for="project-type">Project Type:</label>
      <select id="project-type" name="project-type">
        <option value="good">good</option>
        <option value="bad">bad</option>
        <option value="ugly">ugly</option>
      </select>
    </div>
    <fieldset class="radio choose-one">
      <legend>Size of Project</legend>
      <div>
        <input type="radio" name="size" id="twenty" value="1" />
        <label for="twenty">20 People</label>
      </div>
      <div>
        <input type="radio" name="size" id="more" value="2" />
        <label for="more">More than 20 People</label>
      </div>
    </fieldset>
    <div class="textarea">
      <label for="project-desc">Project Description</label>
      <textarea rows="4" cols="50" id="project-desc"></textarea>
    </div>
  </fieldset>
  <fieldset class="max max-2">
    <legend>I am a... </legend>
    <div>(choose no more than two)</div>
    <div class="checkbox">
      <input type="checkbox" name="i-am" id="driver" value="1" />
      <label for="driver">Licensed Driver</label>
    </div>
    <div class="checkbox">
      <input type="checkbox" name="i-am" id="timebomb" value="2" />
      <label for="timebomb">Walking Timebomb</label>
    </div>
    <div class="checkbox">
      <input type="checkbox" name="i-am" id="fiscal" value="3" />
      <label for="fiscal">Fiscal Nightmare</label>
    </div>
  </fieldset>
  <fieldset class="actions">
      <input name="submitfoo" class="submit" type="submit" value="Submit Form" />
      <a class="cancel" href="#">Cancel</a>
  </fieldset>
</form>

3.调用表单元素上的Tiny Validate，插件将完成其余操作。

$('form.example').tinyvalidate({
  // options here
});

4.如您在jquery.tinyvalidate.rules.js查询.

$.tinyvalidate.rules.phone = {
  ruleClass: 'phone',
  rule: function(r) {
    return (/\(?\d{3}\)?[\. -]?\d{3}[\. -]?\d{4}/).test(r) || r === '';
  },
  text: 'Invalid Format ',
  check: 'value'
};

5.自定义表单验证器的可用选项。

$('form.example').tinyvalidate({
 
  // determine whether to ignore disabled fields
  ignoreDisabled: true,
 
  // determine whether to ignore hidden fields
  ignoreHidden: true,
 
  // determine whether to use Regex defined in the pattern attribute
  usePattern: false,
 
  // other events to trigger the form validation
  otherEvents: 'blur',
 
  // called when one of the events is triggered.
  onEvents: $.noop,
 
  // called if an error occurs when submitting
  submitError: function(errorCount) {},
 
  // override the naive submit event
  // function() { /* do something */ }
  submitOverride: null
 
});

6.自定义内联错误消息。

$.fn.tinyvalidate.defaults.inline = {
  insertType: 'after',
  insertTo: null,
  errorElement: '<div class="error-message"></div>',
  errorAnimate: {
    effect: 'fadeIn',
    speed: 400
  },
  containerTag: 'div',
  containerErrorClass: 'error'
};

7.自定义错误消息摘要。

$.fn.tinyvalidate.defaults.summary = {
  insertTo: 'form',
  insertType: 'append',
  wrapper: '<div class="error-summary"></div>',
  preMessage: 'Please review the {num} highlighted {field|fields} and try again.<ul>',
  postMessage: '</ul>',
  messageAnimate: {
    effect: 'fadeIn',
    speed: 400
  },
  // set to null if you don't want to include details in the summary message:
  lineItems: {
    wrapper: '<li></li>',
    errorElement: '<span class="error-message"></span>',
    // create link in summary details to inputs with errors
    linkify: true
  }
};

8.清除所有错误。

$("form.example").tinyvalidate('removeErrors');

9.销毁插件。

$("form.example").tinyvalidate('destroy');

预览截图

快速易用 表单验证插件 jQuery Tiny Validate