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

  • Z时代
  • 2024-01-10
  • 分类：IT

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

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

主要特性

  • 基于超棒的用户体验

  • 超级方便配置

  • 超轻量级(压缩后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

以上是 Parsley.js 功能强大的前端表单提交验证库 的全部内容， 来源链接： utcz.com/p/232455.html

回到顶部