parsley.js验证的基本引用

前段时间看到博客有些parsley.js验证，只是对parsley.js验证框架基本的应用，对parsley.js更深层理解没有介绍和demo 比如：异步请求，扩展验证的写法，我把我学到的parsley.js给大家讲一讲

优点：

arsley.js是一个表单验证的js

语法比较简单

扩展比较强大

缺点：

文档和demo比较少

异步调用有bug

1、官网  http://parsleyjs.org/

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

1. <%@ page contentType="text/html; charset=UTF-8" %>
2. <%@ include file="/WEB-INF/inc/common.inc" %>
3. <t:layout_new >
4. <jsp:body>
5. //from 增加data-parsley-validate 对form parsley验证
6. <form method="POST" action="/user/register"class="jv-form jv-form-horizontal register-form"     data-parsley-validate>
7. <div class="jv-form-row">
8. <label class="jv-form-label">账号</label>
9. <div class="jv-form-control-group">
10. //对输入框 required trigger length 的验证
11. <input type="text" name="account" class="username" placeholder="手机号码/电子邮箱"              data-parsley-required="true" data-parsley-trigger="blur"
12. data-parsley-required-message="手机号码/电子邮箱不可为空"
13. data-parsley-phoneemail
14. data-parsley-phoneemail-message="请填写正确的手机号码/电子邮箱" data-parsley-remote
15. data-parsley-remote-validator="checkaccount"
16. data-parsley-remote-message="输入的账号已注册"
17. data-parsley-minwords="10"
18. data-parsley-minwords-message="请输入10" />
19. <div id="username_error" style="color:#c78676;" hidden="true"></div>                           </div>
20. </div>
21. <div class="jv-form-row">
22. <label class="jv-form-label">密码</label>
23. <div class="jv-form-control-group">
24. <input type="password" id="reg_phone_pwd" name="password" class="password"
25. data-parsley-required="true"
26. data-parsley-trigger="focusout"
27. data-parsley-required-message="密码不可为空"
28. data-parsley-minlength="6"
29. data-parsley-minlength-message="密码位数不可少于6位" />
30. </div>
31. </div>
32. <div class="jv-form-row">
33. <label class="jv-form-label">确认密码</label>
34. <div class="jv-form-control-group">
35. //相同密码的验证
36. <input type="password" name="repassword" class="password-repeat"
37. data-parsley-required="true"
38. data-parsley-trigger="focusout"
39. data-parsley-required-message="确认密码不可为空"
40. data-parsley-equalto="#reg_phone_pwd"
41. data-parsley-equalto-message="两次密码输入不一致" />
42. </div>
43. </div>
44. <div class="jv-form-row">
45. <label class="jv-form-label">验证码</label>
46. <div class="jv-form-now>
47. <span style="color: #008000;">//parsley 提示信息的重定位</span>
48. <input type="text" id="code" name="code" class="code" data-parsley-required="true"
49. <span style="color: #008000;">data-parsley-errors-container="#code_errors"   </span>
50. data-parsley-trigger="blur"
51. data-parsley-required-message="验证码不能为空"
52. data-parsley-minlength="6"
53. data-parsley-minlength-message="验证码为6位"
54. data-parsley-maxlength="6"
55. data-parsley-maxlength-message="验证码为6位" />
56. </div>
57. <span style="color: #008000;"><span id="code_errors"></span></span>
58. </div>
59. <div class="jv-form-control-group">
60. <button type="submit" class="jv-button jv-button-primary full-width-btn">注册</button>
61. </div>
62. </form>
63. </jsp:body>
64. </t:layout_new>

这是基本的parsley验证，过两天写parsley的扩展和自定义的写法（这才是parsley的过人之处）