HTML表格字段 - 如何要求輸入格式

我在這裏要做的是要求將電話號碼作爲（XXX）XXX-XXXX輸入到我的HTML表單中，並且SS號碼輸入爲XXX-XX-XXXX。而已。HTML表格字段 - 如何要求輸入格式

我這樣做的唯一原因是，表單提交結果是一致的，並且易於導出到Excel。

我被告知使用Javascript來做到這一點，但也許我沒有足夠先進的理解所有這些步驟。

有人可以請指點我在正確的方向在這裏記住，我是一個初學者？

非常感謝你Ethan和@ suman-bogati！我幾乎在那裏！該字段現在會彈出一個錯誤消息，指出使用正確的格式555-55-5555。那很棒。但是不管我輸入什麼內容進入該字段，彈出窗口仍然存在。我試過555-55-5555和555555555，都不被接受。以下是該字段的HTML：

<label> 
      Social Security Number: 
      <input id="ssn" required pattern="^d{3}-d{2}-d{4}$" 
       title="Expected pattern is ###-##-####" /> 
     </label> 
</div> 
    <script>$('form').on('submit', function(){ 
     $(this).find('input[name="SocialSecurity"]').each(function(){ 
     $(this).val() = $(this).val().replace(/-/g, ''); 
    }); 
    $(this).find('input[name="ssn"]').each(function(){ 
     $(this).val() = $(this).val().replace(/-/g, ''); 
    }); 
});</script> 
    <br />

來源

2014-02-08 JefeTheTechy

在HTML5中，輸入元件可以具有['pattern'屬性，指定格式]（HTTP：// www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-pattern-attribute）。另一方面，你永遠不應該信任客戶端驗證，因爲它很容易被繞過，你總是需要驗證服務器端的格式。 –

所以你想要兩個模式應該匹配'（XXX）XXX-XXXX'和'（XXX）XXX-XXXX'？ –

蘇珊，這是正確的。將該行更改爲絕對沒有任何作用 – JefeTheTechy

做到這一點的最簡單方法是簡單地使用多個字段：

<div> 
    Phone: 
    (<input type="text" name="phone-1" maxlength="3">) 
    <input type="text" name="phone-2" maxlength="3">- 
    <input type="text" name="phone-3" maxlength="4"> 
</div> 
<div> 
    SSN: 
    <input type="text" name="ssn-1">- 
    <input type="text" name="ssn-2">- 
    <input type="text" name="ssn-3"> 
</div>

雖然這種方法肯定是容易的，這是不是很大。用戶必須按標籤或點擊每個字段才能輸入數據，除了常識以外，什麼都不能阻止他們輸入數字以外的東西。

我總是覺得，驗證時，用戶的方式越少越好。讓他們以他們喜歡的任何格式輸入他們的電話號碼，然後擦洗它，除去數字以外的所有內容。這樣用戶可以輸入「5555551212」或「（555）555-1212」，但數據庫將始終保存「5555551212」。

要考慮的另一件事是，HTML5爲電話號碼提供了一些很好的特定類型（但不是SSN）。現代瀏覽器將負責所有輸入驗證，而且更好的是，移動設備將顯示數字鍵盤而不是整個鍵盤。

鑑於此，以顯示你的形式最好方式是這樣的：

<div> 
    <label for="fieldPhone">Phone: </label> 
    <input type="tel" id="fieldPhone" placeholder="(555) 555-1212"> 
</div> 
<div> 
    <label for="fieldSsn">SSN: </label> 
    <input type="text" id="fieldSsn" name="ssn" placeholder="555-55-5555" pattern="\d{3}-?\d{2}-?\d{4}"> 
</div>

如果用戶擁有現代化的瀏覽器，這將處理輸入驗證的用戶側爲您服務。如果他們不這樣做，則必須使用驗證庫或polyfill。目前的HTML5表單驗證的整個列表polyfills這裏：

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#wiki-web-forms

所以現在剩下的就是一定要規範你的數據，當您將它保存到數據庫中。

做這件事的理想場所是後端;但它並沒有說明你的表單將要發送到哪裏，所以你可能對後端的處理方式沒有任何發言權。所以你可以在前端做到這一點。例如，使用jQuery：

$('form').on('submit', function(){ 
    $(this).find('input[type="tel"]').each(function(){ 
     $(this).val() = $(this).val().replace(/[\s().+-]/g, ''); 
    }); 
    $(this).find('input[name="ssn"]').each(function(){ 
     $(this).val() = $(this).val().replace(/-/g, ''); 
    }); 
});

這是不是一個完美的方法之一：如果您在本功能做驗證，以及驗證失敗，用戶將看到他或她的輸入替換爲標準化版本，這可令人不安。

最好的方法是使用AJAX和.serialize;您不僅可以更好地控制UI，還可以執行所需的所有驗證。但這可能超出了你現在需要做的一點。

請注意，手機驗證是最棘手的。 HTML5手機驗證非常寬鬆，允許用戶輸入國際電話號碼，這些號碼可能有相當複雜的格式。即使美國人有時也會輸入電話號碼，如「+1（555）555-1212」，然後你有8位數字而不是7位。如果你真的想限制他們到7位數字，你必須添加你的自定義的驗證：

/^\(?\d{3}\)?[.\s-]?\d{3}[.\s-]\d{4}$/

這將覆蓋到所有人羣使用（時間，空間，破折號，括號）的共同變化，仍然只允許7位美國的電話號碼。

這裏有一個的jsfiddle展示HTML5驗證和標準化：

http://jsfiddle.net/Cj7UG/1/

我希望這有助於！

來源

2014-02-08 19:33:25

謝謝。這樣的工作，但現在我得到了「請輸入正確的格式」，無論我輸入的字段格式如何。 – JefeTheTechy

There在我的SSN模式中是一個錯字（我使用三位數字代替了四位）。我糾正了這一點，並添加了一個jsfiddle來演示它的全部工作：http://jsfiddle.net/Cj7UG/1/ –

如果您希望兩個模式應按照問題進行匹配，請使用此模式。

//for (XXX)-XXX-XXXX 
var pattern = /^\(\d{3}\)\-\d{3}\-\d{4}$/; 

//for XXX-XXX-XXXX 
var pattern2 = /^\d{3}\-\d{3}\-\d{4}$/;

DEMO

來源

2014-02-08 19:29:56

下面是使用jQuery和jQuery工具驗證的完整解決方案：將處理這兩種情況是正則表達式：

^（\ d {3} - |（\ d {3}）\ S ）\ d {2} - \ d {4} $

HTML：

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script> 
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js" type="text/javascript"></script> 
<link href="http://jquerytools.org/media/css/validator/form.css" type="text/css" rel="stylesheet"> 
<script> 
$(function() { 
    $("#myform").validator(); 
}); 
</script> 
</head> 
<body> 
<form id="myform"> 
    <input type="text" name="name" pattern="^(\d{3}-|\(\d{3}\)\s)\d{2}-\d{4}$" maxlength="30" /> 
    <br> 
    <input type="submit" name="submit" value="submit" /> 
</form> 
</body>

Click here for demo on jsfiddle

來源

2014-02-08 19:36:30

使用可以使用某事像這樣：

<html> 
<head> 
</head> 
<body> 
<input type="text" id="ok"> 
<script> 
document.getElementById("ok").onkeypress = function(e){ 
    var keycodes = new Array(0,48,49,50,51,52,53,54,55,56,57); 
    var was = false; 
    for(x in keycodes){ 
     if(keycodes[x] == e.charCode){ 
      was = true; 
      break; 
     } 
     else{ 
      was = false; 
     }; 
    }; 
    var val = this.value; 
    if(was === true){ 
     switch(val.length){ 
      case 3: 
       if(e.charCode !== 0){ 
       this.value += "-"; 
       } 
       break; 
      case 6: 
       if(e.charCode !== 0){ 
       this.value += "-"; 
       } 
       break; 
      default: 
       if(val.length > 10 && e.charCode !== 0){return false;}; 
       break; 

     }; 
     val += e.charCode; 
    } 
    else{ 
     return false; 
    }; 

}; 
</script> 
</body>

我測試了它在FF

來源

2014-02-08 19:47:16 scripter

HTML表格字段 - 如何要求輸入格式

回答

相關問題