JavaScript正则表达式未经验证

Question

I have a problem with my code. It should display red inputbox if I don't match regex else it should appear as green inputbox.

 function IsValid(pole, regex) { if (regex.test(pole.value)) { pole.className = "ok"; return true; } else { pole.className = "chyba"; return false; } } function OnSubmit(form) { if (IsValid(form.filter_date, dateReg)) { return true; } else { return false; } } window.onload = init; function init() { var filter_date = document.getElementById("filter_date"); dateReg = /^\\d{2}-\\d{2}-\\d{4}$/; filter_date.onblur = function() { IsValid(this, dateReg); } document.forms("filter_form").onsubmit = function() { return OnSubmit(this); } } 

 .ok { background-color: red; } .chyba { background-color: green; } 

 <form id="filter_form" name="filter_form" action="" method="post"> <table class="filter_training" cellspacing="0" width="100%"> .... <input type="text" id="filter_date" name="filter_date" placeholder="01-01-1970" />.... </table> </form> 

Answer 1

1). The main problem is that onsubmit handler should be bound this way:

document.forms.filter_form.onsubmit = function(){
    return OnSubmit(this); 
}

because document.forms("filter_form") will throw an error since document.forms is a collection, not a function.

2). Another minor issue is that you confused colors, it should be:

.ok { background-color: green; }
.chyba { background-color: red; }

Demo: http://jsfiddle.net/fjm9yhdx/

Answer 2

It does work: http://jsfiddle.net/d8swfdbj/

.ok{ color: green;}
.chyba{ color: red; }

Your green/red classes are simply the wrong way round.