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   

 

Java代码  

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>  

自定义校验

页面中定义需要使用自定义校验,注意红色的地方,必须要使用小写,重要的问题说三遍,小写,小写
<form class="form-horizontal" id="testForm"
              action="${BasePath}/test.sc" method="POST" data-parsley-validate="validate">

<input type='text' class="form-control jedate-icon" id="delayTime" name="delayTime"  value="" 
                   data-parsley-errors-container="#checkdelaytime"                    data-parsley-checkdelaytime                    data-parsley-checkdelaytime-message="不能小于当前时间" readonly/>                      <span id="checkdelaytime"></span>

3.第三式
编写自定义的校验器
window.Parsley.addValidator('checkdelaytime', {
  validateString: function(value) {  if(value!= ""){开始校验吧         return false;//校验不通过,会将data-parsley-checkdelaytime-message对应的信息输出
  }   return true;//检验通过
  }
});
--------------------- 
作者：showgood119 
来源：CSDN 
原文：https://blog.csdn.net/showgood119/article/details/53667466/ 
版权声明：本文为博主原创文章，转载请附上博文链接！