如何在HTML中匹配信用卡过期日期模式?

Question

我想确保用户输入的信用卡截止日期格式为MM/YYYY, MM范围为01 ~ 12,YYYY范围为2016 ~ 2031(含)。

如何在HTML中使用模式匹配?

我尝试了以下操作，但没有成功:

<input type="text" pattern="d{1,2}/d{4}" class="datepicker" name="date" value="" />

Answer 1

你的样式有点不对。

你需要把输入放在表单中，你不能提交表单。

删除1,in month的正则表达式，因为你只想接受2位数的数字。

如果你想要数字范围，我认为最好使用javascript

设置输入的验证错误，可以使用setCustomValidity

const datePickers = document.querySelectorAll('.datepicker')
datePickers.forEach(picker => {
picker.addEventListener('input', (event) => {
const value = event.target.value
if (!/d{2}/d{4}/g.test(value))
return event.target.setCustomValidity('Invalid Date')
if (!value.includes('/'))
return event.target.setCustomValidity('Invalid Date')
const [month, year] = value.split('/')
const monthInt = parseInt(month, 10)
const yearInt = parseInt(year, 10)
if (monthInt < 0 || monthInt > 12)
return event.target.setCustomValidity('Invalid Month')
if (yearInt < 2016 || yearInt > 2031)
return event.target.setCustomValidity('Invalid Year')
event.target.setCustomValidity('')
})
})

<form>
<input type="text" class="datepicker" name="date" value="" />
<button type="submit">submit</button>
</form>