<el-form :model="addForm" :rules="addRules" ref="addForm" label-width="110px">
<el-form-item label="活動名稱" prop="name" style="width: 425px;">
<el-input v-model="addForm.name" size="medium" placeholder="請填寫活動名稱"></el-input>
</el-form-item>
<el-form-item label="聯系電話" prop="tel" style="width: 425px;">
<el-input v-model="addForm.tel" size="medium" placeholder="請填寫聯系電話"></el-input>
</el-form-item>
<el-form-item label="需要人數" prop="personNumber" style="width: 425px;">
<el-input v-model="addForm.personNumber" size="medium" placeholder="請填寫活動需要人數"></el-input>
</el-form-item>
<el-form-item label="最大報名人數" prop="maxPersonNumber" style="width: 425px;">
<el-input v-model="addForm.maxPersonNumber" size="medium" placeholder="請填寫活動最大報名人數"></el-input>
</el-form-item>
</el-form>
export default {
data() {
var checkPhone = (rule, value, callback) => {
if (!value) {
return callback(new Error('手機號不能為空'));
} else {
const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
if (reg.test(value)) {
callback();
} else {
return callback(new Error('請輸入正確的手機號'));
}
}
};
var checkpersonNumber = (rule, value, callback) => {
if (Number.isInteger(Number(value)) && Number(value) > 0) {
if (this.addForm.maxPersonNumber != "") {
if (value > Number(this.addForm.maxPersonNumber)) {
callback(new Error("需要人數不能大於最大報名人數"));
} else {
callback();
}
} else {
callback();
}
} else {
callback(new Error("請輸入有效數字"));
}
};
var checkMaxpersonNumber = (rule, value, callback) => {
if (Number.isInteger(Number(value)) && Number(value) > 0) {
if (this.addForm.personNumber != "") {
if (value < Number(this.addForm.personNumber)) {
callback(new Error("最大報名人數不能小於需要人數"));
} else {
callback();
}
} else {
callback();
}
} else {
callback(new Error("請輸入大於0的有效數字"));
}
};
return {
addRules: {
name: [{
required: true,
message: "請輸入活動名稱",
trigger: "blur"
}],
tel: [{
required: true,
validator: checkPhone,
trigger: 'blur'
}],
personNumber: [{
required: true,
validator: checkpersonNumber,
trigger: "blur"
}],
maxPersonNumber: [{
required: true,
validator: checkMaxpersonNumber,
trigger: "blur"
}],
},
}
}
}，
methods: {
submitForm() {
this.$refs.addForm.validate((valid) => {
if (valid) {
//驗證成功執行
that.$router.push({
path: "/partybuilding/activity"
});
} else {
that.$message.error(response.data.msg);
}
}).catch(function(err) {
console.log(err);
});
} else {
//定位錯誤位置
setTimeout(() => {
var isError = document.getElementsByClassName("is-error");
isError[0].querySelector('input').focus();
}, 100);
return false;
}
});
},
}