Javascript警告验证表单

时间:2014-02-04 12:33:20

标签: javascript validation html

此表单的输出是每当您输入错误的字符时,您在onBlur后右侧会出现警告。当你在盒子和onBlur上再次输入正确的字符时,警告就会消失。

脚本运行正常,除非您输入有效字符然后单击文本框外部,然后再单击文本框内并输入不需要的字符而不删除您输入的先前有效字符,警告消息不会出现

如何在这种情况下显示警告消息的任何建议?

这是代码:

  <!DOCTYPE html>
<html>
<head>

</head>
<body>

<script>

    function editThisOne(regThat,input,spanId,spanMessage)
    {
        if(!regThat.test(input))
        {
            if(spanId!=null)
            while(spanId.firstChild)
            spanId.removeChild(spanId.firstChild)
            spanId.appendChild(document.createTextNode(spanMessage))
            return false;
        }
        else
        {
            if(spanId!=null)
            while(spanId.firstChild)
            spanId.removeChild(spanId.firstChild)
            return true;
        }
    }

    function changeThis(wow,that)
    {
        return editThisOne(/[A-Za-z\.\'\-]{2,15}\s?[A-Za-z\.\'\-]{2,15}\s?[A-Za-z\.\'\-]{2,15}/,wow.value,that,"Please enter name correctly");
    }

</script>
<div>
    Enter your name:
        <input id="name" onBlur="changeThis(this,document.getElementById('thisSpan'))">
        <span id="thisSpan"></span>
</div>
</body>
</html>

3 个答案:

答案 0 :(得分:1)

您的正则表达式可能缺少start(^)和end($)分隔符,这意味着只要输入字符串在其中的任何位置包含有效的字符序列,它就不会验证正如所料。请尝试使用以下正则表达式:

/^[A-Za-z\.\'\-]{2,15}\s?[A-Za-z\.\'\-]{2,15}\s?[A-Za-z\.\'\-]{2,15}$/

答案 1 :(得分:0)

尝试

<input id="name" onkeyup="changeThis(this,document.getElementById('thisSpan'))">

而不是

<input id="name" onBlur="changeThis(this,document.getElementById('thisSpan'))">

onkeyup在每次按键时触发(每次按下你按下的按钮都会恢复)。 onblur只是在元素失去焦点时触发(点击其他地方,按Tab键)

答案 2 :(得分:0)

onBlur()当表单元素失去焦点时,会发生该事件 onkeyup()当用户释放密钥时发生事件