建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery表单验证插件paley.js

来源:易助科技网浏览量:15收藏

简介


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


JQuery表单验证插件paley.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验证



使用


1.  引入 jquery.js 和 parsley.js 文件


2.  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>


3.  调用


Parsley 常用验证方式

1)表单必填


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


2)复选框验证 至少选择一个


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


3)正则验证


<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/>



相关链接


官网地址 :http://parsleyjs.org/

GitHub 地址:https://github.com/guillaumepotier/Parsley.js