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

<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个有效字符
}

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 Element Plus是一套基于Vue3的UI组件库提供了丰富的组件和功能,其中包括了Form表单组件。在Element Plus中,可以通过动态校验来实现同一字段的表单动态校验。 在Vue3 Element Plus中,可以使用`el-form`组件来创建表单,通过`el-form-item`组件来包裹表单项。要实现同一字段的表单动态校验,可以使用`rules`属性来定义校验规则。 首先,需要在Vue组件中定义表单数据和校验规则。例如: ```javascript data() { return { form: { field1: '', field2: '' }, rules: { field1: [ { required: true, message: '字段1不能为空', trigger: 'blur' }, // 其他校验规则 ], field2: [ { required: true, message: '字段2不能为空', trigger: 'blur' }, // 其他校验规则 ] } } } ``` 然后,在模板中使用`el-form`和`el-form-item`组件来创建表单,并绑定数据和校验规则。例如: ```html <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="字段1" prop="field1"> <el-input v-model="form.field1"></el-input> </el-form-item> <el-form-item label="字段2" prop="field2"> <el-input v-model="form.field2"></el-input> </el-form-item> </el-form> </template> ``` 最后,可以通过调用`validate`方法来触发表单校验。例如: ```javascript methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 校验通过,提交表单 } else { // 校验不通过,处理错误信息 } }); } } ``` 这样,就可以实现同一字段的表单动态校验了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值