虽然验证没通过，但是valid却是‘true’

[qiufeihong2018]

虽然验证没通过，但是valid却是‘true’ template：

<el-row :gutter="40" class="form-wrapper">
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <el-form
            ref="userForm"
            :model="userForm"
            status-icon
            :rules="rules"
            label-position="left"
            label-width="150px"
          >
            <el-form-item label="用户名" prop="username">
              <el-input v-model="userForm.username" />
            </el-form-item>
            <el-form-item label="角色" prop="role">
              <el-select v-model="userForm.role" placeholder="请选择角色">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
                  width="200px"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="岗位" prop="station">
              <el-input v-model="userForm.station" />
            </el-form-item>
            <el-form-item label="联系电话" prop="contactNumber">
              <el-input v-model.number="userForm.contactNumber" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="userForm.email" />
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
          <el-form
            ref="userForm"
            :model="userForm"
            status-icon
            :rules="rules"
            label-position="left"
            label-width="150px"
          >
            <el-form-item label="密码" prop="password">
              <el-input v-model="userForm.password" type="password" autocomplete="off" show-password />
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPassword">
              <el-input v-model="userForm.checkPassword" type="password" autocomplete="off" show-password />
            </el-form-item>
            <el-form-item label="用户组名单" prop="userGroupList">
              <el-select v-model="userForm.userGroupList" multiple filterable default-first-option placeholder="请选择用户组">
                <el-option v-for="item in userGroupOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="允许登录IP段">
              <el-input v-model="userForm.allowLoginToIPSegmentStart" style="width: calc(50% - 32px)" />
              <span>————</span>
              <el-input v-model="userForm.allowLoginToIPSegmentEnd" style="width: calc(50% - 32px)" />
            </el-form-item>
            <el-form-item label="允许登录MAC地址" prop="allowLoginToMACAddress">
              <el-input v-model="userForm.allowLoginToMACAddress" type="textarea" :rows="2" placeholder="请输入内容" />
            </el-form-item>
            <el-form-item>
              <div class="button-container">
                <el-button type="primary" @click="register(userForm)">确定</el-button>
                <el-button type="info" @click="cancle('userForm')">取消</el-button>
              </div>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

rules：

rules: {
        // 用户检验
        username: [{
          required: true,
          message: 'Username must be filled in',
          trigger: 'blur'
        }, {
          min: 6,
          max: 20,
          message: 'Length 6-20',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: 'Password must be filled in',
          trigger: 'blur'
        }, {
          min: 6,
          max: 20,
          message: 'Length 6-20',
          trigger: 'blur'
        }],
        checkPassword: [{
          validator: validatePass2,
          trigger: 'blur'
        }],
        role: [{
          required: true,
          message: 'Role must be filled in',
          trigger: 'blur'
        }],
        station: [{
          required: true,
          message: 'Station must be filled in',
          trigger: 'blur'
        }],
        contactNumber: [{
          required: true,
          message: 'ContactNumber must be filled in',
          trigger: 'blur'
        }, {
          type: 'number',
          trigger: 'blur'
        }],
        email: [{
          required: true,
          message: 'Email must be filled in',
          trigger: 'blur'
        }, {
          type: 'email',
          trigger: 'blur'
        }]
……………………

methods:

 register(userForm) {
      this.$refs['userForm'].validate((valid) => {
        if (valid) {
          apiManage.register(userForm).then((res) => {
            this.$notify({
              title: '添加成功',
              message: res.message,
              type: 'success'
            })
          }).catch((err) => {
            this.$notify({
              title: '添加失败',
              message: err,
              type: 'error'
            })
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

错误演示

明明用户名长度超出范围，其余字段未填

运行后，打印的valid是true

还能把请求发出去

[hechengzhang]

同样的问题

[ygj6]

You defined two ref = "userForm" in the template, and $refs ['userForm'] can only get the last userForm object, so register will only verify the last userForm.

[ningblue]

我也遇到了同样的问题,后来发现应该是 ref绑定的值和roles的值的字段名有重复. 如果ref中的对应数值不为空的时候,那么即使对应字段为空,也不会触发验证失败.