使用javascript验证用户输入

Question

我正在尝试使用javascript验证用户输入到客户端的texbox中的内容。 我还像这样在我的输入标签附近添加了一个跨度，

<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';
        }
}

小提琴 。

Answer 2

如果您已阅读HTML5，则可以直接将表单验证添加为属性字段，而不必为此编写代码。 它也呈现整齐的事物。 看一看。 这可能会有所帮助： http : //diveintohtml5.info/forms.html

Answer 3

我建议使用Jquery验证器 。 当然，您需要包括jquery和jquery插件，但是您无需花费时间从头开始编写验证即可实现已存在的验证。