在表单验证当中，this.$refs.form.validate方法不执行
addUser() {
console.log(12); // 可以执行
this.$refs.addFormRef.validate((valid) => {
console.log(valid); // 不执行
});
}
注：html代码如下
<el-dialog title="添加用户" :visible.sync="addDialogVisible" width="50%" @close="addFormClosed">
<!-- 内容主体区域--表单 -->
<el-form ref="addFormRef" :model="addForm" label-width="70px" :rules="addFormRules">
<el-form-item label="邮箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addUser">确 定</el-button>
</span>
</el-dialog>
原因是：以下代码中的校验规则中的callback回调函数没有保证一定会执行，应添加else，并调用callback！
错误代码：
data() {
// 定义邮箱的验证规则
var validEmail = (rule, value, callback) => {
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if (!reg.test(value)) {
callback(new Error("请输入正确的邮箱地址！"));
} // 错误写法
};
正确代码：
data() {
// 定义邮箱的验证规则
var validEmail = (rule, value, callback) => {
var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if (!reg.test(value)) {
callback(new Error("请输入正确的邮箱地址！"));
} else {
callback()
}
};
————————————————
版权声明：本文为CSDN博主「一只小炸毛」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_37418556/article/details/107363799
