前端驗證插件——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;//阻止默認表單提交
});