Sharing3 -- 前端验证插件parsley(2017/04/28更新)
最近的项目在前端验证这块用到了parsley，还不错，而且可以做国际化，所以在这里简单的介绍一下，详细的下面有链接。
//DEMO:
HTML:
...
<body>
<div id="svg-symbol" class="hidden"></div>
<div>parsley demo:</div>
<form id="test1" data-parsley-validate action="#test1">
<input type="text" placeholder="input" data-parsley-required="true">
<button type="submit">submit</button>
</form>
<div>===================================</div>
<form id="test2" action="#test2">
<input type="text" placeholder="input" data-parsley-required="true">
<button type="submit">submit</button>
</form>
<div>===================================</div>
<form id="test3" action="#test3">
<input type="text" placeholder="input1" data-parsley-required="true" data-parsley-group="one">
<input type="text" placeholder="input2" data-parsley-required="true" data-parsley-group="one">
<input type="text" placeholder="input3" data-parsley-required="true" data-parsley-group="one">
<input type="text" placeholder="input4" data-parsley-required="true" data-parsley-group="one">
<input type="text" placeholder="input5" data-parsley-required="true" data-parsley-group="two">
<input type="text" placeholder="input6" data-parsley-required="true" data-parsley-group="two">
<input type="text" placeholder="input7" data-parsley-required="true" data-parsley-group="three">
<button type="button" id="test3Button">submit</button>
</form>
<div>===================================</div>
<form id="test4" action="#test4">
//tip4： data-parsley-value是实际验证的value，和你input里面填的没有关系了
<input type="text" placeholder="input" data-parsley-value="autoInput1" data-parsley-required="true">
//tip5： data-parsley-debounce时延
<input type="text" placeholder="input" data-parsley-required="true" data-parsley-debounce="3000">
//tip6： data-parsley-pattern正则
<input type="text" placeholder="input" data-parsley-required="true" data-parsley-pattern="\d+">
//tip6： data-parsley-equal自定义的validator
<input type="text" placeholder="input" data-parsley-required="true" data-parsley-equal="sheldon">
//tip7 data-parsley-error-message自定义的error-message
<input type="text" placeholder="input" data-parsley-required="true" data-parsley-error-message="this is my message">
//tip8 data-parsley-errors-container，error
<input type="text" placeholder="input" data-parsley-required="true" data-parsley-errors-container=".errorMessage" data-parsley-error-message="this is my location">
<button type="button" id="test4Button">submit</button>
</form>
<div>===================================</div>
<div><span>Error Message:</span><span class="errorMessage"></span></div>
<div>===================================</div>
<form id="test5" action="#test5" data-parsley-validate>
<input type="text" placeholder="input" data-parsley-required="true">
<button type="submit">submit</button>
</form>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/parsley.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</body>
...
test.js
//1.基本表单验证
// tip1: 验证有两种方式，form的tag上加data-parsley-validate属性，或者用下面js的方法。
$("#test2").parsley(); // work
//new Parsley('#test2'); // issue
//2.分组验证
// $('#test3Button').click(function(event) {
// var one = $("#test3").parsley().validate({group: 'one'});
// if (one){
// var two = $("#test3").parsley().validate({group: 'two'});
// if(two){
// var three = $("#test3").parsley().validate({group: 'three'});
// if(three){
// $("#test3").submit();
// }
// }
// }
// });
//isValid不验证提示只用于验证判断
$('#test3Button').click(function(event) {
var one = $("#test3").parsley().isValid({group: 'one'});
if (one){
alert('one done');
var two = $("#test3").parsley().isValid({group: 'two'});
if(two){
alert('two done');
var three = $("#test3").parsley().isValid({group: 'three'});
if(three){
alert('all done');
$("#test3").submit();
}
}
}
});
$("#test4Button").click(function(event) {
$("#test4").parsley();
$("#test4").submit();
});
//tip2: 自己写一个Validator
window.Parsley.addValidator('equal', {
requirementType: 'string',
validateString: function(value, requirement) {
return value == requirement;
},
messages: {
en: 'This value should be sheldon'
}
});
//tip3: 异步提交表单需要return false了
$('#test5').parsley().on('form:submit',function(){
return false;
});
Add(2017/04/28):我们还可以更改parsley error message的样式。
var $form = $('form.parsley-frm-aem');
$form.parsley({
trigger: 'blur',
successClass: 'has-success',
errorClass: 'has-error',
errorsWrapper: '<span class="help-block"></span>',
errorTemplate: '<span></span>',
classHandler: function(el) {
return el.$element.closest('label');
}
});