JavaScript-表单-验证数字和电子邮件

我不擅长编写脚本或编码，所以如果这是一个愚蠢的问题，我真的很抱歉

我有一张表格：

<form name="userinfo" action="validform.html" method="post" onsubmit="return validateForm()">
    <fieldset>
        <legend>Personal Information</legend><br />

        <label for="firstname">First Name:</label>
        <input type="text" id="firstname" name="firstname">
        <span id="firstname_required"></span><br />

        <label for="surname">Surname:</label>
        <input type="text" id="surname" name="surname">
        <span id="surname_required"></span><br />

        <label for="tel">Tel No:</label>
        <input type="tel" id="tel" name="tel">
        <span id="tel_required"></span><br />

        <label for="email">Email:</label>
        <input type="email" id="email" name="tel">
        <span id="email_required"></span><br />

        <label for="password">Password:</label>
        <input type="password" id="password" name="password">
        <span id="password_required"></span><br />

        <label for="submit"></label>
        <input type="submit" value="Submit!">
    </fieldset>
</form>

我怀疑我的else-if语句（（patt==null | | | patt！==RegExp））中有一些根本错误，或者它甚至构造正确，或者它甚至应该是一个else-if语句！！但我甚至不能完全正确地理解这个逻辑

任何帮助都会很好。谢谢，如果这是一个愚蠢的问题，请再次道歉

以下是我迄今为止的完整JavaScript代码：

function validateForm()
    {
        var a=document.forms["userinfo"]["firstname"].value;

        if (a==null || a=="")
                {
                    document.getElementById('firstname_required').innerHTML="required";
                }


        var a=document.forms["userinfo"]["surname"].value;

        if (a==null || a=="")
            {
                document.getElementById('surname_required').innerHTML="required";
            }

validateNumber()
validateEmail()


        var a=document.forms["userinfo"]["password"].value;

        if (a==null || a=="")
            {
                document.getElementById('password_required').innerHTML="required";
                return false;
            }

    }

function validateNumber()
{
var a=document.forms["userinfo"]["tel"].value;
var patt=new RegExp("[0-9]");

if (a==null || a=="")
            {
                document.getElementById('tel_required').innerHTML="required";
            }

 if (patt==null || patt !== RegExp )
            {
                document.getElementById('tel_required').innerHTML="numbers only allowed";
            }
}


function validateEmail()
{
var a=document.forms["userinfo"]["email"].value;
var patt=new RegExp("/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/");

if (a==null || a=="")
            {
                document.getElementById('email_required').innerHTML="required";
            }
} 

---

正如Novocaine88所说，您还应该允许空间

if (!/[^\d ]/.test(a)) {
    //OK
} else {
    //not OK - contains character(s) other than numbers/spaces
}

---

请注意声明正则表达式的更简单方法，也可以通过literal

/pattern/

而不是构造函数来声明。

如果您足够幸运，能够成为HTML5的话，您可能能够逃脱惩罚

<input type="number">

---

您应该注意，大多数人要么输入空格，要么输入其他非0-9字符作为电话号码，因此不应限制为0-9。好吧，我假设每次在输入框中输入某个操作时，您都会调用此函数，因此，您似乎缺少的一个例子是，一旦框中的输入与您要查找的内容匹配，就可以清除内部html。您甚至没有严格测试您的注册表，我刚刚对您的代码进行了另一次测试，现在出现一条消息，如果我键入文本，则会显示“仅允许数字！！！！我想再近一点！！快乐编码：）请勾选答案。

<input type="number">

function validateNumber()
{
        var a=document.forms["userinfo"]["tel"].value;

        if (a==null || a=="")
        {
         document.getElementById('tel_required').innerHTML="required";
        }
        else if (/[^\d]/.test(a)) 
        {

             document.getElementById('tel_required').innerHTML="numbers only allowed";
        }
    else {
         document.getElementById('tel_required').innerHTML="input OK";
         }
    }