我有一个vue应用程序,它在引导模式中有一个更新表单。单击“编辑”按钮时,它会向用户显示模式,并使用数据库中已有的数据填充表单字段,如下面所示的方法showupdateform()。表单字段按预期填充,但问题出现在我尝试提交表单时,vee validate将所有字段标记为空,除非每个字段都已编辑,否则该字段的错误消息将消失。因此,用户必须对所有字段执行此操作,即使是那些他不需要更改的字段。行为示例如所附屏幕截图所示。我正在使用vee validate 4+是的。下面标题为vee validate的章节中显示了vee validate的示例。
截图
showupdateform()
showUpdateForm(employer) {
$('#employer-name').val(employer['employer_name']);
$('#employer-address').val(employer['employer_address']);
$('#phone-number').val(employer['phone']);
$('#email').val(employer['email']);
$('#updateEmployer').modal('show');
},
V形验证段
模板
<template>
<div class="modal fade" id="updateEmployer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title">
<h3>Update employer</h3>
</div>
</div>
<div class="modal-body">
<Form :validation-schema="validation_schema">
<Field name="employer_name" id="employer-name" type="text" />
<ErrorMessage name="employer_name" /><br>
<Field name="employer_address" id="employer-address" type="text" />
<ErrorMessage name="employer_address" /><br>
<Field name="phone_number" id="phone-number" type="text" />
<ErrorMessage name="phone_number" /><br>
<Field name="email" id="email" type="email" />
<ErrorMessage name="email" /><br>
<button class="btn btn-primary w-100 font-weight-bold">Save</button>
</Form>
</div>
</div>
</div>
</div>
</template>
剧本
<script>
import { Form, Field, ErrorMessage } from "vee-validate"
import * as yup from "yup"
export default{
components: {
Form,
Field,
ErrorMessage,
},
data(){
const validation_schema = {
employer_name: yup.string().required().label("Employer name"),
employer_address: yup.string().required().label("Employer address"),
phone_number: yup.string().required().label("Phone number"),
email: yup.string().required().email().label("Email"),
}
return{
validation_schema,
}
},
}
</script>
暂无答案!
目前还没有任何答案,快来回答吧!