JavaScript - 表單 - 驗證號碼和電子郵件

我不擅長腳本或編碼，所以如果這是一個愚蠢的問題，我真的很抱歉。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>

形式的偉大工程。

我想驗證電話號碼，以便只能輸入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"; 
     } 
}

我懷疑我有一些根本性的錯誤在我的其他if語句（（PATT == NULL || PATT ==正則表達式）！），或者它甚至構建正確，或者說，它應該即使是其他語句也是如此！但我似乎甚至無法理解我的邏輯。

任何幫助將是偉大的。謝謝，再次抱歉，如果這是一個愚蠢的問題。

以下是完整的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._-][email protected][a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/"); 

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

來源

2013-08-02 Simon

你應該注意到，大多數人要麼輸入空格或其他非0-9個字符的電話號碼，因此不應該被限制在0-9 – Novocaine

好吧，我假設您每次在該輸入框中輸入某個動作時都會調用該函數，因此您似乎缺少的一種情況是，一旦框內的輸入與您所尋找的內容匹配，就會清除內部html。 – Jayson

你甚至沒有測試你的正則表達式 –

如果你足夠幸運，HTML5，你也許可以逃脫

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

來源

2013-08-02 10:03:43

謝謝，但該函數的代碼不起作用。 – Simon

其實，我剛剛有一個與您的代碼，現在出現一條消息說：「只允許數字」，如果我輸入文本！我想一點點！ – Simon

賓果!!!這已經完成了！非常感謝！！！ – Simon

由於Novocaine88說，你也應該允許的空間。

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

注宣佈正則表達式，也是比較簡單的方法，通過字面/pattern/而不是構造函數。

來源

2013-08-02 10:02:27 Utkanos

JavaScript - 表單 - 驗證號碼和電子郵件

回答

相關問題