VUE中表单验证——vuelidate

第一步：安装，导入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.$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 阻止提交。

vuelidate 内置验证规则:

规则	含义
required	需要非空数据。检查仅包含空格的空数组和字符串。
maxLength	要求输入具有最大指定长度（包括最大值）。适用于数组。
minLength	要求输入具有最小指定长度（包括最小值）。适用于数组。
email	接受有效的电子邮件地址。
between	检查数字或日期是否在指定范围内。最小值和最大值都包括在内。
ipAddress	接受点分十进制表示形式的有效IPv4地址，如127.0.0.1。
alpha	只接受字母字符。
alphaNum	只接受字母数字。
numeric	只接受数字。
sameAs	检查给定属性是否相等。
url	只接受网址。
or	当至少有一个提供的验证器通过时通过。
and	所有提供的验证器都通过时通过。
requiredIf	仅当提供的属性或谓词为真时才需要非空数据。
requiredUnless	仅当提供的属性或谓词为假时才需要非空数据。
minValue	要求输入具有指定的最小数值或日期。
maxValue	要求输入具有指定的最大数值或日期。

也可以自定义验证规则。

提示：

如果想去除输入的空格，可以考虑 trim() 方法。

trim() 的功能是把字符串首尾的空格去掉。

string.trim()