问题描述
我正在使用Express和Pug来保存表单并检查客户端和服务器端的验证。加载表单时，它会检查先前找到的值，否则默认为""，对于我的字段enquiryType和vehicleType和pickupAddress，我似乎无法弄清楚为什么响应变量没有填充文本区域，单选或选择值。
我可以看到标题中的值，甚至尝试将vars公开给我的js以供外部使用，然后将checked属性添加到与所选输入ID匹配的输入框中，但即使如此也没有工作。在下面的示例中，pax可以正常工作，但PickupAddress不能正常工作。我的其他两个字段也遇到了相同的问题，即enquiryType radio select和vehicleType dropdown select。
为什么我的模板中没有填充变量？我想念什么吗？猫鼬是否期望textara，selectBox和radio的数据类型不同？这些类型有警告吗？
帕格形式
form#addForm.my-2(
name='addForm'
action='/'
method='POST'
autocomplete='on'
)
input(type='hidden' name='_id' value='')
input(type='hidden' name='dateBooked' value=dt.today())
div.form-row.justify-content-center.md-auto
div.form-group.col-md-auto
div.form-check.form-check-inline
//-if transport.enquiryType=='enquiry'
input.form-check-input(
id='enquiry'
type='radio'
name='enquiryType'
value='enquiry'
required
)
label.my-0 Enquiry
div.form-check.form-check-inline
//-if transport.enquiryType=='booking'
input.form-check-input(
id='booking'
type='radio'
name='enquiryType'
value='booking'
required
)
label.my-0 Booking
div.text-danger #{transport.enquiryTypeError}
div.form-group.col-md-2
label Phone
if !transport.phone
input.form-control(
type='text'
name='phone'
placeholder='+27 82 123 4567'
value=''
required
)
else if transport.phone
input.form-control(
type='text'
name='phone'
placeholder='+27 82 123 4567'
value=`${transport.phone}`
)
div.text-danger #{transport.phoneError}
div.form-row.justify-content-center
div.form-group.col-md-3
label Select a Vehicle
select.form-control#vehicleType(
type='select'
name='vehicleType'
required
)
option(value='selectedVehicle' hidden='hidden') -Select
option(value='hyundaisonata') Hyundai Sonata
option(value='hyundaiH1') Hyundai H1
option(value='quantum') Toyota Quantum
div.text-danger #{transport.vehicleTypeError}
div.form-group.col-md-1
label pax
if !transport.pax
input.form-control(
type='text'
name='pax'
placeholder='pax'
value=''
required
)
else if transport.pax
input.form-control(
type='text'
name='pax'
placeholder='pax'
value=`${transport.pax}`
)
div.text-danger #{transport.paxError}
div.form-row.justify-content-center
div.form-group.col-md-4
label Pickup Address
if !transport.pickupAddress
textarea.form-control(
type='textarea'
name='pickupAddress'
placeholder='Address..'
value=''
required
)
else if transport.pickupAddress
textarea.form-control(
type='textarea'
name='pickupAddress'
placeholder='Address..'
value=`${transport.pickupAddress}`
)
div.text-danger #{transport.pickupAddressError}
div.form-row.justify-content-center
div.form-row.col-md-4.justify-content-center
div.col.md-auto
button.btn.btn-block.btn-danger(type='submit' href="/" + transport._id )
i.fa.fa-paper-plane(aria-hidden=true)
span Send Booking
button.btn.btn-block.btn-light(type='reset')
i.fa.fa-paper-plane(aria-hidden=true)
span Reset Form
型号
const mongoose = require('mongoose');
const transportSchema = new mongoose.Schema({
enquiryType: {
type: String,required: 'This field is required',},fullName: {
type: String,customerEmail: {
type: String,phone: {
type: String,vehicleType: {
type: String,pax: {
type: String,tourDate: {
type: String,pickupAddress: {
type: String,notes: {
type: String,// hidden field
dateBooked: {
type: String,});
// Custom validation for email
transportSchema.path('customerEmail').validate((val) => {
emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return emailRegex.test(val);
},'Invalid e-mail.');
module.exports = mongoose.model('TransportBooking',transportSchema,'AllTransportBookings');
我尝试过的一些方法。
const el = document.getElementsByName('enquiryType');
if (el.hasAttribute('value') == 'enquiry') {
el.setAttribute('checked');
} else if (el.hasAttribute('value') == 'booking') {
el.setAttribute('checked');
}
例如，尝试通过PUG公开外部JS-我可以读取这些值，但由于某些原因不能使用
script.
var enquiry = !{JSON.stringify(transport.enquiryType)}
var car = !{JSON.stringify(transport.vehicleType)}
尝试获取和编辑元素（具有相同问题的单选按钮）
if (enquiry == 'enquiry') {
const enquiryRadio = document.getElementById('enquiry');
const bookingRadio = document.getElementById('booking');
enquiryRadio.checked = true;
bookingRadio.checked = false;
} else if (enquiry == 'booking') {
const enquiryRadio = document.getElementById('enquiry');
const bookingRadio = document.getElementById('booking');
enquiryRadio.checked = false;
bookingRadio.checked = true;
};
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）