vuelidate 表單驗證：必填字段 / 數字，阻止提交

第一步：安裝，導入main.js中

可以通過 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 阻止提交。

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()