HTML5自帶表單驗證程式碼例項

admin發表於2017-04-15
HTML

大家知道，在HTML5中提供了一些比較方便的表單驗證功能。

但是本人一直不認為HTML5提供的這些結構是靈活且實用的，比如不能夠滿足更為複雜或者美觀度要求更高的需求，不過對於一般的需求還是非常方便的，下面就演示一下自帶表單驗證的使用，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<form>
  <input id="text" pattern="^1[3-9]\d{9}$" required />
  <input id="button" type="submit" />
</form>
</body>
</html>

required屬性規定文字框是必填的，pattern屬性值是一個正規表示式，用來驗證文字框內容的格式。

a:3:{s:3:\"pic\";s:43:\"portal/201704/15/121156jq6jmkoaac6y7a5o.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

但是預設的提示語並不能明確告訴我們錯誤所在，所以最好使用setCustomValidity()自定義提示語。

程式碼修改如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script>
window.onload=function(){
  text.oninvalid=function(){
    text.setCustomValidity("請輸入正確格式的手機號碼");
  };
}
</script>
</head>
<body>
<form>
  <input id="text" pattern="^1[3-9]\d{9}$" required />
  <input id="button" type="submit" />
</form>
</body>
</html>

invalid事件會在表單submit事件之前觸發，如果驗證不通過的話就不會提交表單；提交時會先驗證所有表單元素是值是否有效。

相關文章