ruler满足条件无法通过

Question

前端dialog对话框代码为：

<el-dialog  ref="form1" v-model="data.inDialogVisible" title="提示" width="500" center :before-close="handleClose">
        <el-form ref="form1" :model="data" :rules="data" label-width="auto" style="max-width: 600px">
          <el-dialog
              v-model="data.innerVisible"
              width="1000"
              title="内嵌用户选择"
              append-to-body
          />
          <el-form-item label="物品名" >
            <el-col :span="20" >
              <el-input v-model="data.form1.goodsname" disabled />
            </el-col>
          </el-form-item>
          <el-form-item label="申请人" >
            <el-col :span="20" >
              <el-input v-model="data.form1.username" readonly @click="selectUser"/>
            </el-col>
          </el-form-item>
          <el-form-item label="数量" prop="count" :rules="[
                        {required: true, message: '请输入数量', trigger: 'blur'},
                        {pattern: /^([1-9][0-9]*){1,4}$/,message: '数量必须为正整数字',trigger: 'blur'},
                        {validator:checkCount,trigger: 'blur'}
          ]">
            <el-col :span="20">
              <el-input v-model="data.form1.count" />
            </el-col>
          </el-form-item>
          <el-form-item label="备注" >
            <el-col :span="20">
              <el-input v-model="data.form1.remark" type="textarea" />
            </el-col>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="data.inDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="doInGoods">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>

提交的方法为：

    doInGoods(){
      this.$refs.form1.validate((valid) => {
        if (valid) {
          this.$axios.post(this.$httpUrl+'/record/save',(data.form1)).then(res=>res.data).then(res=>{
            console.log(res)
            if(res.code===200){
              this.$message({
                message: '操作成功！',
                type: 'success'
              });
              this.data.inDialogVisible = false
              this.loadGet()
              this. resetInForm()
            }else{
              this.$message({
                message: '操作失败！',
                type: 'error'
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },

为什么只填写了数量之后点击确认，无法通过valid，依然输出error submit!!
明明只有count存在条件？

Answer 1

上午好☀️☀️☀️️
本答案参考通义千问

根据你的描述，问题在于 this.$refs.form1.validate 方法无法通过验证，即使只填写了 count 字段。这可能是由于以下几个原因：

1. 表单模型和规则不匹配：this.data 和 this.data.form1 可能没有正确绑定。
2. 表单项的规则配置错误：prop 和 rules 的配置可能有问题。
3. Vue 组件引用问题：ref 可能没有正确绑定到表单项。

下面是详细的解决方案：

解决方案

1. 确保表单模型和规则正确绑定

   • 确保 this.data 和 this.data.form1 正确绑定。
   • 确保 el-form 的 model 属性指向正确的数据模型。

2. 检查表单项的规则配置

   • 确保 prop 和 rules 的配置正确。

3. 确保 Vue 组件引用正确

   • 确保 ref 正确绑定到表单项。

修改后的代码

<template>
  <el-dialog 
    ref="form1" 
    v-model="data.inDialogVisible" 
    title="提示" 
    width="500" 
    center 
    :before-close="handleClose"
  >
    <el-form 
      ref="form" 
      :model="data.form1" 
      :rules="rules" 
      label-width="auto" 
      style="max-width: 600px"
    >
      <el-dialog
        v-model="data.innerVisible"
        width="1000"
        title="内嵌用户选择"
        append-to-body
      />
      <el-form-item label="物品名" prop="goodsname">
        <el-col :span="20">
          <el-input v-model="data.form1.goodsname" disabled />
        </el-col>
      </el-form-item>
      <el-form-item label="申请人" prop="username">
        <el-col :span="20">
          <el-input v-model="data.form1.username" readonly @click="selectUser" />
        </el-col>
      </el-form-item>
      <el-form-item label="数量" prop="count" :rules="[
        { required: true, message: '请输入数量', trigger: 'blur' },
        { pattern: /^([1-9][0-9]*){1,4}$/, message: '数量必须为正整数字', trigger: 'blur' },
        { validator: checkCount, trigger: 'blur' }
      ]">
        <el-col :span="20">
          <el-input v-model="data.form1.count" />
        </el-col>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-col :span="20">
          <el-input v-model="data.form1.remark" type="textarea" />
        </el-col>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="data.inDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="doInGoods">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      data: {
        inDialogVisible: false,
        innerVisible: false,
        form1: {
          goodsname: '',
          username: '',
          count: '',
          remark: ''
        }
      },
      rules: {
        goodsname: [
          { required: true, message: '请输入物品名', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入申请人', trigger: 'blur' }
        ],
        count: [
          { required: true, message: '请输入数量', trigger: 'blur' },
          { pattern: /^([1-9][0-9]*){1,4}$/, message: '数量必须为正整数字', trigger: 'blur' },
          { validator: this.checkCount, trigger: 'blur' }
        ],
        remark: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    doInGoods() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$axios.post(this.$httpUrl + '/record/save', this.data.form1)
            .then(res => res.data)
            .then(res => {
              console.log(res);
              if (res.code === 200) {
                this.$message({
                  message: '操作成功！',
                  type: 'success'
                });
                this.data.inDialogVisible = false;
                this.loadGet();
                this.resetInForm();
              } else {
                this.$message({
                  message: '操作失败！',
                  type: 'error'
                });
              }
            });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    checkCount(rule, value, callback) {
      // 自定义验证逻辑
      if (!value) {
        callback(new Error('请输入数量'));
      } else if (!/^[1-9][0-9]{0,3}$/.test(value)) {
        callback(new Error('数量必须为正整数字'));
      } else {
        callback();
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    selectUser() {
      // 用户选择逻辑
    },
    loadGet() {
      // 加载数据逻辑
    },
    resetInForm() {
      // 重置表单逻辑
    }
  }
};
</script>

关键点解释

1. el-form 的 model 属性：确保 model 指向 data.form1。
2. el-form-item 的 prop 属性：确保每个表单项都有 prop 属性，并且与 rules 中的 prop 对应。
3. rules 配置：确保 rules 中的 prop 和 el-form-item 的 prop 一致。
4. 自定义验证方法：确保 checkCount 方法正确实现，并且在 rules 中引用。

通过以上修改，应该可以解决你遇到的问题。