我正在为我的HTML表单创建一个简单的JS验证。验证会检查字段是否为空,在某些情况下会检查字段是否为空并输入 !numbers。此检查效果很好,但我也试图实现的是,如果 JS 检测到无效输入,则以红色突出显示该字段。我已经编写了一些JS来设置输入字段的样式,如果输入无效,但它是不起作用的突出显示。
JS快照
function FormValidation(){
//First Name Validation
var fn=document.getElementById('firstname').value;
if(fn == ""){
alert('Please Enter First Name');
document.getElementById('firstname').style.borderColor = "red";
return false;
}else{
document.getElementById('firstname').style.borderColor = "green";
}
if (/^[0-9]+$/.test(document.getElementById("firstname").value)) {
alert("First Name Contains Numbers!");
document.getElementById('firstname').style.borderColor = "red";
return false;
}else{
document.getElementById('firstname').style.borderColor = "green";
}
if(fn.length <=2){
alert('Your Name is To Short');
document.getElementById('firstname').style.borderColor = "red";
return false;
}else{
document.getElementById('firstname').style.borderColor = "green";
}
网页捕捉
<form action="" method="post" onsubmit="return FormValidation();" onchange="return FormValidation();">
<div class="input-wrapper">
<input type="text" placeholder="First Name" id="firstname" name="name"/>
</div>
</form>
我很确定突出显示应该有效。我以前做过类似的验证,但不幸的是,这次无法得到我想要的结果。
最后你缺少一个}
,但除此之外,它似乎工作得很好。
这是一个工作小提琴:http://jsfiddle.net/aJ2Tw/
修订后的代码:
function FormValidation(){
//First Name Validation
var fn=document.getElementById('firstname').value;
if(fn == ""){
alert('Please Enter First Name');
document.getElementById('firstname').style.borderColor = "red";
return false;
}else{
document.getElementById('firstname').style.borderColor = "green";
}
if (/^[0-9]+$/.test(document.getElementById("firstname").value)) {
alert("First Name Contains Numbers!");
document.getElementById('firstname').style.borderColor = "red";
return false;
}else{
document.getElementById('firstname').style.borderColor = "green";
}
if(fn.length <=2){
alert('Your Name is To Short');
document.getElementById('firstname').style.borderColor = "red";
return false;
}else{
document.getElementById('firstname').style.borderColor = "green";
}
}
if ($('#TextBoxID').val() == '') { $('#TextBoxID').css('边框颜色', '红色');} else { $('#TextBoxID').css('边框颜色', '');}
这应该可以解决问题。你会希望在用户填写该输入后,边框颜色消失,因此使用边框颜色不是最好的方法。您可以使用代码段尝试一下。
document.getElementById('fieldtobered').classList.add("red");
document.getElementById('fieldtobegreen').classList.add("green");
.red {
outline: 1px solid red;
}
.green {
outline: 1px solid green;
}
<input type="text" id="fieldtobered" value="" />
<br>
<input type="text" id="fieldtobegreen" value="" />