Element-ui表单验证验证失败,input内有内容仍然验证为空的问题,验证数值类型不一致问题

原创已于 2024-01-02 11:33:26 修改 · 1.3w 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#ui #前端 #vue #elementui #javascript

于 2021-11-15 14:12:50 首次发布

本文总结了Element-UI表单验证中遇到的常见问题，包括输入为空未提醒、已有内容仍提示不能为空以及提交表单验证失败等。针对这些问题，提供了详细的解决方法，强调了表单验证必须绑定数组以及正确使用this.$refs进行表单验证。通过检查代码格式和绑定方式，可以有效地解决表单验证错误。

首先展示正确的格式(以验证是否为空为例):

html代码块:

<el-form :model="nodeName(数组名)" ref="nodeName(数组名)">
      <el-form-item prop="name(数组内的属性)" label="内容:" :rules="[{ required: true, message: '不能为空'}]">
        <el-input type="name(数组内的属性)" v-model="nodeName.name(数组内的属性)"></el-input>
      </el-form-item>
</el-form>

js代码块:

data(){
    return{
      // 表单
      nodeName:{
        name:''
      }
    }
  },

前端展示(输入内容后显示为空消失):

下面开始总结常见的问题以及功能失效的原因.

1. input左侧出现星号,内容为空却不提醒

原因:已经写好了验证功能,但是没有绑定到input框 .

解决方法:是<el-form-item>标签加入prop="数组内要验证的属性"或者<el-input>标签中加入type="数组内要验证的属性".

2.input框里已经有内容,但还是显示不能为空

(一)原因:input有数据,但是表单没有验证到.

解决方法:给<el-form>绑定整个数组.v-model="newName".

(二)原因:表单验证绑定的不是数组,只是一个单纯的ojbect或者number或者char类型

如此种情况,无论输入什么都会提示为空.

解决方法:将绑定验证内容变成数组【也可以把表单验证写在data里面】

[表单验证只能绑定数组,如果单纯绑定一个数值,会出现验证不到的现象发生]!!!!!!!!!

3.提交表单按钮无法验证以及符合验证的表单内容,也就是提交失败.

此情况一般报错为两个:

Element-ui官方样式表单提交函数功能是这样展示的:

newNameBtn(newName) {
        this.$refs[newName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

我们可以看到方法是this.$refs[数组名].validate(() =>{})或者this.$refs.数组名.validate(() =>{})这样一个函数.

如果你用的html5或者是其他不显示参数的集成工具,代码是这样的: