javascript - onblur函数无法获取用户的输入

Question

我一直在尝试用 javascript 和 html 进行表单验证。我一直坚持使用 onblur()。这个想法是用户输入他的名字。如果他移出输入区域(文本框)而没有输入任何内容，则应显示错误消息。但根据我下面的代码，即使我输入任何内容，它仍然显示警报未输入名称。

   <form>
            <input type="text" id="fn" value="First Name" onfocus="fnm()"        onblur="chfnm()"/>
    </form>

    function fnm()
    {
            document.getElementById("fn").value="";  //clears default value of textbox
    }

function chfnm()
    {  
            var f=document.getElementById("fn");    
        for(var i=0;i<f.length;i++)
            {
                    if(i!=(f.length-1))
                            fname= fname +f.elements[i].value +"<br>";
                    else
                        fname= fname+ f.elements[i].value;
            }

            if(fname=="")  //error is fname is always an empty string
            {
                    alert("Please fill your first name");
                    document.getElementById("fn").focus();  
            }


    }

我是 javascript 新手，所以任何新想法都会受到赞赏和欢迎。

Answer 1

如果您想验证用户是否输入名称，您可以简单地使用此代码。如果是这样，您将在 for 循环 中添加额外的代码。

function fnm(){
        document.getElementById("fn").value="";  //clears default value of textbox
}
var fname = "";
function chfnm(){ 
    fname = document.getElementById("fn").value;    
    if(fname==""){  
        alert("Please fill your first name");
        document.getElementById("fn").focus();  
    }else{
        alert("your name " + fname);
    }
}

DEMO