vue 表单ajax 校验,使用vue + element-ui在表单验证的时候怎么调用后台接口进行异步校验...

请输入代码

提交

重置

export default {

data() {

var checkAge = (rule, value, callback) => {

if (!value) {

return callback(new Error('年龄不能为空'));

}

setTimeout(() => {

if (!Number.isInteger(value)) {

callback(new Error('请输入数字值'));

} else {

if (value < 18) {

callback(new Error('必须年满18岁'));

} else {

callback();

}

}

}, 1000);

};

var validatePass = (rule, value, callback) => {

if (value === '') {

callback(new Error('请输入密码'));

} else {

if (this.ruleForm2.checkPass !== '') {

this.$refs.ruleForm2.validateField('checkPass');

}

callback();

}

};

var validatePass2 = (rule, value, callback) => {

if (value === '') {

callback(new Error('请再次输入密码'));

} else if (value !== this.ruleForm2.pass) {

callback(new Error('两次输入密码不一致!'));

} else {

callback();

}

};

return {

ruleForm2: {

pass: '',

checkPass: '',

age: ''

},

rules2: {

pass: [

{ validator: validatePass, trigger: 'blur' }

],

checkPass: [

{ validator: validatePass2, trigger: 'blur' }

],

age: [

{ validator: checkAge, trigger: 'blur' }

]

}

};

},

methods: {

submitForm(formName) {

this.$refs[formName].validate((valid) => {

if (valid) {

alert('submit!');

} else {

console.log('error submit!!');

return false;

}

});

},

resetForm(formName) {

this.$refs[formName].resetFields();

}

}

}