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   

 

<%@ page contentType="text/html; charset=UTF-8" %>
    <%@ include file="/WEB-INF/inc/common.inc" %>
        <t:layout_new >  
      <jsp:body>
       //from 增加data-parsley-validate 对form parsley验证
<form method="POST" action="/user/register"class="jv-form jv-form-horizontal register-form"     data-parsley-validate>  
                            <div class="jv-form-row">  
                                <label class="jv-form-label">账号</label>  
                                <div class="jv-form-control-group">  
      //对输入框 required trigger length 的验证
    <input type="text" name="account" class="username" placeholder="手机号码/电子邮箱"              data-parsley-required="true" data-parsley-trigger="blur"
            data-parsley-required-message="手机号码/电子邮箱不可为空"  
 data-parsley-phoneemail   
data-parsley-phoneemail-message="请填写正确的手机号码/电子邮箱" data-parsley-remote   
data-parsley-remote-validator="checkaccount"   
data-parsley-remote-message="输入的账号已注册"   
data-parsley-minwords="10"   
data-parsley-minwords-message="请输入10" />  
      <div id="username_error" style="color:#c78676;" hidden="true"></div>                           </div>  
               </div>  
                            <div class="jv-form-row">  
                                <label class="jv-form-label">密码</label>  
                                <div class="jv-form-control-group">  
  <input type="password" id="reg_phone_pwd" name="password" class="password"   
data-parsley-required="true"   
data-parsley-trigger="focusout"   
data-parsley-required-message="密码不可为空"   
data-parsley-minlength="6"   
data-parsley-minlength-message="密码位数不可少于6位" />  
                                </div>  
                            </div>  
                            <div class="jv-form-row">  
                                <label class="jv-form-label">确认密码</label>  
                                <div class="jv-form-control-group">  
       //相同密码的验证
      <input type="password" name="repassword" class="password-repeat"   
data-parsley-required="true"   
data-parsley-trigger="focusout"   
data-parsley-required-message="确认密码不可为空"   
data-parsley-equalto="#reg_phone_pwd"
data-parsley-equalto-message="两次密码输入不一致" />  
                                </div>  
                            </div>  
                            <div class="jv-form-row">  
                                <label class="jv-form-label">验证码</label>  
                                <div class="jv-form-now>
//parsley 提示信息的重定位
 <input type="text" id="code" name="code" class="code" data-parsley-required="true"   
data-parsley-errors-container="#code_errors"   
data-parsley-trigger="blur"   
data-parsley-required-message="验证码不能为空"   
data-parsley-minlength="6"   
data-parsley-minlength-message="验证码为6位"  
 data-parsley-maxlength="6"   
data-parsley-maxlength-message="验证码为6位" />                        
                                </div>  
<span id="code_errors"></span>
                            </div>                                                  
                                <div class="jv-form-control-group">  
                                    <button type="submit" class="jv-button jv-button-primary full-width-btn">注册</button>  
                                </div>                             
                        </form>  
            </jsp:body>
        </t:layout_new>

   

 

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