特点:只需要进行简单的配置可以实现表单的验证功能。
主要特性:
·用户体验好 ·配置方便 ·免费 ·性能比较好
内建的验证
•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验证
DMO
<form id="demo-form" data-parsley-validate="" action="http://www.baidu.com">
<label for="fullname">Full Name * :</label>
<input type="text" class="form-control" name="fullname"
data-parsley-trigger="change"
data-parsley-required="true"
data-parsley-required-message="用户名不可为空"
data-parsley-minlength="6"
data-parsley-minlength-message="用户名位数不可少于6位"
data-parsley-maxlength="29"
data-parsley-pattern=(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{4,23} data-parsley-pattern-message="必须为字母或数字" ><br/>
<label for="email">Email * :</label>
<input type="email" class="form-control"
name="email"
data-parsley-trigger="change"
required=""> <br/>
<label for="gender">Gender *:</label>
<p> M: <input type="radio" name="gender" id="genderM" value="M" required="">
F: <input type="radio" name="gender" id="genderF" value="F"> </p> <br/>
<input type="submit" class="btn btn-default" value="validate"></form>
<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/parsley.min.js"></script>
<script type="text/javascript">
$(function () {
$('#demo-form').parsley().on('field:validated', function() {
var ok = $('.parsley-error').length === 0;
$('.bs-callout-info').toggleClass('hidden', !ok);
$('.bs-callout-warning').toggleClass('hidden', ok); }) .on('form:submit', function() {
// return false;
// Don't submit form for this demo
}); });
</script>
还可以自定义提示样式和验证方式
<small>待学习</small>