2023.03.17

ElementPlus

一、input自动填充且autocomplete="off" 失效

在当前网页记住用户名和密码，添加用户时，用户名和密码（字段名相同）会自动填充

（1）readonly

在input框focus前，readonly为true，记住的用户名、密码无法自动填充，点击input后focus，readonly为false

（2）autocomplete="new-password"

在新版的谷歌浏览器支持的属性中，在 type="password"input框加 autocomplete="new-password"

（3）css仅兼容chrome

<el-input
   v-model.trim="form.password"
   type="text"
   class="no-autofill-pwd"
/>
.no-autofill-pwd {
  :deep() .el-input__inner {
    -webkit-text-security: disc;
  }
}

二、validator自定义校验失败

1.确保model，rules绑定正确

2.表单项prop、表单绑定值字段名相同例如为username，且rules中包含username（准确性）

！3.validator的自定义校验函数必须放在rules定义之前，否则，console无法打印，校验规则也不生效，不报错（顺序性）

4.每个自定义函数if语句需要完整if...else... 逻辑，否则validator失效（完整性）

<el-form
      ref="formRef"
      label-width="80px"
      :model="form"
      :rules="rules"
      require-asterisk-position="right"
    >
      <el-form-item
        label="用户账户"
        prop="username"
        autocomplete="off"
      >
        <el-input v-model.trim="form.username" />
      </el-form-item>
</el-form>

 const validateUsername = async (rule, value, callback) => {
      console.log('rule', value, rule)
      if (value) {
        const { res } = await duplicateCheck(paramsOfCheck) // 异步校验
        if (res.success) {
          callback()
        } else {
          callback(new Error('用户名已存在！'))
        }
      } else {
        callback()
      }
    }
// validateUsername一定在rules定义之前！！！
const state = reactive({
      formRef: null,
      form: {},
      rules: {
        username: [{ asyncValidator: validateUsername, trigger: 'blur' }],
      }
    })