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>
<span style="color: #008000;">//parsley 提示信息的重定位</span>
 <input type="text" id="code" name="code" class="code" data-parsley-required="true"
<span style="color: #008000;">data-parsley-errors-container="#code_errors"   </span>
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 style="color: #008000;"><span id="code_errors"></span></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的過人之處）