前端验证插件——parsleyjs

一、插件官方地址

http://parsleyjs.org/

二、插件使用

1、引用

parsleyjs的使用依赖于jquery，因此引用方式见下图：

2、parsley常用验证方式

   （1）表单必填

<input type="text" data-parsley-trigger="change" data-parsley-required-message="该项必填" required/>

（2）复选框验证——至少选择一个

<input type="checkbox"  required="required" 
　　　　data-parsley-trigger="change"  
　　　　data-parsley-mincheck="1" 
　　　　data-parsley-error-message="该项必选" 
　　　　data-parsley-errors-container=".error">

   （3）正则验证

<input type="text" data-parsley-trigger="change" data-parsley-required-message="该项必填"
       data-parsley-pattern="^\d{17}[\d|X]|\d{15}$"
       data-parsley-pattern-message="请输入正确的身份证号码" required/>

   （4）ajax验证

html部分

<input type="text" class="form-control" name="mobile"
       required
       data-parsley-trigger="change"
       data-parsley-pattern="/^(13[0-9]|15[0-9]|17[0-9]|18[0-9]|14[0-9])[0-9]{8}$/"
       data-parsley-pattern-message="请输入正确的手机号"
       data-parsley-required-message="该项必填"
       data-parsley-remote
       data-parsley-remote-validator = 'mobile'
       data-parsley-remote-options='uuid'
       data-parsley-remote-message="该联系电话已存在"
       >
js部分

window.Parsley.addAsyncValidator('mobile', function (xhr) {
    var d = xhr.responseJSON;
    if(d.code == 200){
        return !d.data.object;
    }
}, '/cageAdminUser/user/match/mobile');

（4）错误消息提示ui

<input type="checkbox"  required="required" 
　　　　data-parsley-trigger="change"  
　　　　data-parsley-mincheck="1" 
　　　　data-parsley-error-message="该项必选" 
　　　　data-parsley-errors-container=".error">
data-parsley-error-container错误消息显示在该容器后

（5）下拉列表验证

<select required="required" data-parsley-required-message="该项必选">
    <option value="">请选择角色名称</option>
    <option value="1">{{item.roleName}}</option>
</select>
//第一个值为空

（6）表单提交

$('#user-form').parsley().on('form:validate',function () {
}).on('form:submit', function () {
    $this.formSubmit();
    return false;//阻止默认表单提交
});