element-plus表单验证使用 个人总结

前言

表单验证能通过设置验证规则验证用户的输入，并对不规范的输入做出对应提示。element-plus（包括element-ui）都提供了表单验证功能。但官网上只有最基本的使用方法，详细使用需要参考async-validator，element-plus表单验证就是通过它实现的

Element-Plus-Form - 表单验证
async-validator - Git
async-validator - Gitee

---

一、表单验证基本使用

1、定义验证规则

baseRules: {
  name:[{ required: true, message: '请输入医生名称', trigger: 'blur' }],
  title: [{ required: true, message: '请选择职称', trigger: 'change' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  hospital: [{ required: true, message: '请选择医院', trigger: 'change' }]
},

2、绑定 表单 与 Rules

<el-form :model="formData" :rules="baseRules" ref="baseForm"></el-form>

3、绑定 Item 与 Rule

上一步已经为表单绑定了规则列表baseRules，接下来，只需要在form-item中使用prop绑定验证规则即可

<el-form-item label="名称" prop="name"></el-form-item>

对应关系:
表单对象formData: { name: '' }
表单元素prop="name"
规则列表baseRules: { name: [{...}] }

4、示例

<template>
	<el-form :inline="true" :model="doctorDialogForm" size="small" :rules="baseRules" ref="baseForm">
		<el-form-item label="医生名称" prop="name">
	      <el-input v-model="doctorDialogForm.name"></el-input>
	    </el-form-item>
		<!-- ... -->
		<template #footer>
		  <span class="dialog-footer">
		    <el-button @click="cancelOperation()">取 消</el-button>
		    <el-button type="primary" @click="confirmOperation()">确 定</el-button>
		  </span>
		</template>
	</el-form>
</template>

<script>
export default {
  name: 'Doctor',
  data() {
    return {
		doctorDialogForm: {       // 模态框 - 医生信息
		  no: '',                 // 医生编号
		  name: '',               // 医生名称
		  title: '',              // 医生职称
		  gender: '',             // 性别
		  hospital: '',           // 所在医院