javascript检查电话号码和地址是否为空白

时间：2018-09-25 15:11:37

标签： javascript html

请帮助我，我被困住了。

为什么下面的JavaScript不起作用？该脚本正在检查电话号码和地址是否为空，但是当输入电话号码和地址字段时，仍会弹出警报。

const order = document.getElementById("orderInput");
const main = document.getElementById("main");

const phone = document.getElementById("phoneNumberInput").value;
const address = document.getElementById("addressInput").value;

function checkingIsEmpty() {

  if (phone == ''){
    alert("Please insert your phone number");
    return false;
  } 
  if (address ==''){
    alert("Please insert your address");
    return false;
  }

}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>checking form is empty</title>
  </head>
  <body>
    <form class="" action="index.html" method="post" onsubmit="return checkingIsEmpty()">
      <div id="message">
        <label>
          <textarea name="messageInput" rows="2" cols="40" placeholder="add message..."></textarea>
        </label>
      </div>
      <div id="phoneNumber">
        <input id="phoneNumberInput" type="number" name="phone" value="" placeholder="Please input your phonenumber">
      </div>
      <div id="address">
        <input id="addressInput" type="text" name="address" placeholder="your address here" size= "50px" value="" >
      </div>
      <div id="order">
        <input id="orderInput" type="submit" name="description" value="order" min='0'> <p></p>
      </div>
      <div id= "reset">
        <input type="reset" name="" value="RESET">
      </div>
    </form>

    <script src="app.js" charset="utf-8"></script>

  </body>
</html>

5 个答案:

答案 0 :(得分：2)

我同意@Madara的评论，您应该... 只需在所需的表单输入上添加required属性，然后让浏览器为您完成工作

但是，我认为您的代码无法正常工作的原因是因为您似乎在进入屏幕时设置了const和phone的{​​{1}}值...然后您正在检查该初始值（而不是最新值）。

相反，您需要从控件中获取最新值，作为功能的一部分... 

address

（较小的修改，您还需要在功能末尾function checkingIsEmpty(){ if (document.getElementById("phoneNumberInput").value == ''){ alert("Please insert your phone number"); return false; } if (document.getElementById("addressInput").value ==''){ alert("Please insert your address"); return false; } return true; } ，否则您的提交将不起作用）

答案 1 :(得分：0)

最简单的方法是检查if (!phoneInput.value) { ... } 为空字符串和null将返回假值

答案 2 :(得分：0)

您遇到的问题是因为您在页面加载时分配了字段的值。暂时不在submit上调用该函数。如果将变量分配移到函数中，它将对您有用。

const order = document.getElementById("orderInput");
const main = document.getElementById("main");





function checkingIsEmpty(){
  const phone = document.getElementById("phoneNumberInput").value;
  const address = document.getElementById("addressInput").value;


  if (phone == ''){
    alert("Please insert your phone number");
    return false;
  } 
  if (address ==''){
    alert("Please insert your address");
    return false;
  }

  return false;//for the example I don't want it to submit
}
 <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>checking form is empty</title>
      </head>
      <body>
        <form class="" action="index.html" method="post" onsubmit="return checkingIsEmpty()">
          <div id="message">
            <label>
              <textarea name="messageInput" rows="2" cols="40" placeholder="add message..."></textarea>
            </label>
          </div>
          <div id="phoneNumber">
            <input id="phoneNumberInput" type="number" name="phone" value="" placeholder="Please input your phonenumber">
          </div>
          <div id="address">
            <input id="addressInput" type="text" name="address" placeholder="your address here" size= "50px" value="" >
          </div>
          <div id="order">
            <input id="orderInput" type="submit" name="description" value="order" min='0'> <p></p>
          </div>
          <div id= "reset">
            <input type="reset" name="" value="RESET">
          </div>
        </form>

        <script src="app.js" charset="utf-8"></script>

      </body>
    </html>

答案 3 :(得分：0)

输入值存储在常量而不是变量中。

加载页面后，将执行脚本并存储实际输入的内容。

调用checkingIsEmpty()时，值不会刷新。

如果您想继续检查JavaScript，建议您在checkingIsEmpty()函数内获取值，但是正如Madara在注释中建议的那样，您可以使用必需的属性<input id="phoneNumberInput" type="number" name="phone" value="" placeholder="Please input your phonenumber" required>。

检查带有必需属性或javascript的输入很好，但是您也必须在服务器端进行检查。按下 F12 并编辑dom很容易。

function checkingIsEmpty()
{
    let phone = document.getElementById("phoneNumberInput").value;
    let address = document.getElementById("addressInput").value;

    if (phone == '')
    {
        alert("Please insert your phone number");
        return (false);
    } 
    if (address == '')
    {
        alert("Please insert your address");
        return (false);
    }
    return (true); //You forgot to return true in case of your form is validated
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>checking form is empty</title>
    </head>
    <body>
        <form class="" action="index.html" method="post" onsubmit="return checkingIsEmpty()">
            <div id="message">
                <label>
                    <textarea name="messageInput" rows="2" cols="40" placeholder="add message..."></textarea>
                </label>
            </div>
            <div id="phoneNumber">
                <input id="phoneNumberInput" type="number" name="phone" value="" placeholder="Please input your phonenumber">
            </div>
            <div id="address">
                <input id="addressInput" type="text" name="address" placeholder="your address here" size= "50px" value="" >
            </div>
            <div id="order">
                <input id="orderInput" type="submit" name="description" value="order" min='0'> <p></p>
            </div>
            <div id= "reset">
                <input type="reset" name="" value="RESET">
            </div>
        </form>

        <script src="app.js" charset="utf-8"></script>
    </body>
</html>

答案 4 :(得分：0)

您需要在条件文件中包含document.getElementById。另外，我将两个条件（电话和地址）都包装在另一个条件中，这样您就可以为错误字段中的错误样式添加类。

const order = document.getElementById("orderInput");
const main = document.getElementById("main");

var phone = document.getElementById("phoneNumberInput").value;
var address = document.getElementById("addressInput").value;



function checkingIsEmpty(){
  if (document.getElementById("phoneNumberInput").value == '' || document.getElementById("addressInput").value == '') {
		if (document.getElementById("phoneNumberInput").value == ''){
			alert("Please insert your phone number");
			return false;
		} 
		if (document.getElementById("addressInput").value == ''){
			alert("Please insert your address");
			return false;
		}
	} else {
		alert('success');
	}
}
<!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>checking form is empty</title>
      </head>
      <body>
        <form class="" action="index.html" method="post" onsubmit="return checkingIsEmpty()">
          <div id="message">
            <label>
              <textarea name="messageInput" rows="2" cols="40" placeholder="add message..."></textarea>
            </label>
          </div>
          <div id="phoneNumber">
            <input id="phoneNumberInput" type="number" name="phone" value="" placeholder="Please input your phonenumber">
          </div>
          <div id="address">
            <input id="addressInput" type="text" name="address" placeholder="your address here" size= "50px" value="" >
          </div>
          <div id="order">
            <input id="orderInput" type="submit" name="description" value="order" min='0'> <p></p>
          </div>
          <div id= "reset">
            <input type="reset" name="" value="RESET">
          </div>
        </form>

        <script src="app.js" charset="utf-8"></script>

      </body>
    </html>

相关问题
最新问题