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

发布于 2020-03-17 23:33:48 字数 4071 浏览 2310 评论 0

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; //阻止默认表单提交
});

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。