如何修改下面的代码,这样我就可以检查值并在我的validate_date(date)为false时同时向4个输入框添加一个类,而不是逐个检查每个字段。一,当前的设置是每次都退出该功能?
我正在使用一些jQuery,所以我是jQuery友好的
date1 = document.getElementById('date1').value
if (date1) {
if (validate_date(date1) == true) {
date1 = parseDate(date1)
} else {
$("#date1").addClass("invalid")
return
}
} else {
date1 = null
}
date2 = document.getElementById('date2').value
if (date2) {
if (validate_date(date2) == true) {
date2 = parseDate(date2)
} else {
$("#date2").addClass("invalid")
return
}
} else {
date2 = null
}
date3 = document.getElementById('date3').value
if (date3) {
if (validate_date(date3) == true) {
date3 = parseDate(date3)
} else {
$("#date3").addClass("invalid")
return
}
} else {
date3 = null
}
date4 = document.getElementById('date4').value
if (date4) {
if (validate_date(date4) == true) {
date4 = parseDate(date4)
} else {
$("#date4").addClass("invalid")
return
}
} else {
date4 = null
}
function validate_date(str) {
var t = str.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
if (t === null) return false;
var d = parseInt(t[1]),
m = parseInt(t[2], 10),
y = parseInt(t[3], 10);
//below should be more acurate algorithm
if (m >= 1 && m <= 12 && d >= 1 && d <= 31) {
return true;
}
return false;
}
答案 0 :(得分:1)
这是你想要的:
JsFiddle: http://jsfiddle.net/RqyDT/1/
<强> HTML:强>
<form class="validation" action="your_page.html">
<p>
<label for="date1">Date 1</label>
<input type="text" name="date1" class="date"/>
</p>
<p>
<label for="date2">Date 2</label>
<input type="text" name="date2" class="date"/>
</p>
<p>
<label for="date1">Date 3</label>
<input type="text" name="date3" class="date"/>
</p>
<p>
<label for="date2">Date 4</label>
<input type="text" name="date4" class="date"/>
</p>
<p>
<input type="submit" value="Submit"/>
</p>
</form>
<强> CSS:强>
.invalid{color:red;}
<强> JavaScript的:强>
function validate_date(str) {
var t = str.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
if (t === null) return false;
var d = parseInt(t[1]),
m = parseInt(t[2], 10),
y = parseInt(t[3], 10);
//below should be more acurate algorithm
if (m >= 1 && m <= 12 && d >= 1 && d <= 31) {
return true;
}
return false;
}
$(document).ready(function(){
$(".validation").submit(function(){
//Initialize
var valid_fields = true;
$('label').removeClass("invalid");
//Loop through date input
$(".date").each(function(){
var date_val = $(this).val();
//If validation function return false, add class "invalid" to the label
if (validate_date(date_val) == false) {
$('label[for="'+ $(this).attr('name') +'"]').addClass('invalid');
valid_fields = false;
}
});
//Return true or false, depends of the form validation
return valid_fields;
});
});
答案 1 :(得分:0)
您的代码有点令人困惑,因此我做了一些快速调整,因为我不确定您是否使用了框架。这是我相信你问的基本模型。它将使用ids&#34; date1&#34;,&#34; date2&#34; ...查找元素,直到它到达date4并将停止。对于每个元素,它获取值,验证值,如果有效则解析它并将该数据设置为父元素的值。否则它会添加&#34;无效&#34;类。不确定if(value)子句上的其他内容是应该做什么的,但我确实将它保留在那里以防你做了一些我不知道的事情。
另一种方法是按标签名称检查元素,并过滤出名称/ id值包含&#34; date&#34;但我认为这更直接。
var base = 'date';
for(var i=1;i<=4;i++)}
var el = document.getElementById(base+i);
var value = el.value;
if (value) {
if (validate_date(value) == true) {
el.value = parseDate(value)
} else {
el.className = (el.className.length > 0) ? el.className + " invalid" : "invalid";
}
} else {
el.value = "";
}
}