vuelidate的表单验证插件的使用

vuelidate的表单验证插件的使用

Posted by Teemo on January 31, 2019

在vue中,我们使用vuelidate实现表单验证,达到限制用户输入的目的,以及提交时验证表单的目的。 查看官方文档

第一步:安装

可以通过npm安装

 	npm install vuelidate --save

然后导入到main.js中

 import Vue from 'vue'
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

第二步:在组件中使用

绑定数据需要用==v-model.trim==绑定,使用this.$v.user.user_name.$touch()去触发验证事件,this.$v.user.user_name.required为true时表示验证通过

<template>
	<form>
		<input type="text" class="userName" placeholder="请输入用户名" v-model.trim="user.user_name">
		 <input type="button" value="登录" class="submit" @click="login">
	</form>
</template>
import { required} from 'vuelidate/lib/validators'
export default {
data(){
        return {
            user:{
                user_name:"",
                }
         }
     },
validations: {
        user: {
            user_name: {
            required,
            },
        }
  },
   methods:{
        login(){
            this.$v.user.user_name.$touch()
            if(!this.$v.user.user_name.required){
				Toast('用户名不能为空');
            }
         }
}

补充:自定义验证规则

新建js文件,在文件中引入 列子:基于正则表达式的验证器

//js文件
import { helpers } from 'vuelidate/lib/validators'
export var phone = helpers.regex('phone', /^1(3|4|5|7|8)\d{9}$/);

//组件中
import {phone} from "../../api/validate.js"
validations: {
            user: {
                mobile: {
				phone,
                },   
          }

基于定位器的验证器 如果您想使用locator策略(与sameAs或requiredIf内置验证器中的定位器策略完全相同),您可以使用ref helper来实现这一点,其方式与在这两个验证器中使用定位器的方式完全相同。

import { req, ref, withParams } from './common'

export default (prop) =>
  withParams({ type: 'requiredIf', prop }, function(value, parentVm) {
    return ref(prop, this, parentVm) ? req(value) : true
  })