Vue 多表单校验
Vue 多表单校验方法
·
Vue 多表单检验
1.应用场景:当需要使用到多个form表单;每个form绑的ref值不同;可以理解为这个ref是这个form的id。
2.校验方法:this.$refs[“formname”].validate,这个是elementui里面自带的校验方法;
还需要使用ES6的新特性,promise;promise其实就是一个构造函数
3.代码:
这是js部分,template里面只需要写form表单就可以了
const base = new Promise((resolve, reject) => {
this.$refs["aform"].validate(valid => {
if (valid) {
resolve();
}
});
});
const soap = new Promise((resolve, reject) => {
this.$refs["bform"].validate(valid => {
if (valid) {
resolve();
}
});
});
const http = new Promise((resolve, reject) => {
this.$refs["cform"].validate(valid => {
if (valid) {
resolve();
}
});
});
const mq = new Promise((resolve, reject) => {
this.$refs["dform"].validate(valid => {
if (valid) {
resolve();
}
});
});
const sql = new Promise((resolve, reject) => {
this.$refs["eform"].validate(valid => {
if (valid) {
resolve();
}
});
});
const tcp = new Promise((resolve, reject) => {
this.$refs["fform"].validate(valid => {
if (valid) {
resolve();
}
});
});
if (this.addlist.AdapteroptionsValue == "SOAP") {
Promise.all([base, soap]).then(() => {
this.subscriberRegisterSave();
this.$message.success("新建成功");
this.dialogFormVisible = false;
this.$refs["aform"].resetFields();
this.$refs["bform"].resetFields();
this.$refs["cform"].resetFields();
this.$refs["dform"].resetFields();
this.$refs["eform"].resetFields();
this.$refs["fform"].resetFields();
});
}
更多推荐
已为社区贡献2条内容
所有评论(0)