vuelidate的表单验证插件的使用

最新推荐文章于 2024-08-29 16:46:08 发布

原创最新推荐文章于 2024-08-29 16:46:08 发布 · 902 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #表单验证

前端同时被 2 个专栏收录

10 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

本文介绍了在Vue应用中利用vuelidate插件进行表单验证的方法，包括通过npm安装，导入main.js，以及在组件中绑定数据和触发验证事件。此外，还讲解了如何自定义验证规则，如基于正则表达式和定位器的验证器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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
  })