element plus form表单自定义校验规则

运维界小虾米

已于 2023-05-15 17:41:13 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

于 2023-05-15 17:18:27 首次发布

本文链接：https://blog.csdn.net/m0_65051174/article/details/130687941

文章讲述了在Vue.js应用中，使用el-form组件进行表单构建，针对资产标签输入字段进行校验，包括必填、非法字符和自定义规则（检查标签是否已存在）。自定义的标签校验规则利用some方法遍历数组，确保输入的标签值唯一且符合至少5个有效字符的条件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-form ref="dataFormRef" :model="state.formData" :rules="rules" class="margin-top">
    <el-form-item :key="label.key" :label="'资产标签-' + index" :prop="'labels.' + index + '.value'" :rules="rules.label">
          <el-input class="label-input" v-model.trim="label.value" :disabled="state.mode === 'ReadOnly'" placeholder="adn_offline">
          </el-input> 
        </el-form-item>
</el-form>

value是我们input中输入的值

// 自定义资产标签校验规则
const labelRule = (rule: any, value: any, callback: any) => {
  //数组中是否有label的值等于输入值，有则返回true，无则返回false
  const isIndexOf = state.newList.some(item=>{
    if (item.label==value) {
      return true 
    } else {
      return false
    }
  })
  if(isIndexOf){
    callback()
  }else{
    callback(new Error("资产标签输入错误，请重新输入"))
  }
}
// 表单校验
const rules = {
    label: [
        { required: true, message: '资产标签不能为空', trigger: 'blur' },
        { pattern: /^([a-z]|[A-Z]|\d|-|_){5,}/, message: '非法标签' },
        { validator: labelRule, trigger: 'blur'}
    ] // 至少5个有效字符
}