我有一个表格，用户最多可以输入5个科目和5个日期，编码如下：
<h2>Input subjects</h2>
<form name = "subjInput" onsubmit="validateForm()" method="post" action="input.php" >
<table>
<tr><td><h3>Subject title</h3></td><td><h3>Subject date</h3></td><tr>
<tr><td><input type="text" name="subjName1" size="15" placeholder = "e.g. Biology" required pattern=".{2, 20}"></td>
<td><input type="date" name="subjDate1" size="15" min="01/01/2015" max="01/01/2020"></td></tr>
<tr><td><input type="text" name="subjName2" size="15" placeholder = "e.g. Biology" required pattern=".{2, 20}"></td>
<td><input type="date" name="subjDate2" size="15" min="01/01/2015" max="01/01/2020"></td></tr>
<tr><td><input type="text" name="subjName3" size="15" placeholder = "e.g. Biology" required pattern=".{2, 20}"></td>
<td><input type="date" name="subjDate3" size="15" min="01/01/2015" max="01/01/2020"></td></tr>
<tr><td><input type="text" name="subjName4" size="15" placeholder = "e.g. Biology" pattern=".{2, 20}"></td>
<td><input type="date" name="subjDate4" size="15" min="01/01/2015" max="01/01/2020" ></td></tr>
<tr><td><input type="text" name="subjName5" size="15" placeholder = "e.g. Biology" pattern=".{2, 20}"></td>
<td><input type="date" name="subjDate5" size="15" min="01/01/2015" max="01/01/2020" ></td></tr>
</table>
<br></br>
<input type="submit" name="submit" value="Submit" style="color:white">
</form>
JavaScript验证是这样的：
<script>
function validateForm(){
var name1 = document.forms["subjInput"]["subjName1"].value;
var name2 = document.forms["subjInput"]["subjName2"].value;
var name3 = document.forms["subjInput"]["subjName3"].value;
var name4 = document.forms["subjInput"]["subjName4"].value;
var name5 = document.forms["subjInput"]["subjName5"].value;
var date1 = document.forms["subjInput"]["subjDate1"].value;
var date2 = document.forms["subjInput"]["subjDate2"].value;
var date3 = document.forms["subjInput"]["subjDate3"].value;
var date4 = document.forms["subjInput"]["subjDate4"].value;
var date5 = document.forms["subjInput"]["subjDate5"].value;
var length1 = name1.length;
var length2 = name2.length;
var length3 = name3.length;
var length4 = name4.length;
var length5 = name5.length;
var smalldate = new date(01/01/2015);
var largedate = new date(01/01/2020);
if(name1 == null || name1 == ""){
alert('Oops! Please input a subject name into row 1.');
return false;
}
if(name2 == null || name2 == ""){
alert('Oops! Please input a subject name into row 2.');
return false;
}
if(name3 == null || name3 == ""){
alert('Oops! Please input a subject name into row 3.');
return false;
}
if (name4 == null || name4 == "") && (date4 != null || date4 != ""){
alert('Oops! Please input a subject name into row 4.');
return false;
}
if (name5 == null || name5 == "") && (date5 != null || date5 != ""){
alert('Oops! Please input a subject name into row 5.');
return false;
}
if ((name1 == name2) || (name2 == name3) || (name3 == name1) {
alert('Oops! Two subject names are the same');
return false;
}
if(length1 < 2){
alert('Oops! The first subject name should be longer than 2 characters.');
return false;
}
if(length2 < 2){
alert('Oops! The two subject name should be longer than 2 characters.');
return false;
}
if(length3 < 2){
alert('Oops! The third subject name should be longer than 2 characters.');
return false;
}
if(length1 > 20){
alert('Oops! The first subject name should be shorter than 20 characters.');
return false;
}
if(length2 > 20){
alert('Oops! The second subject name should be shorter than 20 characters.');
return false;
}
if(length3 > 20){
alert('Oops! The third subject name should be longer than 20 characters.');
return false;
}
if((name4 != null) && (length4 < 2){
alert('Oops! The fourth subject name should be longer than 2 characters.');
return false;
}
if((name5 != null) && (length5 < 2){
alert('Oops! The fifth subject name should be longer than 2 characters.');
return false;
}
if((name4 != null) && (length4 > 20){
alert('Oops! The fourth subject name should be shorter than 20 characters.');
return false;
}
if((name5 != null) && (length5 > 20){
alert('Oops! The fourth subject name should be longer than 20 characters.');
return false;
}
if((date1!=null) && (date1 < smalldate)){
alert('Oops! The first exam date should be after 01/01/2015.');
return false;
}
if((date2!=null) && (date2 < smalldate)){
alert('Oops! The second exam date should be after 01/01/2015.');
return false;
}
if((date3!=null) && (date3 < smalldate)){
alert('Oops! The third exam date should be after 01/01/2015.');
return false;
}
if((date4!=null) && (date4 < smalldate)){
alert('Oops! The fourth exam date should be after 01/01/2015.');
return false;
}
if((date5!=null) && (date5 < smalldate)){
alert('Oops! The fifth exam date should be after 01/01/2015.');
return false;
}
if((date1!=null) && (date1 > largedate)){
alert('Oops! The first exam date should be before 01/01/2020.');
return false;
}
if((date2!=null) && (date2 > largedate)){
alert('Oops! The second exam date should be before 01/01/2020.');
return false;
}
if((date3!=null) && (date3 > largedate)){
alert('Oops! The third exam date should be before 01/01/2020.');
return false;
}
if((date4!=null) && (date4 > largedate)){
alert('Oops! The fourth exam date should be before 01/01/2020.');
return false;
}
if((date5!=null) && (date5 > largedate)){
alert('Oops! The fifth exam date should be before 01/01/2020.');
return false;
}
else{
return true;
}
}
</script>
它只是一个简单的表单 - 我尝试输入无效数据但它不起作用。我怎样才能让它发挥作用？
答案 0 :(得分：0)
似乎工作得很好。
Here is the jsfiddle of your form - http://jsfiddle.net/8vv1qx65/