Vue3后台表单快速开发

目录

1 定义表单数据对象

2 定义校验规则

3 表单数据和校验规则绑定

3.1 表单数据和整体校验规则绑定

3.2 单项校验规则绑定

4 表单提交

---

        基于Vue3的后台管理系统往往需要很多的表单开发逻辑，但是这些逻辑具有同一个开发流程，这里对表单开发流程进行梳理，以登录表单为例：

1 定义表单数据对象

  // 登录表单const loginForm = reactive({phone: Cookies.get(PHONE) || '', //手机号password:Cookies.get(PASSWORD) === undefined? '': decryptHex(Cookies.get(PASSWORD)), // 密码code: '' // 验证码})

        表单数据对象可以使用reactive定义，也可以使用ref定义。重点是考虑需不需要默认填入表单的值，如果需要，就要在定义时赋值。

        这里是登录表单，如果有记住我选项，就需要向表单填入初始值。

2 定义校验规则

// 校验规则const loginRules = {phone: [{required: true,message: '⼿机号不能为空',trigger: 'blur'},{pattern: /^1[3-9]\d{9}$/,message: '⼿机号格式错误',trigger: 'blur'}],password: [{required: true,message: '密码不能为空',trigger: 'blur'},{min: 6,max: 20,message: '密码长度在6-20个字符之间',trigger: 'blur'}],code: [{required: true,message: '验证码不能为空',trigger: 'blur'},{min: 4,max: 4,message: '验证码长度必须为4位',trigger: 'blur'},{validator: validateCode,trigger: 'blur'}]}

        然后还需要定义数据的校验规则，字段需要和数据对象的属性对应。

        比如，手机号的两条规则分别是不能为空：required:true，正则表达式格式pattern。trigger表示校验的触发时机，blur即失去焦点（光标不在该表单项）时校验。

        密码校验除了非空，还设置长度范围。

        验证码校验除了非空，还设置验证码长度范围和自定义校验（validateCode函数，校验验证码是否正确）。

3 表单数据和校验规则绑定

3.1 表单数据和整体校验规则绑定

        在el-form表单中通过:model作动态数据绑定，通过:rules作校验规则的绑定，ref是用于获取表单整体校验对象的响应式引用，后续可以通过该响应式引用获取整个表单对象来作整体校验：

  // 登录表单的响应式引用对象(获取DOM元素的引用)const loginFormRef = ref(null)

3.2 单项校验规则绑定

        通过prop属性指明单项的校验规则，值必须和校验规则的校验项名称一致。v-model是作响应式数据的双向绑定。clearable是让输入框输入后可以点击叉号清空输入。

        通过单项校验规则绑定，就会在输入时一旦输入框失焦，就会触发单项校验规则的校验。

4 表单提交

        整体校验发生在用户点击登录时，因此需要为登录按钮绑定点击事件：

        当点击登录后，触发登录逻辑onLogin函数，就需要做整体校验ref，通过ref获取表单组件实例（如Element UI的el-form），调用其内置的validate方法，会自动遍历所有表单项的校验规则（如loginRules中定义的规则），并汇总结果。结果返回true或false：

        上述流程即为表单快速开发的一般流程，遵照上述流程，可以快速搭起表单功能的架子。