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