用正方表达式限定输入框中只能输入4位数字表示的年份和1位或2位数字表示年份
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>限定输入内容</title>
</head>
<script>
window.onload =function () {
//获取元素对象
var form = document.getElementById('form');
var result = document.getElementById('result');
var inputs = document.getElementsByTagName('input');
//对表单的提交进行验证
form.onsubmit = function () {
return checkYear(inputs.year) && checkMonth(inputs.month);
}
//验证年份
function checkYear(obj) {
if (!obj.value.match(/^\d{4}$/)) {
obj.style.borderColor = 'red';
result.innerHTML = '输入错误,年份为4位数字表示';
return false;
}
result.innerHTMl = '';
return true;
}
//验证月份
function checkMonth(obj) {
if (!obj.value.match(/^((0?[1-9])|(1[012]))$/)) {
obj.style.boderColor = 'red';
result.innerHTML = '输入错误,月份为1-12之间';
return false;
}
result.innerHTML = '';
return true;
}
//年份添加单击事件
inputs.year.onfocus = function () {
this.style.borderColor = '';
};
//月份添加单击事件
inputs.month.onfocus = function () {
this.style.borderColor = '';
};
//失去焦点验证是否符合,onblur 事件会在对象失去焦点时发生
inputs.year.onblur = function () {
this.value = this.value.trim();
checkYear(this);
};
inputs.month.onblur = function () {
this.value = this.value.trim();
checkMonth(this);
};
}
</script>
<body>
<form id="form">
年份<input type="text" name="year">
月份<input type="text" name="month">
<input type="submit" value="提交">
</form>
<div id="result"></div>
</body>
</html>
运行结果