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代码

<%@ 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>

自定义校验

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

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