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>

转载于:https://www.cnblogs.com/sweeeper/p/8397829.html