Parsley.js 功能强大的前端表单提交验证库

Question

Parsley.js 功能强大的前端表单提交验证库，前端表单验证必不可少，选择合适插件能够提高我们工作效率，Parsley.js 是一个用来对 Web 表单的输入数据进行验证的 JavaScript 库，无需另写一行 JavaScript 代码。

主要特性

• 基于超棒的用户体验
• 超级方便配置
• 超轻量级(压缩后12K），支持 jQuery 和 Zepto
• 超简单，只需要简单配置DOM-API，类似jQuery的data API
• 绝对免费
• 可靠性非常好

内建的验证

• required：要求输入
• Not blank：不能为空
• Min length：最小长度
• Max length：最大长度
• Range length：长度区间
• Min：最小值
• Max：最大值
• Range：区域值
• RegExp：正则表达式
• Equal To：等于
• Min check：检查选择的checkbox的最少数量
• Max check：检查选择的checkbox的最多数量
• Range check：检查选择的checkbox的区间数量
• Remote：ajax验证

使用方法

Parsley.js 的使用依赖于 jQuery，所以我们要先引入 jQuery 库：

<script src="jquery.js"></script>
<script src="parsley.js"></script>

使用和配置 Parsley.js 非常的简单，你只需要使用 HTML 的 data 属性来配置 HTML 即可，如下：

<form id="demo-form" data-validate="parsley">
  <label for="fullname">Full Name * :</label>
  <input type="text" id="fullname" name="fullname" data-required="true" />
  <label for="email">Email * :</label>
  <input type="text" id="email" name="email"
    data-trigger="change" data-required="true" data-type="email" />
  <label for="website">Website :</label>
  <input type="text" id="website" name="website"
    data-trigger="change" data-type="url" />
  <label for="message">Message (20 chars min, 200 max) :</label>
  <textarea id="message" name="message"
    data-trigger="keyup" data-rangelength="[20,200]"></textarea>
</form>

Parsley 常用验证方式

表单必填

<input type="text" data-parsley-trigger="change"
       data-parsley-required-message="该项必填" required/>

复选框验证 至少选择一个

<input type="checkbox"  required="required" 
　　　　data-parsley-trigger="change"  
　　　　data-parsley-mincheck="1" 
　　　　data-parsley-error-message="该项必选" 
　　　　data-parsley-errors-container=".error">

正则验证

<input type="text" data-parsley-trigger="change"
       data-parsley-required-message="该项必填"
       data-parsley-pattern="^\d{17}[\d|X]|\d{15}$"
       data-parsley-pattern-message="请输入正确的身份证号码" required/>

Ajax 验证

HTML 部分

<input type="text" class="form-control" name="mobile"
       required
       data-parsley-trigger="change"
       data-parsley-pattern="/^(13[0-9]|15[0-9]|17[0-9]|18[0-9]|14[0-9])[0-9]{8}$/"
       data-parsley-pattern-message="请输入正确的手机号"
       data-parsley-required-message="该项必填"
       data-parsley-remote
       data-parsley-remote-validator = 'mobile'
       data-parsley-remote-options='uuid'
       data-parsley-remote-message="该联系电话已存在"
       >

JS 部分

window.Parsley.addAsyncValidator('mobile', function (xhr) {
    var d = xhr.responseJSON;
    if(d.code == 200){
        return !d.data.object;
    }
}, '/cageAdminUser/user/match/mobile');

错误消息提示 UI

<input type="checkbox"  required="required" 
　　　　data-parsley-trigger="change"  
　　　　data-parsley-mincheck="1" 
　　　　data-parsley-error-message="该项必选" 
　　　　data-parsley-errors-container=".error">

data-parsley-error-container 错误消息显示在该容器后

下拉列表验证

<select required="required" data-parsley-required-message="该项必选">
    <option value="">请选择角色名称</option>
    <option value="1">{{item.roleName}}</option>
</select>
//第一个值为空

表单提交

$('#user-form').parsley().on('form:validate',function () {
}).on('form:submit', function () {
    $this.formSubmit();
    return false; //阻止默认表单提交
});

相关链接

• 官网：http://parsleyjs.org