parsley.js验证的基本引用
前段时间看到博客有些parsley.js验证,只是对parsley.js验证框架基本的应用,对parsley.js更深层理解没有介绍和demo 比如:异步请求,扩展验证的写法,我把我学到的parsley.js给大家讲一讲
优点:
arsley.js是一个表单验证的js
语法比较简单
扩展比较强大
缺点:
文档和demo比较少
异步调用有bug
2、应用实例:http://parsleyjs.org/doc/examples.html
3、现在都用parsley-2.x.js ;parsley-1.x.js几乎不用了
4、parsley-2.x.js和版本parsley-1.x.js语法的区别:
eg: parsley-2.x.js版本 以data-parsley开头
parsley-1.x.js版本以parsley开头
5、内建的验证:
- 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验证
6、实例如下:
这是最基本的parsley验证,过两天写parsley的扩展和自定义的写法(这才是parsley的过人之处)
引入parsley-2.x.js和parsley.css
- <%@ page contentType="text/html; charset=UTF-8" %>
- <%@ include file="/WEB-INF/inc/common.inc" %>
- <t:layout_new >
- <jsp:body>
- //from 增加data-parsley-validate 对form parsley验证
- <form method="POST" action="/user/register"class="jv-form jv-form-horizontal register-form" data-parsley-validate>
- <div class="jv-form-row">
- <label class="jv-form-label">账号</label>
- <div class="jv-form-control-group">
- //对输入框 required trigger length 的验证
- <input type="text" name="account" class="username" placeholder="手机号码/电子邮箱" data-parsley-required="true" data-parsley-trigger="blur"
- data-parsley-required-message="手机号码/电子邮箱不可为空"
- data-parsley-phoneemail
- data-parsley-phoneemail-message="请填写正确的手机号码/电子邮箱" data-parsley-remote
- data-parsley-remote-validator="checkaccount"
- data-parsley-remote-message="输入的账号已注册"
- data-parsley-minwords="10"
- data-parsley-minwords-message="请输入10" />
- <div id="username_error" style="color:#c78676;" hidden="true"></div> </div>
- </div>
- <div class="jv-form-row">
- <label class="jv-form-label">密码</label>
- <div class="jv-form-control-group">
- <input type="password" id="reg_phone_pwd" name="password" class="password"
- data-parsley-required="true"
- data-parsley-trigger="focusout"
- data-parsley-required-message="密码不可为空"
- data-parsley-minlength="6"
- data-parsley-minlength-message="密码位数不可少于6位" />
- </div>
- </div>
- <div class="jv-form-row">
- <label class="jv-form-label">确认密码</label>
- <div class="jv-form-control-group">
- //相同密码的验证
- <input type="password" name="repassword" class="password-repeat"
- data-parsley-required="true"
- data-parsley-trigger="focusout"
- data-parsley-required-message="确认密码不可为空"
- data-parsley-equalto="#reg_phone_pwd"
- data-parsley-equalto-message="两次密码输入不一致" />
- </div>
- </div>
- <div class="jv-form-row">
- <label class="jv-form-label">验证码</label>
- <div class="jv-form-now>
- <span style="color: #008000;">//parsley 提示信息的重定位</span>
- <input type="text" id="code" name="code" class="code" data-parsley-required="true"
- <span style="color: #008000;">data-parsley-errors-container="#code_errors" </span>
- data-parsley-trigger="blur"
- data-parsley-required-message="验证码不能为空"
- data-parsley-minlength="6"
- data-parsley-minlength-message="验证码为6位"
- data-parsley-maxlength="6"
- data-parsley-maxlength-message="验证码为6位" />
- </div>
- <span style="color: #008000;"><span id="code_errors"></span></span>
- </div>
- <div class="jv-form-control-group">
- <button type="submit" class="jv-button jv-button-primary full-width-btn">注册</button>
- </div>
- </form>
- </jsp:body>
- </t:layout_new>
这是基本的parsley验证,过两天写parsley的扩展和自定义的写法(这才是parsley的过人之处)