在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