vee-validate表单验证

VeeValidate是Vue.js的验证库。

功能

• 基于模板的验证。
• 开箱即用的许多验证规则。
• 一流的本地化支持。
• 验证HTML5输入和自定义Vue组件。
• 自定义规则和错误消息。

验证表达式是由管道分隔的一系列验证器的字符串|。

如下：必填email字段。

<input placeholder="必填" type='email' v-validate="'required|email'"  v-model="business_person_email" name='business_person_email' />
<input placeholder="必填" type='email' v-validate="'{required:true,email:true}"  v-model="business_person_email" name='business_person_email' />

 验证结果

 this.$validator.validate().then(valid => {
        if (!valid) {
          //验证失败相关提示
        }
      });

本地化：自定义提示内容

let cn = {
   messages: {
		required: (name) => `${name}不能为空`,
		numeric: (name) => `${name}只能为数字`,
		between: (name, data) => `${name}不能大于${data[1]}`,
		max: (name, data) => `${name}限${data}字符内`,
		min:(name,data) =>`${name}不能小于${data}个字符`
			},
    attributes: {					 
	    account_name: '开户名', 
	}
}
this.$validator.localize('cn', cn);

注：cn翻译的内容，其中 attributes 对象表示字段，messages 对象表示提示信息 

message内的required~为验证规则 https://baianat.github.io/vee-validate/guide/rules.html

 

官网地址：https://baianat.github.io/vee-validate/