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;
                }
            },
		}
}

这样就可以写复杂的验证了，甚至可以将数据库信息进行对比。

注意

<identify-code>是我自定义的图片验证码生成组件，identifyCode是生成的验证码，通过输入框的值与验证码进行对比，如果不正确，显示错误信息验证码输入不正确。
使用methods的方式，在标签里的rules需要加[],如上文中的:rules="[codeRules]"。
简单的正则验证，推荐使用第一种方式，如果是复杂的验证，可以使用第二种方式。