记录今日学习：如何在vue-admin-template上加表单，以及对表单进行简单的校验。

记录今日学习：

1. 复制表单组件 
2. 修改表单字段为「用户注册」
3. 解决表单验证不生效问题
4. 添加「重置」按钮功能
5. 实现表单提交alert提示

1.在element-ui官网找到表单代码，对表单代码进行复制。

ps:我这里不是简单的表单，而是将表单嵌套在弹窗中，点击按钮时出现弹窗。在element-ui官网也可以找到。

2.对代码进行简单的修改，修改表单字段为「用户注册」。

3.以下是我对这段代码的简单分析。

        这段代码使用了 Element UI 组件库创建了一个对话框（el-dialog），对话框中包含一个表单（el-form），用于用户注册信息的输入。用户可以输入姓名、年龄、地址、日期和性别，并且可以点击 “立即创建” 或 “重置” 按钮。

• title="用户注册"：设置弹框的标题为 “用户注册”。
• :visible.sync="dialogFormVisible"：:visible 是绑定对话框的显示与隐藏状态的属性，sync 修饰符表示双向绑定。
• dialogFormVisible 应该是在 Vue 实例的 data 选项中定义的一个布尔值，当它为 true 时，对话框显示；为 false 时，对话框隐藏。
• ref="ruleForm"：ref 是 Vue 提供的一个特殊属性，用于在 JavaScript 中引用这个表单元素。通过 this.$refs.ruleForm 可以访问到这个表单实例。
• :model="ruleForm"：model 绑定表单的数据对象，ruleForm 应该是在 Vue 实例的 data 选项中定义的一个对象，用于存储表单中各个字段的值。
• :rules="rules"：rules 是表单验证规则，应该是在 Vue 实例中定义的一个对象，用于对表单中的字段进行验证。

• @click="submitForm('ruleForm')"：@click 是 Vue 的事件绑定指令，当点击 “立即创建” 按钮时，会调用 Vue 实例中定义的 submitForm 方法，并将 'ruleForm' 作为参数传递。
• @click="resetForm('ruleForm')"：当点击 “重置” 按钮时，会调用 Vue 实例中定义的 resetForm 方法，并将 'ruleForm' 作为参数传递。

• required: true：表示该字段是必填项。
• message: '年龄不能为空'：当该字段为空时，显示的错误提示信息。
• trigger: 'blur'：指定触发校验的时机，blur 表示当该字段失去焦点时触发校验。
• type: 'number'：指定该字段的数据类型必须为数字。
• message: '年龄必须为数字值'：当该字段的值不是数字时，显示的错误提示信息。
• min: 10：要求地址字段的长度至少为 10 个字符。

4.最终效果如图所示：