VeeValidate 的使用场景以及配置详解(3)

export const messages = { custom: { mobile: { required: () => '请输入手机号码!', mobile: () => '手机号码有误', }, img_captcha: { required: () => '请输入图形验证码!', }, sms_captcha: { required: () => '请输短信验证码!', length: () => '短信验证码为6位数字' }, password: { required: () => '密码不得为空', min: () => '密码不得小于8个字符', }, re_password: { required: () => '请再次输入密码!', confirmed: () => '两次密码输入不一致' }, nickname: { required: () => '请输入昵称', min: () => '昵称最小为3位字符', max: (field, params) => { return `昵称最大为${params[0]}位字符`; } }, id_card: { required: "身份证号码不得为空" }, birthday: { required: "请选择出生日期", date_format: "出生日期有误" }, url: { required: () => "请输入个人网址", url: () => "网址输入有误" }, email: { required: () => "请输入电子邮箱", email: () => "电子邮箱输入有误" }, age: { required: () => "请输入年龄", between: () => "年龄必须在18-60岁之间" } }, };

扩展内容

自定义错误信息中显示配置验证规则中的参数

export const messages = { custom: { nickname: { required: () => "请输入年龄", between: (fiield,params) => `年龄必须在${params[0]}-${params[1]}岁之间" } }, };

规则里面第一个参数是字段名称 第二个参数是验证规则后面的参数;

验证指定字段

validateAll(field Object) validateAll({mobile:this.moble});

还可以使用 data-vv-scope 来指定 但是该方法并不适用一些场景;

显示错误信息的时候必须要指定scope的值 不然不会显示错误信息