如何将多个ID简化为多个功能?
How to simplify multiple IDs to multiple function?
我有以下检查日期输入的代码。我希望用户键入 dd/MM/YYYY。如果用户输入 dd/MM/YY,我会提醒他们。我正在为每个输入标签编写每个 javascript 函数。如何简化 javascript 函数或者我不能?
<input id="dt_join" name="dt_join" value="<%=dt_join%>" type="text" class="form-control" date-picker onblur="checkdt_join();">
<input id="dt_confirm" name="dt_confirm" value="<%=dt_confirm%>" type="text" class="form-control" datewotoday onblur="checkdt_confirm();">
<input id="dt_resign" name="dt_resign" value="<%=dt_resign%>" type="text" class="form-control" datewotoday onblur="checkdt_resign();">
function checkdt_join(){
var input = document.getElementById("dt_join").value;
var pattern =/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/;
if (pattern.test(input)==false){
alert("Date format is incorrect, please key in DD/MM/YYYY");
}
}
function checkdt_confirm(){
var input = document.getElementById("dt_confirm").value;
var pattern =/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/;
if (pattern.test(input)==false){
alert("Date format is incorrect, please key in DD/MM/YYYY");
}
}
function checkdt_resign(){
var input = document.getElementById("dt_resign").value;
var pattern =/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/;
if (pattern.test(input)==false){
alert("Date format is incorrect, please key in DD/MM/YYYY");
}
}
简单而肮脏的方法:通过 onblur
属性中的 this
传递输入元素。 (删除了与问题无关的属性)
function checkdt(el) {
var input = el.value;
var pattern = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
if (pattern.test(input) == false) {
alert("Date format is incorrect, please key in DD/MM/YYYY");
}
}
<input value="01/01/2001" type="text" onblur="checkdt(this);" />
<input value="11/11/2011" type="text" onblur="checkdt(this);" />
<input value="12/12/2012" type="text" onblur="checkdt(this);" />
明确一则:使用事件监听器
$(function() {
$(".date-checker").blur(function checkdt() {
var input = this.value;
var pattern = /^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/;
if (pattern.test(input) == false) {
alert("Date format is incorrect, please key in DD/MM/YYYY");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="01/01/2001" class="date-checker" type="text" />
<input value="11/11/2011" class="date-checker" type="text" />
<input value="12/12/2012" class="date-checker" type="text" />
我有以下检查日期输入的代码。我希望用户键入 dd/MM/YYYY。如果用户输入 dd/MM/YY,我会提醒他们。我正在为每个输入标签编写每个 javascript 函数。如何简化 javascript 函数或者我不能?
<input id="dt_join" name="dt_join" value="<%=dt_join%>" type="text" class="form-control" date-picker onblur="checkdt_join();">
<input id="dt_confirm" name="dt_confirm" value="<%=dt_confirm%>" type="text" class="form-control" datewotoday onblur="checkdt_confirm();">
<input id="dt_resign" name="dt_resign" value="<%=dt_resign%>" type="text" class="form-control" datewotoday onblur="checkdt_resign();">
function checkdt_join(){
var input = document.getElementById("dt_join").value;
var pattern =/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/;
if (pattern.test(input)==false){
alert("Date format is incorrect, please key in DD/MM/YYYY");
}
}
function checkdt_confirm(){
var input = document.getElementById("dt_confirm").value;
var pattern =/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/;
if (pattern.test(input)==false){
alert("Date format is incorrect, please key in DD/MM/YYYY");
}
}
function checkdt_resign(){
var input = document.getElementById("dt_resign").value;
var pattern =/^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/;
if (pattern.test(input)==false){
alert("Date format is incorrect, please key in DD/MM/YYYY");
}
}
简单而肮脏的方法:通过 onblur
属性中的 this
传递输入元素。 (删除了与问题无关的属性)
function checkdt(el) {
var input = el.value;
var pattern = /^(\d{1,2})\/(\d{1,2})\/(\d{4})$/;
if (pattern.test(input) == false) {
alert("Date format is incorrect, please key in DD/MM/YYYY");
}
}
<input value="01/01/2001" type="text" onblur="checkdt(this);" />
<input value="11/11/2011" type="text" onblur="checkdt(this);" />
<input value="12/12/2012" type="text" onblur="checkdt(this);" />
明确一则:使用事件监听器
$(function() {
$(".date-checker").blur(function checkdt() {
var input = this.value;
var pattern = /^([0-9]{1,2})\/([0-9]{1,2})\/([0-9]{4})$/;
if (pattern.test(input) == false) {
alert("Date format is incorrect, please key in DD/MM/YYYY");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input value="01/01/2001" class="date-checker" type="text" />
<input value="11/11/2011" class="date-checker" type="text" />
<input value="12/12/2012" class="date-checker" type="text" />