当前位置: 代码迷 >> 综合 >> parsley js的使用
  详细解决方案

parsley js的使用

热度:91   发布时间:2023-12-09 04:01:26.0

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/ 
版权声明:本文为博主原创文章,转载请附上博文链接!