第一步：安装，导入main.js中
可以通过 npm 安装
npm install vuelidate --save 然后导入到 `main.js` 中
import Vuelidate from 'vuelidate' Vue.use(Vuelidate) 第二步：在组件中使用
Vuetify：Forms
数据需要用 v-model 绑定， this.$v.xxx.$touch() 用来触发验证事件，:error-messages 用来进行表单验证并提示错误信息， this.$v.$reset() 用来清除内容。
this.touch() 里的 xxx 为 v-model 中绑定的字段内容。
<template> <v-dialog v-model="dialogAddLevel" persistent max-width="700px"> <v-card> <v-flex md2><label>项目点数起</label></v-flex> <v-flex md6> <v-text-field v-model="editedItem.start" :error-messages="startErrors" required @blur="$v.editedItem.start.$touch()" ></v-text-field> </v-flex> <v-flex md2><label>项目点数讫</label></v-flex> <v-flex md6> <v-text-field v-model="editedItem.end" :error-messages="endErrors" required @blur="$v.editedItem.end.$touch()" ></v-text-field> </v-flex> <v-flex md2><label>等级</label></v-flex> <v-flex md6> <v-text-field v-model="editedItem.level" :error-messages="levelErrors" required @blur="$v.editedItem.level.$touch()" ></v-text-field> </v-flex> <v-flex md2><label>等级补贴</label></v-flex> <v-flex md6> <v-text-field v-model="editedItem.amount" :error-messages="amountErrors" required @blur="$v.editedItem.amount.$touch()" ></v-text-field> </v-flex> <v-card-actions> <v-spacer></v-spacer> <v-btn color="primary" flat @click="close()">取消</v-btn> <v-btn color="primary" flat @click="save()">确定</v-btn> </v-card-actions> </v-card> </v-dialog> </template> <script> import { required, numeric } from "vuelidate/lib/validators"; export default { validations: { editedItem: { start: { required, numeric }, end: { required }, level: { required }, amount: { required, numeric } } }, methods: { save() { this.$v.editedItem.$touch(); if ( this.editedItem.start == "" || this.editedItem.end == "" || this.editedItem.level == "" || this.editedItem.amount == "" || !/^[0-9]*$/.test(this.editedItem.start) || !/^[0-9]*$/.test(this.editedItem.amount) ) { return false; } this.$axios .post("/api/projectQueries/levelTableAdd", { index: this.editedItem._id, start: this.editedItem.start, end: this.editedItem.end, level: this.editedItem.level, amount: this.editedItem.amount }) .then(res => { if (res.data.status == "200") { …… this.close(); } else if …… }); }, close() { this.dialogAddLevel = false; setTimeout(() => { this.editedItem = Object.assign({}, this.defaultItem); this.editedIndex = -1; }, 300); this.$v.$reset(); }, }, computed: { startErrors() { const errors = []; if (!this.$v.editedItem.start.$dirty) return errors; !this.$v.editedItem.start.required && errors.push("项目点数起为必填字段。"); !this.$v.editedItem.start.numeric && errors.push("请输入数字"); return errors; }, endErrors() { const errors = []; if (!this.$v.editedItem.end.$dirty) return errors; !this.$v.editedItem.end.required && errors.push("项目点数讫为必填字段。"); return errors; }, levelErrors() { const errors = []; if (!this.$v.editedItem.level.$dirty) return errors; !this.$v.editedItem.level.required && errors.push("等级为必填字段。"); return errors; }, amountErrors() { const errors = []; if (!this.$v.editedItem.amount.$dirty) return errors; !this.$v.editedItem.amount.required && errors.push("等级补贴为必填字段。"); !this.$v.editedItem.amount.numeric && errors.push("请输入数字"); return errors; } } </script> save() 方法里：if 进行条件判断，如果不满足表单验证的部分，
return false阻止提交。
vuelidate 内置验证规则:
| 规则 | 含义 |
|---|---|
required | 需要非空数据。检查仅包含空格的空数组和字符串。 |
| maxLength | 要求输入具有最大指定长度（包括最大值）。适用于数组。 |
| minLength | 要求输入具有最小指定长度（包括最小值）。适用于数组。 |
| 接受有效的电子邮件地址。 | |
| between | 检查数字或日期是否在指定范围内。最小值和最大值都包括在内。 |
| ipAddress | 接受点分十进制表示形式的有效IPv4地址，如127.0.0.1。 |
| alpha | 只接受字母字符。 |
| alphaNum | 只接受字母数字。 |
numeric | 只接受数字。 |
| sameAs | 检查给定属性是否相等。 |
| url | 只接受网址。 |
| or | 当至少有一个提供的验证器通过时通过。 |
| and | 所有提供的验证器都通过时通过。 |
| requiredIf | 仅当提供的属性或谓词为真时才需要非空数据。 |
| requiredUnless | 仅当提供的属性或谓词为假时才需要非空数据。 |
| minValue | 要求输入具有指定的最小数值或日期。 |
| maxValue | 要求输入具有指定的最大数值或日期。 |
也可以自定义验证规则。
提示：
如果想去除输入的空格，可以考虑 trim() 方法。
trim() 的功能是把字符串首尾的空格去掉。
string.trim()
来源：51CTO
作者：筝非
链接：https://blog.csdn.net/Xue_zenghui/article/details/100134658