在 Javascript 中使用 if 和 if else答案

【问题标题】：Using if and if else in Javascript在 Javascript 中使用 if 和 if else
【发布时间】：2017-01-20 11:54:23
【问题描述】：

我有一些功能可以验证这样的输入字段：

function validateName() {
        var inputName = document.getElementById('name');
        var pesanError ='';
        if (inputName.value ===""){
            pesanError = 'Name can't be empty'
            tambahError('name',pesanError)
        }else if(inputName.value !="" && inputName.value.length < 3){
            remove('name');
            pesanError = 'Name is too short'
            tambahError('name',pesanError)
        }else{
            remove('name')
        }
    }

我使用这样的添加事件：

var inputName = document.getElementById('name');
inputName.addEventListener("blur", validateName, true);

它工作正常，当它为空时显示“名称不能为空”，当有值但长度小于 3 时，它会显示“名称太短”，但问题是在它有值之后并显示“名称太短”，然后该字段再次没有值它仍然显示“名称太短”。所以我的问题是如何使我的函数在值再次变为无值时再次显示“名称不能为空”。

这里是 remove 函数和 tambahError 函数：

function remove(id) {
        var element = id + "Error";
        var inputName = document.getElementById(element);
        if (inputName !== undefined){
            inputName.remove();
        }
    }
function tambahError(kolom,pesan) {
        if (document.getElementById(kolom+"Error")== undefined){
            var inputName = document.getElementById(kolom);
            var h = document.createElement("span");
            h.id = kolom+"Error";
            var t = document.createTextNode(pesan);
            h.appendChild(t);
            h.className='error';
            insertAfter(h, inputName);
        }
    }

【问题讨论】：

为什么小于3的时候名字太短？我认识很多人有 2 个字母的名字
我们不知道您的 tambahError 函数是做什么的 - 可能只是将错误消息附加到目标元素，而不是替换它们。
你能把remove和tambahError函数代码贴出来！这可能会有所帮助
@Ayaou 完成，我已经在这里添加了。谢谢

标签： javascript if-statement dom-events

【解决方案1】：

试试这个

pesanError = 'Name can't be empty'

把字符串改成

pesanError = 'Name can\'t be empty'

这应该可以修复错误

【讨论】：

【解决方案2】：

我找到了自己的答案，问题是 createTextNode 无法更新，所以我只需删除 span 并再次创建新节点，如下所示：

function validateName() {
        var inputName = document.getElementById('name');
        var pesanError ='';
        if (inputName.value ===""){
            remove('name');
            pesanError = 'Nama tidak boleh kosong';
            tambahError('name',pesanError)
        }else if(inputName.value !="" && inputName.value.length < 3){
            remove('name');
            pesanError = 'Nama yang anda masukkan terlalu pendek'
            tambahError('name',pesanError)
        }else{
            remove('name')
        }
    }

【讨论】：

【解决方案3】：

我们不知道你的 tambahError 和 pesanError 和 remove 做什么。

试试这个。

<!DOCTYPE html>
<html lang="en">
<head>

  <script>
function validateName() {
        var inputName = document.getElementById('name');
        var pesanError ='';
        if (inputName.value ===""){
            alert("Name can't be empty");
        }else if(inputName.value !="" && inputName.value.length < 3){
            alert("Name is short");
        }else{
            alert("remove name");
        }
    }

  var inputName = document.getElementById('name');
inputName.addEventListener("blur", validateName, true);

  </script>
</head>
<body>
    <input id='name'></input>
</body>
</html>

【讨论】：

我已经用 tambahError 和 pesanError 函数更新了我的问题。谢谢。