jqury-validate表單驗證

首先須要引入插件：jquery.validate.js這個插件。

而後對須要驗證的表單實現js：

$("#add-firewalls-form").validate({

submitHandler:function(){//驗證經過提交函數

    addFirewallsDialog.saveCreateFirewalls()//vue對象裏邊的提交函數

}，

onfocusout:function(element){//鼠標失去焦點時候進行驗證

  $(elemnet).valid();

},

ignore:".ignore",//不須要驗證的時候加這個類，當隱藏不須要驗證的時候用。hidde這個類

onkeyup:false,

rules:{//驗證的規則

name:{//把須要驗證的HTML中name=「***」的***部分寫在這裏，就是驗證的部分

required:true,//是否要驗證，不能爲空

isNormalName:true//是否使用本身定義的一個正則表達式

}

}，

messages:{//驗證失敗對用的提示

name:{//name對應的提示信息

remote:commonModule.i18n("validate.guojihua")

}

},

errorElement:"span",

errorPlacement:function(error,elemnt){

element.parent('div').addClass("has-feedback");

if(element.prop("type")==="checkbox"){

error.insertAfter(element.parent("label"));

}else{

error.insertAfter(element);

}

},

success:function(label,element){

if(!$(element).next("span")[0]){

}

},

hightlight:function(elemnt,errorClass,validClass){

$(element).parent("div").addClass("has-error").removeClass("has-success");

},

unhightlight:function(elemnt,errorClass,validClass){

$(element).parent("div").addClass("has-success").removeClass("has-error");

}

});

對應的HTML：

<div class="form-group">

<label class="col-md-3 cloudos-require-label">名稱</lable>

<div class="col-md-9">

<input class="form-control「 type="text" maxlength="15" name="mane"

v-on:focus="showTip('showNameTip')"

v-on:blur="hideTip('hideNameTip')"

v-model="nameValue"

<a class="glyphion glyphicon-remove form-control-feedback"></a>

<span class="cloudos-input-tip-right">提示信息</span>

</div>

</div>