vue3 element-plus form 表单使用的学习笔记

前言

总结自己在使用表单的过程中遇到的一些小坑，方便自己以后查阅

1、表单校验

        1、首先是表单校验需要进行的操作

        html方面如下

主要是三个方面，form表单上面给一个ref, 还有一个校验规则rules

然后是各个fomr-item下的给各自对应的校验属性 prop，注意不是props，否则可能找异常找一天

 script里面相关的代码如下

这里主要就是定义校验规则rules，及定义一个与form表表达那上同名的ref，比如上图中的formRef是与表单上的ref同名的，checkValue是自定义的校验方法（后面有检验的几种方式）

表达的校验规则rules的写法

const checkValue = (rule, value, callback) => {
  if (value) {
    if (/[\u4E00-\u9FA5]/g.test(value)) {
      callback(new Error('角色编码不能有中文!'))
    } else {
      callback()
    }
  }
  callback()
}
const rules = reactive<FormRules>({
  // name属性就是常规的规则，第一个参数就是要求必须要填的，message就是触提示信息，trigger就是触发校验的方式
  name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
// 都是以数组方式保存，代表一个表单项可以有多个校验规则
  value: [
    // 第二种方式
    { pattern: /正则表达式/, message: '请输入角色编码', trigger: 'blur' },
    {
    // 这主种方式就是自定义校验函数方式，当上面两种方式不满足要求时使用
      validator: checkValue,
      trigger: 'blur',
    },
  ],
})

 1、常规校验方式

 2、正则校验方式

 3、自定义校验函数

 小坑1

       需要注意的是，一般我们关闭弹出框的时候，是需要重置表单的，而重置表单可以使用到表单自带的方法resetFields，这里需要注意的是，这个方法只会重置那些表单项中带有prop属性的，所以可以看到上图中所有form-item都带有prop属性，但是description又没有对应的rules，就是为了在重置表单的时候可以重置所有项。

2、账号密码自动填充到表单问题及解决

对于项目中，我们一般登录后，浏览器会要我们记住密码，然后如果我们项目中有表单有项中有

type='password'的时候，表单中会自动填入你登陆账号及密码

就是这样的现象

 表单上的用户名及密码是我们登录这个后台管理系统的时候的账号密码，不应该出现在这里的，但是浏览器自动给填上了

解决办法就是给type='password'的项加上 autocomplet 属性

3、组件内容暴露及在父组件使用暴露出去的内容

 AddOrEditForm.vue 

// 将数据及校验暴露出去
defineExpose({
  formData: state.formData,
  formRef,
})

 AddUser.vue组件使用上面组件暴露出来的数据

 

欢迎大佬们指正批评！！