2024年1月流感情况_互联网公司薪酬体系_沈阳疫情最新消息_江苏网站开发

1. 验证规则的定义问题

首先检查一下你的验证规则是否正确。Vue 表单验证通常是用 rules 来设置的。如果字段值已经赋值，但仍然提示必填项错误，可能是规则写得有问题。你可以确保 xxx 字段的验证规则中 required 设置是正确的。
先确认字段值有没有初始化，也就是form里该字段有没有写上，先初始化
例如：

rules: {xxx: [{ required: true, message: '联系人不能为空', trigger: 'blur' },// 其他验证规则]
}

2. 表单初始化时赋值

确保在初始化表单数据时，你给字段 xxx 赋的值是有效的，并且在表单加载时数据已经完全赋值。

例如，在 Vue 组件中：

data() {return {form: {xxx: 'John Doe' // 确保这值已经初始化}}
}

3. 异步赋值

如果你在 mounted 或 created 中进行异步赋值，可能导致表单验证在字段值还没有赋值时就进行了验证。你可以确保在赋值之后再进行表单验证，或者手动触发验证。

例如，如果是异步赋值：

mounted() {// 异步获取数据后赋值setTimeout(() => {this.form.xxx= 'John Doe';}, 1000);  // 假设这是一秒后赋值
}

在这种情况下，可能需要延迟验证，可以在数据加载完之后调用 this.$refs.form.validate()。

4. 校验触发时机

Vue 的表单验证一般是在输入框失去焦点时或者提交时触发。如果你有动态表单数据或字段，你可能需要手动调用 validate 或 validateField 来重新触发验证。

例如：

this.$refs.form.validateField('xxx');

5. 数据绑定问题

确认你表单元素的数据绑定是否正确。在 Vue 中使用表单时，通常要用 v-model 来绑定数据。如果没有正确绑定，验证规则可能无法识别到正确的字段值。

<el-form :model="form" :rules="rules" ref="form"><el-form-item label="联系人" prop="shlxr"><el-input v-model="form.xxx"></el-input></el-form-item>
</el-form>

6. 表单的校验方式

你可以手动触发校验，而不是依赖于自动校验。例如，在提交按钮上加上手动触发验证的代码：

submit() {this.$refs.form.validate((valid) => {if (valid) {// 提交数据} else {console.log('验证失败');return false;}});
}

7. 异常提示

如果表单在验证时直接禁用输入框，可以检查一下是否有 disabled 或者 readonly 属性绑定到输入框上。如果是使用了 async-validator 进行异步验证，确保这个验证规则的异步操作没有返回错误，导致表单被锁定。