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

Fiddle。

Answer 2

如果您已经阅读过HTML5，它允许您直接将表单验证添加为属性字段，而不必为其编写代码。它还整齐地呈现了一些东西。看一看。这可能有所帮助： http://diveintohtml5.info/forms.html

Answer 3

我建议使用Jquery validator。当然你需要包含jquery和jquery插件，但是你不需要时间从头开始编写验证来实现现有的。

使用javascript验证用户输入

3 个答案: