在表单验证当中,this.$refs.form.validate方法不执行
在表单验证当中,this.$refs.form.validate方法不执行addUser() {console.log(12);// 可以执行this.$refs.addFormRef.validate((valid) => {console.log(valid); // 不执行});}注:html代码如下<el-dialog title="添加用户" :visible.sync="a
·
在表单验证当中,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()
}
};
参考:https://blog.csdn.net/xiaoguaihu12/article/details/98882682?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase
更多推荐
已为社区贡献1条内容
所有评论(0)