极客观点
项目管理
HarmonyOS
我用ai生成了前端代码，要求字段都要校验，但不起作用。请问前端大佬们，哪里出错了？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>外出申请</title>
<link rel="stylesheet" href="/static/vue/css/index.css">
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
margin: 0;
padding: 10px;
}
.outing-app {
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.el-form-item {
margin-bottom: 15px;
}
.el-form-item__label {
width: 100%;
text-align: left;
font-size: 16px;
}
.el-form-item__content {
width: 100%;
}
.el-input, .el-textarea, .el-date-editor, .el-time-picker {
width: 100%;
}
.el-button {
width: 100%;
margin-top: 10px;
}
.detail-item {
border: 1px solid #ebeef5;
padding: 10px;
border-radius: 4px;
margin-bottom: 10px;
}
.remove-btn {
margin-left: 10px;
}
@media (min-width: 768px) {
.el-form-item {
display: flex;
align-items: center;
}
.el-form-item__label {
width: auto;
}
.el-form-item__content {
flex-grow: 1;
}
}
</style>
<script src="/static/vue/js/vue.js"></script>
<script src="/static/vue/js/index.js"></script>
<script src="/static/vue/js/axios.min.js"></script>
<script src="/static/js/moment.min.js"></script>
<script src="/static/js/compress.js"></script>
</head>
<body>
<div id="outingApp" class="outing-app">
<el-form ref="outingForm" :model="outingForm" :rules="rules" label-position="top">
<el-form-item label="外出人员" prop="personName">
<el-input v-model="outingForm.personName" placeholder="请输入外出人员姓名"></el-input>
</el-form-item>
<el-form-item label="外出明细">
<el-button type="primary" @click="addOutingDetail">新增外出明细</el-button>
<div v-for="(detail, index) in outingForm.details" :key="index" class="detail-item">
<el-form-item label="外出地点" :prop="'details[' + index + '].location'">
<el-input v-model="detail.location" placeholder="外出地点"></el-input>
</el-form-item>
<el-form-item label="日期" :prop="'details[' + index + '].date'">
<el-date-picker
v-model="detail.date"
type="date"
placeholder="日期"
disabled
default-value="new Date()">
</el-date-picker>
</el-form-item>
<el-form-item label="开始时间" :prop="'details[' + index + '].startTime'">
<el-time-picker
v-model="detail.startTime"
placeholder="开始时间"
format="HH:mm:ss"
value-format="HH:mm:ss">
</el-time-picker>
</el-form-item>
<el-form-item label="结束时间" :prop="'details[' + index + '].endTime'">
<el-time-picker
v-model="detail.endTime"
placeholder="结束时间"
format="HH:mm:ss"
value-format="HH:mm:ss">
</el-time-picker>
</el-form-item>
<el-button v-if="outingForm.details.length > 1" type="danger" class="remove-btn" @click="removeOutingDetail(index)">删除</el-button>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交申请</el-button>
</el-form-item>
</el-form>
</div>
<script>
new Vue({
el: '#outingApp',
data() {
return {
outingForm: {
personName: '',
details: [
{
location: '',
date: new Date(),
startTime: '',
endTime: ''
}
]
},
rules: {
personName: [
{ required: true, message: '外出人员不能为空', trigger: 'blur' },
],
details: [
{
validator: (rule, value, callback) => {
value.forEach((detail, index) => {
if (!detail.location) {
callback(new Error('外出地点不能为空'));
} else if (!detail.startTime) {
callback(new Error(`第${index + 1}条外出明细的开始时间不能为空`));
} else if (!detail.endTime) {
callback(new Error(`第${index + 1}条外出明细的结束时间不能为空`));
} else if (detail.endTime <= detail.startTime) {
callback(new Error(`第${index + 1}条外出明细的结束时间不能早于开始时间`));
} else {
callback();
}
});
},
trigger: 'blur'
}
]
}
};
},
methods: {
addOutingDetail() {
this.outingForm.details.push({
location: '',
date: new Date(),
startTime: '',
endTime: ''
});
},
removeOutingDetail(index) {
if (this.outingForm.details.length > 1) {
this.outingForm.details.splice(index, 1);
}
},
submitForm() {
this.$refs.outingForm.validate((valid) => {
console.log(valid)
if (valid) {
alert('外出申请提交成功');
// 这里可以添加提交表单的代码，例如发送请求到服务器
} else {
console.log('表单验证失败');
return false;
}
});
}
}
});
</script>
</body>
</html>
<el-form-item label="外出明细">上的prop属性没加导致的吧；这行改为
<el-form-item label="外出明细" prop="details">