我刚刚开始学习javascript和html。
我对EventListener有一个问题，它似乎根本不起作用。在我的代码中，我有一个文本框，供用户输入DD/MM/YYYY格式的日期值。总体代码是有效的，即日/月/年检查，但我考虑添加高级功能，如自动插入斜杠。
引用了自动将"/"添加到日期的Javascript输入为了寻求帮助，问题中的解决方案回答了我的原因，但一旦我将其复制到代码中，自动斜杠就根本不起作用。
起初，我认为可能是onChange导致了这个问题，我尝试删除它，仍然是同一个问题。
这是我的代码
<!DOCTYPE html>
<html>
<title> Date Test</title>
<script type="text/javascript">
function checkDob()
{
var dobInput = document.getElementById("dobTxt").value;
var dobData = dobInput.split("/");
var day = dobData[0];
var month = dobData[1];
var year = dobData[2];
if (checkMonth(month))
checkDay(day, month, year);
}
function checkDay(dayValue, monthValue, yearValue)
{
if (dayValue<1 || dayValue>28)
{
alert("only have 28 days");
}
// For months - April, June, September, November
// Only have 30 days
if (monthValue==4 || monthValue==6 || monthValue==9 || monthValue==11)
{
if (dayValue<1 || dayValue>30)
{
alert("only have 30 days");
}
}
else
{
// All other months only have 31 days
if (dayValue<1 || dayValue>30)
{
alert("only have 31 days");
}
}
}
function checkMonth(monthValue)
{
if (monthValue<1 || monthValue>12)
{
alert("Invalid month value. Please re-enter between 1 to 12.");
return false;
}
return true;
}
var dob = document.getElementById("dobTxt");
dob.addEventListener("keydown", setDate);
function setDate() {
dob.value = dob.value.replace(/^(dd)(d)$/g,"$1-$2").replace(/^(dd-dd)(d+)$/g,"$1-$2").replace(/[^d-]/g,'');
}
</script>
<body>
<form id="form">
<!-- DOB Element -->
<label>Date of Birth</label>
<input id="dobTxt" name="birthdate" type="text" maxlength="10"placeholder="DD/MM/YYYY" onchange="checkDob()" />
<br>
</form>
</body>
</html>
我需要做些什么来启用事件侦听器功能吗？我正在使用Google Chrome运行我的html，也在其他浏览器中尝试过，遇到了同样的问题。
如果有人能对此有所了解，请提前表示感谢。
对replace和验证器做了一个细微的更改(用'/'分隔(，它似乎正在工作。
function checkDob() {
var dobInput = document.getElementById("dobTxt").value;
var dobData = dobInput.split("/");
var day = dobData[0];
var month = dobData[1];
var year = dobData[2];
if (checkMonth(month))
checkDay(day, month, year);
}
function checkDay(dayValue, monthValue, yearValue) {
console.log(dayValue, monthValue, yearValue)
if (dayValue < 1 || dayValue > 28) {
alert("only have 28 days");
}
// For months - April, June, September, November
// Only have 30 days
if (monthValue == 4 || monthValue == 6 || monthValue == 9 || monthValue == 11) {
if (dayValue < 1 || dayValue > 30) {
alert("only have 30 days");
}
} else {
// All other months only have 31 days
if (dayValue < 1 || dayValue > 30) {
alert("only have 31 days");
}
}
}
function checkMonth(monthValue) {
console.log('monthValue', monthValue)
if (monthValue < 1 || monthValue > 12) {
alert("Invalid month value. Please re-enter between 1 to 12.");
return false;
}
return true;
}
function setDate() {
const dob = document.getElementById("dobTxt")
dob.value = dob.value.replace(/^(dd)(d)$/g, "$1/$2").replace(/^(dd/dd)(d+)$/g, "$1/$2").replace(/[^d/]/g, '');
}
// set the eventlistener after the page loads
window.onload = function() {
const dob = document.getElementById("dobTxt")
dob.addEventListener("keydown", setDate);
}<form id="form">
<!-- DOB Element -->
<label>Date of Birth</label>
<input id="dobTxt" name="birthdate" type="text" maxlength="10" placeholder="DD/MM/YYYY" onchange="checkDob()" />
<br>
</form>