1、官网： http://parsleyjs.org/
2、当前流行parsley-2.x.js ；parsley-1.x.js几乎不用了
3、parsley-2.x.js和版本parsley-1.x.js语法的区别：
eg：
parsley-2.x.js版本 以data-parsley开头
parsley-1.x.js版本以parsley开头
4、使用方法：
1.引入parsley相关js文件，注意引入jquery.js（jQuery.js>1.8的版本）及parsley.css
2.form表单添加属性：
data-parsley-validate="true"或data-parsley-validate
3.input中的使用：
1.prasely内建验证：可直接使用
data-parsley-内建验证器名=“有参传参”
2.自定义检验器步骤：
1.在intput中使用时注意：属性全部小写，遇到大写用“-”方式转（详见eg2）
2.input添加以下属性
data-parsley-验证器名=“有参传参”
data-parsley-验证器名-message=“验证失败后错误提示信息”
3.script中定义：
window.Parsley.addValidator('校验器名称', {
validateString（校验值类型）: function(value) {
//校验器规则
var reg= new RegExp("^\\d+(\\.\\d+)?$");
returnreg.test(value);
},
});
4.ajax检验自定义分同步和异步
5.对css的自定义
window.ParsleyConfig = $.extend( window.ParsleyConfig || {}, {
successClass: 'jv-form-success',
errorClass: 'jv-form-danger',
errorsWrapper: '<ul class="jv-form-error-msg"></ul>',
errorTemplate: '<li></li>'
});
5、prasely内建验证（网上搜到14个）：
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验证
Eg2:发送ajax校验（内容摘自网上，此例为异步自定义方法）
异步调用有bug（网上查）
关于bug的解释：
在parsley.remote.js中data-parsley-remote="url" 返回值是错误的，
此方法是根据url状态返回值判定：
如果返回值是200 都返回true 其他状态值是false
因为有这个缺陷对parsley异步定义方法：
//服务器返回内容包含ture return xhr.responseText.indexOf('true') >= 0;
1.Ajax同步：当加载到当前Ajax的时候，页面的其它代码会停止加载，直到当前的
Ajax加载完毕为止
2.Ajax异步：当加载到当前Ajax的时候，页面的其它代码一样可以运行
3.总结：在用Ajax时，如果某个页面某一部分有加载顺序问题，就将Ajax设为同步 （async：false）
1. <!DOCTYPE html>
2. <html xmlns:th="http://www.thymeleaf.org"
3. xmlns:social="http://spring.io/springsocial"
4. xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
5. layout:decorator="layout">
6. <head>
7. <title>用户注册</title>
8. <link rel="stylesheet" type="text/css" media="screen" th:href="@{/app/web/parsley/parsley.css}" />
9. <script th:src="@{/app/web/jquery/jquery-1.11.1.min.js}">
</script>
10. <script th:src="@{/app/web/parsley/parsley.remote.js}">
11. </script>
12. <script th:src="@{/app/web/parsley/parsley-2.0.3.js}">
13. </script>
14. <script type="text/javascript">
15. function refresh(obj) {
16. obj.src = "/obiz/app/sudoor/captcha-image.html?"+Math.random();
//增加随机数路径 ,避免图片缓存
17. }
18. $(document).ready(function(){
$ ('#_captcha').parsley().addAsyncValidator('mycustom',function (xhr) {
19. alert("xhr.status");
20. return 404 === xhr.status;
21. },
22. 'http://localhost:8080/obiz/app/account/remote'
);
23. });
24. </script>
25. </head>
26. <body>
27. <div id="content" layout:fragment="content">
28. <form action="#" method="POST"
29. th:action="@{/app/account/register}"
30. data-parsley-validate="true">
31. <p> 注册用户：
<input name="username" required="required"
32. type="text"/></input>
33. </p>
34. <p> 密码：
<input name="password" type="password">
</input>
35. </p>
36. 确认密码：<input type="password"></input>
37. <p>
38. </p>
39. <p> 验证码：
40. <input id="_captcha" name="_captcha"
41. type="text"
42. data-parsley-trigger="focusout"
43. data-parsley-remote="http://localhost: 8080/obiz/app/account/remote"
44. data-parsley-remote-validator='mycustom' > </input>
45. <img alt="验证码" style="cursor:pointer"
οnclick="javascript:refresh(this);"
src="/obiz/app/sudoor/captcha-image.html">
46. </img>
47. </p>
48. <p>
49. <button type="submit">注册</button>
50. </p>
53. </form>
54. </div>
55. </body>
56. </html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
