JavaScript-表格-驗證數字和電子郵件

Question

我不太擅長腳本編寫或編碼，因此，如果這是一個愚蠢的問題，我真的很抱歉。

我有一個表格：

<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>

該表格效果很好。

我想驗證電話號碼，以便只能輸入0-9之間的數字。 我不擔心長度或類似的搖滾樂。 我只想確保用戶輸入數字，然后可以對此進行擴展。 這是我的代碼：

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";
        }
        else if (patt==null || patt !== RegExp )
        {
             document.getElementById('tel_required').innerHTML="numbers only allowed";
        }
}

我懷疑我的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";
            }
} 

Answer 1

如果您很幸運能夠成為HTML5，則可以擺脫困境

<input type="number">

嘗試輸入type = number以查看實際使用的HTML5版本。

否則嘗試下面的代碼

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

Answer 2

正如Novocaine88所說，您還應該留出空格。

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

請注意，也可以通過文字/pattern/而不是構造函數來聲明正則表達式的更簡單方法。