Javascript 执行事件时不会发生任何事情_Javascript_Html

Javascript 执行事件时不会发生任何事情

javascript html

Javascript 执行事件时不会发生任何事情,javascript,html,Javascript,Html,我有个困惑的问题代码如下，我看不出任何错误，我已经与我的其他代码进行了比较，它的格式完全相同/非常相似，但由于某种原因，这个代码没有执行事件我在if语句中也尝试过这样做： if (regExName.test(theForm.txtName.value)) 还是一样的错误，什么也没发生。lbl？？？根本不显示任何消息，说明它是否工作 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

我有个困惑的问题

代码如下，我看不出任何错误，我已经与我的其他代码进行了比较，它的格式完全相同/非常相似，但由于某种原因，这个代码没有执行事件

我在if语句中也尝试过这样做：

if (regExName.test(theForm.txtName.value))

还是一样的错误，什么也没发生。lbl？？？根本不显示任何消息，说明它是否工作

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .auto-style1 {
            width: 100%;
        }
        .auto-style2 {
            width: 265px;
        }
        #Text1 {
            width: 186px;
        }
        #Text2 {
            width: 186px;
        }
        #Text3 {
            width: 186px;
        }
        #txtName {
            width: 186px;
        }
        #txtAge {
            width: 186px;
        }
        #txtNumber {
            width: 186px;
        }
    </style>
    <script language="javascript" type="text/javascript">

        function btnValidate(theForm) {
            regExName = new RegExp("[a-zA-Z]");
            regExAge = new RegExp("^([1])?[0-9]{2}");
            regExNum = new RegExp("[2-9][0-9]{2}\-[0-9]{4}");

            if (regExName.test(theForm.txtName))
                lblName.innerHTML = "Valid, continue.";
            else 
                lblName.innerHTML = "Invalid Name Entry, please try again.";

            if (regExAge.test(theForm.txtAge))
                lblAge.innerHTML = "Valid, continue.";
            else
                lblAge.innerHTML = "Invalid Age Entry, please try again.";

            if (regExNum.test(theForm.txtNumber))
                lblNumber.innerHTML = "Valid, continue.";
            else
                lblNumber.innerHTML = "Invalid Phone Number Entry, please try again.";
        }

    </script>
</head>
<body>
    <form action="">

    <table class="auto-style1">
        <tr>
            <td class="auto-style2">Name:&nbsp;&nbsp;&nbsp;
                <input id="txtName" type="text" /></td>
            <td>
                <div id="lblName">
                </div>
            </td>
        </tr>
        <tr>
            <td class="auto-style2">Age:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <input id="txtAge" type="text" /></td>
            <td>
                <div id="lblAge">
                </div>
            </td>
        </tr>
        <tr>
            <td class="auto-style2">Number:
                <input id="txtNumber" type="text" /></td>
            <td>
                <div id="lblNumber">
                </div>
            </td>
        </tr>
    </table>
    <p>
        <input id="Submit1" type="submit" value="Validate" onsubmit="btnValidate(this.form)"/></p>
        </form>
</body>
</html>


.auto-style1{
宽度：100%；
}
.auto-style2{
宽度：265px；
}
#文本1{
宽度：186px；
}
#文本2{
宽度：186px；
}
#文本3{
宽度：186px；
}
#txtName{
宽度：186px；
}
#txtAge{
宽度：186px；
}
#txtNumber{
宽度：186px；
}
函数btnValidate（表单）{
regExName=newregexp（“[a-zA-Z]”）；
regExAge=newregexp（“^（[1]）？[0-9]{2}”）；
regExNum=newregexp（“[2-9][0-9]{2}-[0-9]{4}”）；
if（regExName.test（theForm.txtName））
lblName.innerHTML=“有效，继续。”；
其他的
lblName.innerHTML=“名称输入无效，请重试。”；
if（regExAge.test（form.txtAge））
lblAge.innerHTML=“有效，继续。”；
其他的
lblAge.innerHTML=“年龄输入无效，请重试。”；
if（regExNum.test（theForm.txtNumber））
lblNumber.innerHTML=“有效，继续。”；
其他的
lblNumber.innerHTML=“电话号码输入无效，请重试。”；
}
姓名：
年龄：
编号：

任何帮助都将不胜感激

更新的代码

您的按钮不在表单中，因此此.form返回未定义的。将a表单放在表的外部（和按钮），并将验证侦听器放在表单的

onsubmit

处理程序上，而不是按钮上。并将输入类型按钮更改为输入类型提交

关于守则的其他一些建议：

>   <script language="javascript" type="text/javascript">

变量应使用

var

关键字保持在本地，因此：

        var regExName = new RegExp("[a-zA-Z]");
        var regExAge = new RegExp("^([1])?[0-9]{2}");
        var regExNum = new RegExp("[2-9][0-9]{2}\-[0-9]{4}");

不要使用元素id作为全局变量，这是早期IE中引入的一个设计缺陷，其他浏览器为了兼容性而模仿它，只是不要这样做。使用以下命令获取对元素的引用：

         var lblName = document.getElementById('lblName');

请在if语句周围使用括号。它使代码更具可读性，更易于维护。上述内容也可以应用于代码的其余部分

至于HTML：

> <!DOCTYPE html>
> <html xmlns="http://www.w3.org/1999/xhtml">

您的按钮不在表单中，因此

this.form

undefined

。将a表单放在表的外部（和按钮），并将验证侦听器放在表单的

onsubmit