使用Javascript检查表单中的所有元素是否为空

Question

我正在尝试验证以下表单

<form method="post" action="#" name="register">
  Name <input type="text" name="name"/><br><br>
  Age <input type="text" name="age"/><br><br>
  Gender <input type="checkbox" name="gender" value="male"/> M <input type="checkbox" name="gender" value="female"/> F<br><br>
  Graduate <input type="radio" name="graduate" value="yes"/> YES <input type="radio" name="graduate" value="no"/> NO<br><br>
  Address <textarea name="address"></textarea><br><br>
  <input type="submit" name="submit_button" value="Send" onclick="validate()"/>
</form>

我必须验证以下内容， 如果任何字段留空，则弹出一个警告，指示哪个框为空，并检查输入的年龄是否有效（即大于15且小于50）。

我试过下面的代码

function validate()
{
  var fields = ["name", "age", "gender", "graduate", "address"]
  var i, l = fields.length;  
  var fieldname;
  for (i = 0; i < l; i++) {
    fieldname = fields[i];
    if (document.forms["register"][fieldname].value === "") {
      alert(fieldname + " can not be empty");
      return false;
    }
  }
  if (document.forms["register"][age].value>=15 && document.forms["register"][age].value<=50) {
      alert("enter valid age");
      return false;
    }
  return true;
}

但是此代码只检查名称字段和年龄字段是否为空或其他标准不起作用（检查单选按钮，复选框，地址和年龄限制）

请帮帮我......

Answer 1

您可以使用以下链接中的代码验证复选框。 http://lab.artlung.com/validate-checkbox/

Answer 2

试试这个

＆＃13;

＆＃13;

function validate()
{
  var fields = ["name", "age"];
  var radioField=["gender", "graduate"];
  
  var i, l = fields.length,rl=radioField.length;  
  var fieldname;
  for (i = 0; i < l; i++) {
    fieldname = fields[i];
    if (document.forms["register"][fieldname].value === "") {
      alert(fieldname + " can not be empty");
      return false;
    }
  }
    for (i = 0; i < rl; i++) {
	
    fieldname = radioField[i];
    if (document.forms["register"][fieldname][0].checked == false && document.forms["register"][fieldname][1].checked == false) {
      alert(fieldname + " check one");
      return false;
    }
	
  }
    if (document.forms["register"]["address"].value === "") {
	  alert("address can not be empty");
	  return false;
	}
  var age =parseInt(document.forms["register"]["age"].value);
  var check =isNaN(age);
  if(check===true){
  alert("please enter number");
  return false;
  }
  if (age >= 15 && age<=50) {
      alert("enter valid age");
      return false;
    }
  return true;
}

＆＃13;

<form method="post" action="#" name="register">
  Name <input type="text" name="name"/><br><br>
  Age <input type="text" name="age"/><br><br>
  Gender <input type="checkbox" name="gender" value="male"/> M <input type="checkbox" name="gender" value="female"/> F<br><br>
  Graduate <input type="radio" name="graduate" value="yes"/> YES <input type="radio" name="graduate" value="no"/> NO<br><br>
  Address <textarea name="address"></textarea><br><br>
  <input type="submit" name="submit_button" value="Send" onclick="validate()"/>
</form>

＆＃13;

＆＃13;

＆＃13;

当你写年龄在15到50之间时，

错误显示

如果你只是反对，如果年龄不在15到50之间就会给出错误

＆＃13;

＆＃13;

function validate()
{
  var fields = ["name", "age"];
  var radioField=["gender", "graduate"];
  
  var i, l = fields.length,rl=radioField.length;  
  var fieldname;
  for (i = 0; i < l; i++) {
    fieldname = fields[i];
    if (document.forms["register"][fieldname].value === "") {
      alert(fieldname + " can not be empty");
      return false;
    }
  }
    for (i = 0; i < rl; i++) {
	
    fieldname = radioField[i];
    if (document.forms["register"][fieldname][0].checked == false && document.forms["register"][fieldname][1].checked == false) {
      alert(fieldname + " check one");
      return false;
    }
	
  }
    if (document.forms["register"]["address"].value === "") {
	  alert("address can not be empty");
	  return false;
	}
  var age =parseInt(document.forms["register"]["age"].value);
  var check =isNaN(age);
  if(check===true){
  alert("please enter number");
  return false;
  }
  if (!(age >= 15 && age<=50)) {
      alert("enter valid age");
      return false;
    }
  return true;
}

＆＃13;

<form method="post" action="#" name="register">
  Name <input type="text" name="name"/><br><br>
  Age <input type="text" name="age"/><br><br>
  Gender <input type="checkbox" name="gender" value="male"/> M <input type="checkbox" name="gender" value="female"/> F<br><br>
  Graduate <input type="radio" name="graduate" value="yes"/> YES <input type="radio" name="graduate" value="no"/> NO<br><br>
  Address <textarea name="address"></textarea><br><br>
  <input type="submit" name="submit_button" value="Send" onclick="validate()"/>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 3

尝试

＆＃13;

＆＃13;

function validate() {
  var fields = ["name", "age", "address"],
    //needs to validate teh check fields separately
    checkfields = ['gender', 'graduate'];
  var i, j, l = fields.length;
  var fieldname, els, valid, form = document.forms["register"];
  for (i = 0; i < l; i++) {
    fieldname = fields[i];
    if (form[fieldname].value === "") {
      alert(fieldname + " can not be empty");
      return false;
    }
  }

  l = checkfields.length;
  for (i = 0; i < l; i++) {
    fieldname = checkfields[i];
    els = form[fieldname].length ? form[fieldname] : [form[fieldname]];
    valid = false;
    for (j = 0; j < els.length; j++) {
      if (els[j].checked) {
        valid = true;
        break;
      }
    }

    if (!valid) {
      alert(fieldname + " can not be empty");
      return false;
    }
  }


  var age = +form.age.value;
  if (!age || age < 15 || age > 50) {
    alert("enter valid age");
    return false;
  }
  return true;
}

＆＃13;

<!-- use the validation on the submit event -->
  <!-- Need to return the valid value to stop the default action -->
<form method="post" action="#" name="register" onsubmit="return validate()">
  Name <input type="text" name="name"/><br/><br/>
  Age <input type="text" name="age"/><br/><br/>
  Gender <input type="checkbox" name="gender" value="male"/> M <input type="checkbox" name="gender" value="female"/> F<br/><br/>
  Graduate <input type="radio" name="graduate" value="yes"/> YES <input type="radio" name="graduate" value="no"/> NO<br/><br/>
  Address <textarea name="address"></textarea><br/><br/>
  <input type="submit" name="submit_button" value="Send"/>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 4

对于那些您希望填写的字段，请使用required =＆＃34; required＆＃34;在您的html标签上，所以你不要使用JS进行验证。 example。对需要进行价值范围检查等的人使用JS验证。