可以通过 npm
安装
npm install vuelidate --save
如果报错,试试加上
sudo
然后导入到 main.js
中
import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)
官方示例:Vuetify:Forms
数据需要用 v-model
绑定, this.$v.xxx.$touch()
用来触发验证事件,:error-messages
用来进行表单验证并提示错误信息, this.$v.$reset()
用来清除内容。
this.$v.xxx.$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
阻止提交。
在 标签里导入使用。
import { required, numeric } from "vuelidate/lib/validators";
required
:需要非空数据。检查仅包含空格的空数组和字符串。numeric
:只接受数字。也可以自定义验证规则。
import { required } from "vuelidate/lib/validators";
import { regex } from "vuelidate/lib/validators/common";
const lowerCaseRule = regex("letter", /^[a-z]+$/); // 验证name输入内容只能是小写字母
// 正则表达式规则「regex第一个参数随意,用来标注正则表达式的条件」
export default {
validations: {
name: { required, lowerCaseRule }, // required这个规则是内置的,上面讲的
},
……
}
computed: {
nameErrors() {
const errors = [];
if (!this.$v.name.$dirty) return errors;
!this.$v.name.required && errors.push("请填写名称");
!this.$v.name.lowerCaseRule && errors.push("只能输入小写字母");
return errors;
},
}
<v-text-field v-model="name" label="名称" required :error-messages="nameErrors" @change="$v.name.$touch()" @blur="$v.name.$touch()">
$valid
:Boolean 表单按照规则是否验证通过,True 是通过。$invalid
:Boolean 表单按照规则是否验证不通过,True 是不通过。$dirty
:Boolean 表单是否使用,True 为使用过。比如,阻止提交:
if (this.$v.orderaddressInfo.$invalid || this.$v.orderinfo.$invalid) {
return;
}
提示:如果想去除输入的空格,可以考虑 trim()
方法。
trim() 的功能是把字符串首尾的空格去掉。
string.trim()