el-form验证规则 bug

Question

el-form验证规则 bug

<el-form-item prop="contact">
                  <el-input v-model="scope.row.contact" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入联系方式"></el-input>
</el-form-item>

    const validatePhone = (rule, value, callback) => {
      if (!value) {
        // callback(new Error('请填写联系方式'))
      } else {
        var isPhone = /^1[3456789]\d{9}$/;
        var isMob = /^(0\d{2,3}-)?(\d{7,8})$/;
        if (isMob.test(value) || isPhone.test(value) || !value) {
          return callback();
        } else {
          callback(new Error('电话号码格式错误'))
        }
      }
    }

        contact: [
          {validator: validatePhone, trigger: 'blur'}
        ],

有一个bug就是我输入法切换到中文之后
随便乱摁几下就导致我的验证规则失效了 要不就是验证规则永远不成功
我是只能输入数字的 所以乱摁英文字母也没事儿 但是切换到中文键盘随便摁几下虽然输入不进去内容 但是会导致我的验证失效

Answer 1

• 以下回答由chatgpt基于相关博客总结生成:

  我无法通过简单地更改验证规则来解决该问题。由参考资料提供的解决方案是利用watch去监听form的数据来触发验证。对于这个问题的具体解决方法如下：

  1.在模板中定义一个watch监视器，用于监视联想的输入。 2.在监视器中检查输入的值，如果它达到了期望的长度就触发表单验证。 3.在methods中添加表单单项验证和验证码验证的方法，以及一些必要的辅助函数。 4.确保每个输入框都验证正确后在提交表单之前再次验证表单。 详细步骤可以根据参考资料段落1中提供的代码实现。