HTML5驗證的數值

我有一個簡單的HTML頁面，有兩個輸入文本框和一個提交按鈕。當我點擊提交按鈕與無效的電子郵件地址它給了我一個錯誤消息。我怎樣才能實現相同的（顯示一個小的工具提示像彈出）爲數值的其他文本框？HTML5驗證的數值

下面是完整的HTML

<html> 
<head> 
<style> 
body { 
    font: 1em sans-serif; 
    padding: 0; 
    margin : 0; 
} 

form { 
    max-width: 200px; 
    margin: 0; 
    padding: 0 5px; 
} 

p > label { 
    display: block; 
} 

input[type=text], 
input[type=email], 
input[type=number], 
textarea, 
fieldset { 
/* required to properly style form 
    elements on WebKit based browsers */ 
    -webkit-appearance: none; 

    width : 100%; 
    border: 1px solid #333; 
    margin: 0; 

    font-family: inherit; 
    font-size: 90%; 

    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

input:invalid { 
    box-shadow: 0 0 5px 1px red; 
} 

input:focus:invalid { 
    outline: none; 
} 
</style> 

</head> 
<body><form> 
<p> 
    <label for="t1">What's your age?</label> 
    <input type="number" id="t1" name="age"> 
    </p> 
<p> 
    <label for="t2">What's your e-mail?</label> 
    <input type="email" id="t2" name="email"> 
    </p> 
<p> 
    <button>Submit</button> 
    </p> 
</form> 
</body> 
</html>

來源

2016-02-23 Mandar Patil

作爲一個側面說明：在案件99％，你要問的生日，而不是年齡。 –

更好的解決方案是使用圖案屬性，使用正則表達式來匹配輸入：

<input type="text" pattern="\d*" />

\ d是許多正則表達式中，*表示它接受一個以上的他們。

來源

2016-02-23 06:08:50 Pranavadurai

對不起。我不會工作。我只是試過你的代碼。 –

檢查此https://jsfiddle.net/pranavadurai/fbe3ktgm/ – Pranavadurai

謝謝！是否可以自定義錯誤信息？ –

正如你已經使用HTML 5的數字文本框，這樣你就不會需要手動設置這種工具提示。如果有任何驗證錯誤，則此工具提示將自動顯示爲與電子郵件相同。

這是一個數字文本框，因此它不會允許您輸入除數字之外的任何其他字符，因此在這種情況下，您將不會收到任何驗證錯誤。如果您設置了最小值和最大值等任何限制，並且如果驗證不成立，則工具提示將自動顯示。

您可以通過在文本框上設置一些數字限制來檢查工具提示。希望這會幫助你。

來源

2016-02-23 05:58:57

它可以通過javascript的幫助來實現。

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" >

我只是跳過了非數字字符。用戶只能填寫數字數據。希望這就是你想要的。

來源

2016-02-23 06:05:55

與HTML以及使用默認的驗證可以不用努力

<input type="number" required > 
 
<input type="submit" >

來源

2016-02-23 06:55:11

HTML5驗證的數值

回答

相關問題