Vuetify利用表單驗證規則，簡化表單驗證及錯誤信息提示的實現

Vuetify利用表單驗證規則，簡化表單驗證及錯誤信息提示的實現

背景

一般前端的登錄功能都需要寫表單驗證，一個方面需要寫驗證規則，限制用戶輸入；另一方面需要寫驗證錯誤的錯誤提示信息，提高用戶的體驗度。

效果演示

傳統方式實現弊端

但是如果用原生的H5和js來寫，會發現需要寫的操作很麻煩，而且都是重複性的操作。無非就是給表單寫失去焦點事件，然後進行判斷，如果失敗，給一個div從display:none設置爲display:block，然後顯示錯誤信息，很繁瑣。

可以使用Vuetify解決

這裏我們使用Vuetify，利用其自帶的表單驗證規則，來簡化表單驗證及錯誤信息提示。

ps：如果不是vue-cli的項目，是普通的H5項目，也可以通過CDN的方式引入Vuetify，使用原生vue來使用Vuetify。

Vuetify的使用可以參看官網：https://vuetifyjs.com/zh-Hans/getting-started/quick-start/

Vuetify的表單驗證

實例

Vuetify的所有輸入組件都有一個rules屬性，該屬性帶有一系列功能。

利用Vuetify的rules屬性，實現正則驗證及錯誤信息提示

1.在data中寫驗證規則，實現簡單驗證

	<v-form ref="form" lazy-validation v-model="valid" >
	    <v-text-field
		   v-model="name"
		   :counter="10"
		   :rules="nameRules"
		   label="Name"
		   required
		></v-text-field>
		
		<v-text-field
		    v-model="email"
		    :rules="emailRules"
		    label="E-mail"
		    required
		></v-text-field>                         
	</v-form>

export default {
    data: () => ({
      valid: true,
      name: '',
      nameRules: [
        v => !!v || 'Name is required',   //不能爲空，如果爲空則輸入框下方以紅色字體顯示‘Name is required’
        v => (v && v.length <= 10) || 'Name must be less than 10 characters',  //正則驗證，不符合正則，則輸入框下方以紅色字體顯示'Name must be less than 10 characters'
      ],
      email: '',
      emailRules: [
        v => !!v || 'E-mail is required',
        //也可以使用對象的形式，返回錯誤信息
        v => {
          		const pattern = /.+@.+\..+/
          		return pattern.test(v) || 'Invalid e-mail.'
        	},
      ],
  }
</script>

雖然這樣利用箭頭函數的形式可以實現一些判斷是否爲空，或者正則驗證的功能。但是並不能做出特別複雜的判斷，比如上圖中，輸入框中的驗證碼和圖片中的驗證碼進行比對；或者賬號與數據庫中的賬號比對，這些複雜的操作並不能實現。

不能實現究其原因，因爲現在是在data中寫的驗證規則，不能寫一些js的函數。所以接下來使用另一種實現方式，來實現複雜的驗證。

在methods中通過方法實現複雜的驗證

以上文中的驗證碼比對舉例：

	<v-text-field
	    prepend-icon="fas fa-check-square"
	    v-model="code"
	    label="驗證碼"
	    type="text"
	    :rules="[codeRules]"
	    required
	>
	</v-text-field>
	<div @click="refreshCode">
		<identify-code
	         :identifyCode="identifyCode"
	         :contentWidth="150"
	         :contentHeight="50"
	         :fontSizeMin="50"
	    />
	</div>

export default {
        name: 'login',
        components: {
            'identify-code': IdentifyCode,
        },
        data: () => ({
            code: "",
            valid: true,
            identifyCodes: "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789",
            identifyCode: "",
        }),
        methods: {
			//圖片驗證規則校驗
            codeRules(value) {
                if (value.toLowerCase() !== this.identifyCode.toLowerCase()) {
                    return "驗證碼輸入不正確";
                } else if (value.length === 0) {
                    return "驗證碼不能爲空";
                } else {
                    return true;
                }
            },
		}
}

這樣就可以寫複雜的驗證了，甚至可以將數據庫信息進行對比。

注意

1. <identify-code>是我自定義的圖片驗證碼生成組件，identifyCode是生成的驗證碼，通過輸入框的值與驗證碼進行對比，如果不正確，顯示錯誤信息驗證碼輸入不正確。
2. 使用methods的方式，在標籤裏的rules需要加[],如上文中的:rules="[codeRules]"。
3. 簡單的正則驗證，推薦使用第一種方式，如果是複雜的驗證，可以使用第二種方式。