Fatal编程技术网
  • javascript/
  • 使用Javascript检查表单中的所有元素

使用Javascript检查表单中的所有元素

javascript html forms input

使用Javascript检查表单中的所有元素,javascript,html,forms,input,Javascript,Html,Forms,Input,我一开始就知道javascript，但我有一个问题 我有7个表单中的输入元素，我希望所有元素都被填写。 我想出了这个主意，但它看起来很恶心 有人能帮我检查所有表单元素是否都已填写吗？ function validateForm() { var x=document.forms["register"]["name"].value; var y=document.forms["register"]["phone"].value; var z=document.forms["register"]["c

我一开始就知道javascript，但我有一个问题

我有7个表单中的输入元素，我希望所有元素都被填写。 我想出了这个主意，但它看起来很恶心

有人能帮我检查所有表单元素是否都已填写吗？

function validateForm()
{
var x=document.forms["register"]["name"].value;
var y=document.forms["register"]["phone"].value;
var z=document.forms["register"]["compname"].value;
var q=document.forms["register"]["mail"].value;
var w=document.forms["register"]["compphone"].value;
var e=document.forms["register"]["adres"].value;
var r=document.forms["register"]["zip"].value;
if (x==null || x=="" || y==null || y=="" || z==null 
|| z=="" || q==null || q=="" ||  w==null || w=="" || e==null || e=="" 
|| r==null || r=="")
{
alert("Please fill all the inputs");
return false;
}
}
</script>

函数validateForm（）
{
var x=document.forms[“register”][“name”].value；
var y=document.forms[“register”][“phone”]。值；
var z=document.forms[“register”][“compname”]。值；
var q=document.forms[“register”][“mail”]。值；
var w=文件.forms[“register”][“compphone”]。值；
var e=文件.forms[“register”][“adres”].值；
var r=document.forms[“register”][“zip”].value；
如果（x==null | | x==“”| | y==null | | y==“”| | z==null
||z=“”| | q==null | | q==“”| | w==null | | w==“”| | e==null | | e==“”
||r==null | | r==“”）
{
警报（“请填写所有输入”）；
返回false；
}
}
这是一种简单而肮脏的方式

更好的方法是更新需要字段的验证消息

function validateForm()
{
  var fields = ["name, phone", "compname", "mail", "compphone", "adres", "zip"]

  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;
    }
  }
  return true;
}

函数validateForm（）
{
变量字段=[“姓名、电话”、“姓名”、“邮件”、“电话”、“地址”、“邮政编码”]
变量i，l=字段长度；
变量字段名；
对于（i=0；i
使用一些简单的vanilla JS，您可以以更简单的方式处理此问题：

JavaScript

function validateForm(){
    var form = document.getElementById("register"), inputs = form.getElementsByTagName("input"), input = null, flag = true;
    for(var i = 0, len = inputs.length; i < len; i++) {
        input = inputs[i];
        if(!input.value) {
            flag = false;
            input.focus();
            alert("Please fill all the inputs");
            break;
        }
    }
    return(flag);
}
或者以更不引人注目的方式：

window.onload = function(){
    var form = document.getElementById("register");
    form.onsubmit = function(){
        var inputs = form.getElementsByTagName("input"), input = null, flag = true;
        for(var i = 0, len = inputs.length; i < len; i++) {
            input = inputs[i];
            if(!input.value) {
                flag = false;
                input.focus();
                alert("Please fill all the inputs");
                break;
            }
        }
        return(flag);
    };
};

window.onload=function（）{
var form=document.getElementById（“寄存器”）；
form.onsubmit=函数（）{
var inputs=form.getElementsByTagName（“输入”），input=null，flag=true；
对于（变量i=0，len=inputs.length；i
您可以这样做：

//Declare variables
var 1, 2, 3, 4, 5, 6, 7;
1 = document.getElementById("Field Id");
2 = document.getElementById("Field Id");
3 = document.getElementById("Field Id");
4 = document.getElementById("Field Id");     //Define variable values
5 = document.getElementById("Field Id");
6 = document.getElementById("Field Id");
7 = document.getElementById("Field Id");

//Check if any of the fields are empty
If (1 == "" || 2 == "" || 3 == "" || 4 == "" || 5 == "" || 6 == "" || 7 == "") {
  alert("One or more fields are empty!");
  //Other code
}
我把它用在我自己的表格上，效果很好，但不占用太多空间，也不显得太“丑”。它适用于所有字段元素并检查输入的值。



<html>

<head>
  <title> Event Program</title>
  <script>
  function validateForm() {
    var fields = ["name, phone", "compname", "mail", "compphone", "adres", "zip"]
    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;
      }
    }
    return true;
  }

  var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
  var fields = {
    "eventName": "Event Name",
    "eventDate": "Event Date",
    "eventPlace": "Event Place"
  }

  function Validate(oForm) {
    var arrInputs = oForm.getElementsByTagName("input");
    for(var i = 0; i < arrInputs.length; i++) {
      var oInput = arrInputs[i];
      if(oInput.type == "text" && oInput.value == "") {
        alert(fields[oInput.name] + " cannot be empty");
        return false;
      }
      if(oInput.type == "file") {
        var sFileName = oInput.value;
        if(sFileName.length > 0) {
          var blnValid = false;
          for(var j = 0; j < _validFileExtensions.length; j++) {
            var sCurExtension = _validFileExtensions[j];
            alert(sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase())
            if(sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
              blnValid = true;
              break;
            }
          }

          if(!blnValid) {
            alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
            return false;
          }
        }
      }
    }

    return true;
  }

  </script>

</head>

<body>
  <div align="center">
    <h3>Event Management</h3>
    <form onsubmit="return Validate(this);" id='eventForm' name='eventForm' method='POST' enctype='multipart/form-data' action='saveEvent.php'>
      <table>
        <tr>
          <td>Event Name</td>
          <td>
            <input type="text" name="eventName">
          </td>
        </tr>
        <tr>
          <td>Event Date</td>
          <td>
            <input type="text" name="eventDate" id='datepicker'>
          </td>
        </tr>
        <tr>
          <td>Event place</td>
          <td>
            <input type="text" name="eventPlace">
          </td>
        </tr>
        <tr>
          <td>Upload Image</td>
          <td>
            <input type="file" name="my file" />
            <br />
          </td>
        </tr>
        <tr>
          <td>About Events</td>
          <td>
            <textarea></textarea>
          </td>
        </tr>
        <tr>
          <td colspan=2 align=center>
            <input type="submit" value="Submit" />
            <input type="button" name="clear" value="Clear" />
          </td>
        </tr>
      </table>
    </form>
  </div>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function () {
    $("#datepicker").datepicker({
      dateFormat: "dd/mm/yy",
      changeMonth: true,
      changeYear: true
    }).datepicker("setDate", new Date());
  });

  </script>
</body>

</html>


活动计划
函数validateForm（）{
变量字段=[“姓名、电话”、“姓名”、“邮件”、“电话”、“地址”、“邮政编码”]
变量i，l=字段长度；
变量字段名；
对于（i=0；i0）{
var blnValid=false；
对于（变量j=0；j<_validFileExtensions.length；j++）{
var sCurExtension=_validfleextensions[j]；
警报（sFileName.substr（sFileName.length-sCurExtension.length，sCurExtension.length.toLowerCase（））
if（sFileName.substr（sFileName.length-sCurExtension.length，sCurExtension.length）.toLowerCase（）==sCurExtension.toLowerCase（））{
blnValid=true；
打破
}
}
如果（！blnValid）{
警报（“对不起，+sFileName+”无效，允许的扩展名为：“+_validFileExtensions.join”（，”）；
返回false；
}
}
}
}
返回true；
}
事件管理
事件名称
活动日期
活动地点
上传图像


关于事件
$（函数（）{
$（“#日期选择器”）。日期选择器({
日期格式：“日/月/年”，
变化月：对，
变化年：对
}).datepicker（“setDate”，new Date（））；
});
jQuery解决方案对你有用吗？使用循环多次做同样的事情……你可以使用一个标记输入循环稍微不那么恶心-利用“”的错误，让你的
if
语句：
如果（！x | | y | |！z | |！q | |！w | |！e |！e）
看看这个：Jeremy，如果选中，占位符是否会破坏此选项？我对JS很不了解，我不明白这个问题，抱歉。这个仍然算“空”吗？是的，它仍然算为空。占位符不会更改输入元素的
值
，只会更改其显示方式。请解释您的答案 
<html>

<head>
  <title> Event Program</title>
  <script>
  function validateForm() {
    var fields = ["name, phone", "compname", "mail", "compphone", "adres", "zip"]
    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;
      }
    }
    return true;
  }

  var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
  var fields = {
    "eventName": "Event Name",
    "eventDate": "Event Date",
    "eventPlace": "Event Place"
  }

  function Validate(oForm) {
    var arrInputs = oForm.getElementsByTagName("input");
    for(var i = 0; i < arrInputs.length; i++) {
      var oInput = arrInputs[i];
      if(oInput.type == "text" && oInput.value == "") {
        alert(fields[oInput.name] + " cannot be empty");
        return false;
      }
      if(oInput.type == "file") {
        var sFileName = oInput.value;
        if(sFileName.length > 0) {
          var blnValid = false;
          for(var j = 0; j < _validFileExtensions.length; j++) {
            var sCurExtension = _validFileExtensions[j];
            alert(sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase())
            if(sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
              blnValid = true;
              break;
            }
          }

          if(!blnValid) {
            alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
            return false;
          }
        }
      }
    }

    return true;
  }

  </script>

</head>

<body>
  <div align="center">
    <h3>Event Management</h3>
    <form onsubmit="return Validate(this);" id='eventForm' name='eventForm' method='POST' enctype='multipart/form-data' action='saveEvent.php'>
      <table>
        <tr>
          <td>Event Name</td>
          <td>
            <input type="text" name="eventName">
          </td>
        </tr>
        <tr>
          <td>Event Date</td>
          <td>
            <input type="text" name="eventDate" id='datepicker'>
          </td>
        </tr>
        <tr>
          <td>Event place</td>
          <td>
            <input type="text" name="eventPlace">
          </td>
        </tr>
        <tr>
          <td>Upload Image</td>
          <td>
            <input type="file" name="my file" />
            <br />
          </td>
        </tr>
        <tr>
          <td>About Events</td>
          <td>
            <textarea></textarea>
          </td>
        </tr>
        <tr>
          <td colspan=2 align=center>
            <input type="submit" value="Submit" />
            <input type="button" name="clear" value="Clear" />
          </td>
        </tr>
      </table>
    </form>
  </div>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function () {
    $("#datepicker").datepicker({
      dateFormat: "dd/mm/yy",
      changeMonth: true,
      changeYear: true
    }).datepicker("setDate", new Date());
  });

  </script>
</body>

</html>