Vue

1.安装npminstallvee-validate@2.0.02.引入该插件需要使用Vue.use引入,我们可以新建一个plugin文件夹,然后在里面进行引入。importVuefrom'vue';importVeeValidatefrom'vee-validate';此时,我们还没使用Vue.use()进行引入,我们可以先进行配置。constconfig={errorBagName:'errors',//为收集错误的对象起一个变量名,它存在每个组件的this中,如果和页面中的产生冲突,则可以更改这里delay:100,//表示获取输入信息的时间[毫秒]locale:'zh_CN',//验证消息的默认语言,一定要将这里写成zh_CN,否则自定义验证规则返回的验证消息是英文的。strict:true,//表示没有设置规则的表单不进行验证events:'input',//默认[input],input表示当输入时和表单失去焦点时都进行验证,blue表示当失去焦点时在验证。};然后进行引入。Vue.use(VeeValidate,config);3.基本使用此时,我们只能使用vee-validate提供的内置验证规则,用法如下。<!--1.我们必须为表单提供一个name属性,否则vee-validate不知道这个表单是哪一个。2.需要使用v-validate指令,来选择验证规则,我们可以输入单个也可以输入多个,可以使用字符串也可以使用对象形式。2.1(重要):如果使用字符串的方式,则需要在最""里面再写一个单引号将规则包住,否则会将规则名当成一个变量,第一个就是这样。--><inputname="age"v-validate="'required'"->单个规则写法v-validate="'required|between:1,120'"->多个规则写法,每个规则使用|管道符分隔v-validate="{required:true,between:[1,120]}"->对象写法,将需要的规则置true即可,此时不需要在里面包一层单引号了,如果其中的值是多个[例如between],则将值写成数组即可。/><!--1.这里是提示错误信息的,当使用该插件后,每个组件上都拥有了一个errors的计算属性[在config中可以修改该变量名]。2.errors是一个数组,里面存储的是错误信息,我们通过v-show来控制它是否显示,如果没有错误has()则返回一个false,那么该span就不显示。3.如果有错误了,那么has()则会返回一个true,那么我们就通过first()方法,拿到errors数组中的第一条错误信息来展示。4.注意(重要):在has()以及first()中,函数的参数值,都需要填写你校验关联表单的name值。--><spanclass="error-msg"v-show="errors.has('age')">{{errors.first('age')}}</span>所有内置规则:after{target}-比target要大的一个合法日期,格式(DD/MM/YYYY)alpha-只包含英文字符alpha_dash-可以包含英文、数字、下划线、破折号alpha_num-可以包含英文和数字before:{target}-和after相反between:{min},{max}-在min和max之间的数字confirmed:{target}-必须和target一样date_between:{min,max}-日期在min和max之间date_format:{format}-合法的format格式化日期decimal:{decimals?}-数字,而且是decimals进制digits:{length}-长度为length的数字dimensions:{width},{height}-符合宽高规定的图片email-不解释ext:[extensions]-后缀名image-图片in:[list]-包含在数组list内的值ip-ipv4地址max:{length}-最大长度为length的字符mimes:[list]-文件类型min-max相反mot_in-in相反numeric-只允许数字regex:{pattern}-值必须符合正则patternrequired-不解释size:{kb}-文件大小不超过url:{domain?}-(指定域名的)url4.将验证消息修改为中文我们首先将中文包引入进来,也需要将vee-validate下的Validator通过{Validator}方式引入进来。importzh_CNfrom'vee-validate/dist/locale/zh_CN';importVeeValidate,{Validator}from'vee-validate';//把这个代码,将最顶部相同的代码替换掉即可。然后创建一个对象:dict,该对象里有一个messages属性[值也是对象]。然后使用VeeValidate.Validator.localize(语言,dict对象)方法进行调用即可。vardict={messages:{...zh_CN.messages}};VeeValidate.Validator.localize("zh_CN",dict);5.修改字段名:此时,返回的验证消息显示的是phone,我们应该将它替换成显示手机号。我们只需要在dict对象中添加以下属性:attributes[它的值也是一个对象]。该对象中的key,就是你input中对应的name属性值。vardict={messages:{...zh_CN.messages,//在这里可以进行重写required:(field,args)=>`${filed}是一个必填内容!`},attributes:{phone:"手机号",code:"验证码"}};6.自定义验证规则:使用Validator.extend(规则名称,规则配置对象)方法可以自定义验证规则。在对象中,一共有两个必须定义的属性,它们都是一个函数。getMessage(field,args):返回的错误信息。field:字段名称,使用的是dict.attributes中的。args:在规则后携带的值。validate(value,args):验证规则,必须返回一个true或者false,或者是Promise实例。value:控件内输入的内容。该函数如果返回的是true,则代表着验证通过。该函数如果返回的是false,则代表不通过,那么就会执行getMessages函数,进行返回错误信息。//手机号验证规则Validator.extend('mobile',{getMessage:field=>`${field}格式不正确!`,validate:value=>/^[1][3-9][\d]{9}$/.test(value)//test是验证正则的,通过返回true});7.提交时验证是否通过在我们提交表单时,应该去判断所有字段都已经验证通过了。/*在提交时,应该先调用该方法,如果都已经验证通过,则返回一个true,否则返回false。*/constvaliRes=awaitthis.$validator.validateAll();if(!valiRes)return;//.......

2022-5-28 99 0