基于jquery的表单校验插件 - formvalidator使用体验

下载地址：http://www.formvalidator.net/

基本样例

<form action="/registration" method="POST">

  <p>

    User name (4 characters minimum, only alphanumeric characters):

    <input data-validation="length alphanumeric" data-validation-length="min4">

  </p>

  <p>

    Year (yyyy-mm-dd):

    <input data-validation="date" data-validation-format="yyyy-mm-dd">

  </p>

  <p>

    Website:

    <input data-validation="url">

  </p>

  <p>

    <input type="submit">

  </p>

</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.1/jquery.form-validator.min.js"></script>

<script> $.validate(); </script>

...

另外支持html5原生语法

Support for HTML5

By adding the module html5 to the module declaration you will be able to validate user input using the native attributes, in accordance to the HTML5 specification.

在样式名上还和bootstraps兼容

<form action="..." role="form">

  <div class="form-group">

    <label class="control-label" for="the-input">Input description</label>

    <input type="text" id="the-input" class="form-control" data-validation="required" />

  </div>

  ...