javascript - 使用 javascript 验证用户输入

Question

我正在尝试使用 JavaScript 验证用户在客户端的文本框中输入的内容。我还在输入标记附近添加了一个跨度，如下所示，

<div>
                        <label for="fname">First Name*</label>                      
                        <input id="fname" name="fname" maxlength="30" type="text" /><span style="display:none;" id="fnameerror" name="fnameerror">*Please enter your firstname</span>
    </div>

这是验证输入的 JavaScript 代码片段，

if(document.getElementById('fname').value.length==0){
            msg='Please enter your first name';
            document.getElementById('fnameerror').style.display='inline';
            document.getElementById('fnameerror').style.color='red';
            valid=false;
        }

我现在想要实现的是，1)有错误的文本框应该获得焦点。2) 显示错误消息并且用户输入有效数据后，错误消息应该消失。

我该如何实现这一目标。我对 javascript 还很陌生。谢谢。

Answer 1

更改你的 JS 代码:

document.getElementById('fname').onkeyup = function() {
if(document.getElementById('fname').value.length==0){
            msg='Please enter your first name';
            document.getElementById('fnameerror').style.display='inline';
            document.getElementById('fnameerror').style.color='red';
            valid=false;
            document.getElementById('fname').focus();
        } else {
            valid=true;
            document.getElementById('fnameerror').style.display='none';
        }
}

Fiddle 。