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

标签 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>
    

最佳答案

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

但是,我相信您的代码无法正常工作的原因是因为您似乎将 phoneaddressconst 值设置为进入屏幕...然后您正在检查初始值(而不是最新值)。

作为函数的一部分,您需要从控件获取最新值...

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

(小修改,你还需要在你的函数结束时return true,否则你的提交将不起作用)

关于javascript 检查电话号码和地址是否为空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52501472/

相关文章:

html - 无法为显示的文本装饰获取多个值

html - 如何默认隐藏页面元素,但稍后使用 Knockout 显示它们?

html - Bootstrap CSS背景位置在移动设备上不起作用

javascript - 关于设置 something.prototype.__proto__ 的困惑

javascript - 使用一个 php 函数返回多个 json 对象

javascript - 保护视频免遭下载的最佳方法

javascript - 为什么我的动画 SVG 动画停止改变颜色?

javascript - 我无法在 Javascript 中生成平滑的 Simplex 噪声

javascript - 来自不同域的 JS 文件的相对路径

html - 如何使用 CSS 翻转进度条从哪一侧开始