首先需要引入插件：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>