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的过人之处）