Vue的表单验证规则全套！

//ref可用于表单验证 model用于绑定数据 rule用于验证规则  labale-with用于控制表单项文案宽度
<el-form ref="form" :model="form" :rule="rules" label-width="200px">
	<el-form-item label="名字">  //label表单项文案
		<el-input v-model="form.name"></el-input> //v-model数据绑定
	</el-form-item>
	<el-button @click="submit">提交</el-button>
</el-form>

data() {
	//表单数据对象
	form: {
		name: '';
	}，
	//验证规则对象
	rule: {
		name: [
			//required必填项 message不满足条件时的提示语 trigger触发条件 blur表格失去焦点时
			{ required: true, message: '请输入名字', trigger: 'blur' },
			//min最少需要为1个字符 max最多不超过5个字符
			{ min: 1, max: 5, message: '请输入1-5位名字', trigger: 'blur' }
		]
	}
}，
methods: {
	submit() {
		//获取表单验证是否全部都合格
		this.$refs.form.validate(valid => {
        if(!valid) { //如果不是则提醒用户正确填写
          this.$message.error("请正确填写表单")
          return
        } else { //反之则可以请求后台数据
          const { data: res } = this.$axios.get(`xxx`)
        }
      })
	}
}