el-form表单怎么一次验证两个el-form-item

项目场景:

在项目中有【设置密码】以及【确认密码】输入,希望在两者一致的时候,两个框的错误提示都消失。


问题描述

提示:这里描述项目中遇到的问题:

重现步骤:

              1、第一个密码框 输入密码123456lyy
             
              2、确认密码框输入密码 123456lyy

              3、在确认密码框继续输入1------有两次密码不一致提示

              4、在第一个密码框继续输入1----密码不一致提示不消失

期望结果:消失
实际结果:如上,此时点击确定,可以提交
在这里插入图片描述


解决方案:

提示:想要解决,还得需要看element的官网。

主要用到的是对部分表单字段进行校验的方法,如下:

在这里插入图片描述
就是在【设置密码】的输入框输入密码时,在对【设置密码】校验中加入对【确认密码】的校验。

核心代码:

if( this.subAccount.subAccountconfirmPassword != '') {
   this.$refs.createAccount.validateField('subAccountconfirmPassword');
}

以下是完整的代码:

    <el-form
      ref="createAccount"
      :model="subAccount"
      :rules="subAccountRules">
      <el-form-item
        label="设置密码"
        prop="subAccountPassword">
        <el-input
          v-model.trim="subAccount.subAccountPassword"
          type="password"
          autocomplete="new-password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item 
      	label="确认密码" 
      	prop="subAccountconfirmPassword">
        <el-input
          v-model.trim="subAccount.subAccountconfirmPassword"
          type="password"
          autocomplete="new-password"
          placeholder="请再次输入密码"
        ></el-input>
      </el-form-item>
    </el-form>
  data() {
    const checkPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('密码不能为空'));
      } else {
        .....
        }
        if( this.subAccount.subAccountconfirmPassword != '') {
          this.$refs.createAccount.validateField('subAccountconfirmPassword');
        }
        callback();
      }
    };
    const validateConfirmPwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.subAccount.subAccountPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      subAccountRules: {
        subAccountPassword: [
          { required: true, message: '请输入密码', trigger: ['change', 'blur'] },
          { validator: checkPassword, 
          	trigger: ['change', 'blur'] 
          },
        ],
        subAccountconfirmPassword: [
          { required: true, message: '请再次输入密码', trigger: ['change', 'blur'] },
          {
            validator: validateConfirmPwd,
            trigger: ['change', 'blur'],
          },
        ],
      },
    };
  },

相关推荐

  1. el-form验证问题

    2024-03-27 18:06:02       52 阅读
  2. 列表循环多el-form-item并校验

    2024-03-27 18:06:02       41 阅读
  3. v-if 遇到 el-form 验证规则遇到的bug

    2024-03-27 18:06:02       41 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-27 18:06:02       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-27 18:06:02       100 阅读
  3. 在Django里面运行非项目文件

    2024-03-27 18:06:02       82 阅读
  4. Python语言-面向对象

    2024-03-27 18:06:02       91 阅读

热门阅读

  1. leetcode 栈和队列1

    2024-03-27 18:06:02       35 阅读
  2. 数据共享(InheritedWidget)

    2024-03-27 18:06:02       32 阅读
  3. 设计模式之装饰器模式

    2024-03-27 18:06:02       38 阅读
  4. 蓝桥杯真题训练 包子凑数(数论)

    2024-03-27 18:06:02       44 阅读
  5. C++之std::mem_fn使用和实现原理(全)

    2024-03-27 18:06:02       39 阅读
  6. 【力扣】134.加油站

    2024-03-27 18:06:02       39 阅读
  7. 2024-3-22 阿里云实习-一面

    2024-03-27 18:06:02       36 阅读
  8. uni-app 富文本编辑器

    2024-03-27 18:06:02       33 阅读
  9. `more` and `less`——查看内容时的导航比较

    2024-03-27 18:06:02       40 阅读
  10. Qt day3

    Qt day3

    2024-03-27 18:06:02      45 阅读
  11. css transform 平移、旋转、缩放、倾斜元素

    2024-03-27 18:06:02       42 阅读