Question

我正在尝试在允许提交表单之前检查变量是否存在。

当前，用户在表单中输入地址，自动完成功能将lat和long添加到表单中。我写了以下js

function check() {
    let latitude = document.getElementById("latitude").value;
    if (latitude == null) {
        window.prompt("ned a correct address", "");
        return false;
    } else {
        alert('It worked');
        return true;
    }
}

当我提交的地址没有经纬度和长时间自动完成时，我仍然会收到“有效”的信息

这是我的表格

<form method="GET" action="/search" onsubmit="check()">
    <input class="form-control" id="getaddy" type="text" placeholder="Search..." name="term" onFocus="geo()">
    <input id="latitude" type="hidden" name="latitude">
    <input id="longitude" type="hidden" name="longitude">
</form>

Answer 1

如果您真的想检查变量是否存在，可以使用以下方法来进行安全检查：

if(variable) {
  // Truthy
} else {
  // Falsy
}

这样，您将获得所有可能的Falsy场景，包括：null，undefined，NaN，""，0，最后false本身...无需检查其中的每一个！

这是编辑后的代码段：

function check() {
  let latitude = document.getElementById("latitude").value;
  if (latitude) {
    alert('It worked');
    return true;
  } else {
    window.prompt("ned a correct address", "");
    return false;
  }
}

<form method="GET" action="/search" onsubmit="check()">
  <input class="form-control" id="getaddy" type="text" placeholder="Search..." name="term" onFocus="geo()">
  <input id="latitude" type="hidden" name="latitude">
  <input id="longitude" type="hidden" name="longitude">
</form>

*此代码仅执行一次！

Answer 2

这里需要考虑一些事项，以进行更可靠的表单验证；

建议在验证失败时使用事件对象取消提交操作
通过测试“空字符串”而不是null来验证输入字段的值
确保在脚本中不会引发任何错误（例如，确保已定义geo()等），以便实际上check()被调用，而不是由于另一个脚本错误而无提示地失败。

以下更改可能会有所帮助：

// Pass event object
function check(event) {
  
  let address = document.getElementById("getaddy").value;
  
  // Check for empty string, rather than null
  if (address === '') { 
    window.prompt("ned a correct address", "");
      
    // Use Event#preventDefault() to prevent submit
    // as a more reliable alternative to returning 
    // false
    event.preventDefault();
  } else {
  
    alert('It worked');
  }
}


// Ensure geo() is defined, seeing your form is relying on this
function geo() { }

<!-- update check call to pass event object -->
<form method="GET" action="/search" onsubmit="check(event)">

  <input class="form-control" id="getaddy" type="text" placeholder="Search..." name="term" onFocus="geo()">
  <input id="latitude" type="hidden" name="latitude">
  <input id="longitude" type="hidden" name="longitude">
  
</form>

如何在JS中检查缺少的变量？

2 个答案: