Prasely表单校验插件简单使用方法之快速入门

来源：互联网发布：哪种商品禁止淘宝出售编辑：程序博客网时间：2024/05/16 05:10

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>

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"

onclick="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>

阅读全文

0 0