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

时间:2023-11-27 13:25:26

下载地址: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

基于jquery的表单校验插件 - formvalidator使用体验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>
...