Question

我正在学习如何编程，所以请耐心等待。我非常需要验证表单中是否有空格需要填写，我使用的是javascript。我做了以下但由于某种原因，即使我填写所有空格，它仍然告诉我有空格。

（这是他对每个id的HMTML的看法）

 <label for="txtNombre">Name</label>
 <input type="text" id="txtName" placeholder="Name">

let inputName = document.querySelector('#txtName').value; 
let inputLastName = document.querySelector('#txtLastName').value; 
let inputPassword = document.querySelector('#txtPassword').value; 
let inputConfirm = document.querySelector('#txtConfirm').value; 
let inputDate = document.querySelector('#dDate').value;

function validateForm(){
    let bError = false;

    if(inputPassword === '' || inputConfirm === '' || inputName ==='' || inputLastName === '' || inputDate === ''){
        bError = true;
        showMessage(bError);
    }else if (inputPassword === inputConfirm) {
        inputPassword.classList.remove('borderError');
        showMessage(bError);
    } else{
        inputPassword.classList.add('borderError');
        bError = true;
        showMessage2(bError);
    }
}

function showMessage(pbError){
    divMessage.innerHTML = '';
    divMessage.classList.remove('error');
    divMessage.classList.remove('correct');

    let spanMessage = document.createElement('span');
    let nodeMessage;

    if(pbError === true){
        divMessage.classList.add('error');
        nodeMessage = document.createTextNode('Missing fields to be filled out');       
    }else{
        divMessage.classList.add('correcto');
        nodeMessage = document.createTextNode('Data saved');
    }

    spanMessage.appendChild(nodeMessage);
    divMessage.appendChild(spanMessage);
    divMessage.classList.remove('invisible');
}

Answer 1

由于您的问题不包含任何html代码，并且因为我不确定您的javascript是否是整个脚本，或者如果在您的函数范围之外定义了任何内容，我的答案仅限于您拥有的信息提供。

首先，因为您是新开发者。你应该先学习如何使用您正在使用的浏览器的开发人员工具（大多数浏览器有它们）。那里应该有一个控制台，它会记录你的javascript中发生的所有错误。这是最多的调试代码的有效方法。

正如有人在这里评论了您的问题，最可能的错误是，您尝试验证的变量是否为空白，是未定义的变量。因此，它们永远不会匹配“”

在检查之前，您应该参考输入字段的值。

假设您有输入字段：

<input name="test" type="text" id="testinput" />

然后定义引用此输入值的变量，并检查其值：

var testInput = document.getElementById('testinput').value
if( testInput === "" ) //Do something

注意，有几种方法可以在javascript中引用DOM元素，getElementById只是其中之一。您应该做一些研究，并选择最适合您的解决方案

Answer 2

假设您将输入值存储在inputPassword等变量中，例如：

const inputPassword = document.getElementById('myInput').value

根据您发布的内容，您的代码应该可以正常工作。希望它有所帮助

使用Javascript验证是否存在空输入文本/电子邮件/日期？

2 个答案: