目錄：
HTML+CSS3（一）——認識瀏覽器
HTML+CSS3（二）——HTML 初識
HTML+CSS3（三）——HTML基本標籤
HTML+CSS3（四）——表單pattern正則屬性
HTML+CSS3（五）——CSS基礎
HTML+CSS3（六）——行內元素和塊級元素
HTML+CSS3（七）——display屬性（前面文章已講過，這裏轉載一篇）
HTML+CSS3（八）——CSS權重
HTML+CSS3（九）——CSS高級技巧
HTML+CSS3（十）——CSS3新特性之過渡
HTML+CSS3（十）——CSS3新特性之2D變形和3D變形
HTML+CSS3（十）——CSS3新特性之動畫
HTML+CSS3（十 一）——案例
HTML+CSS3（十二）——CSS常見問題
常用pattern正則：
手機號：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
密碼：^[a-zA-Z]\w{5,17}$ 字母開頭，長度在6~18之間，只能包含字母、數字和下劃線
強密碼：強密碼：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 包含大小寫字母和數字的組合，不能使用特殊字符，長度在8-10之間
整數：^-?\d+$
負整數：^-([1-9]|[1-9][0-9])*$
非整數：^\d+$
title和oninvalid的使用
title的使用：
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="__STATIC__/js/jquery-3.3.1.min.js"></script>
<body>
<form>
手機號：<input type="text" name="name" id='name' title='手機號格式不正確' pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$" required />
<input type='submit' />
</form>
</body>
<script>
</script>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
使用title的話會默認加上
請於所請求的格式保持一致
oninvalid的使用：
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="__STATIC__/js/jquery-3.3.1.min.js"></script>
<body>
<form>
用戶名：<input type="text" name="name" id='name' title='不行哦' pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$" oninvalid="setCustomValidity('請輸入11位手機號');" required="required" />
<input type='submit' />
</form>
</body>
<script>
</script>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
使用
oninvalid的話可自定義一個短語
pattern的侷限性
一、瀏覽器的支持
二、爲空時能跳過驗證
在正則驗證時，正則只會在有值的情況下驗證，但爲空時，就能跳過正則驗證，這是pattern的一個弊端……這時，我們加上h5的required屬性就可解決
更多正則驗證請參考：https://blog.csdn.net/qq_42455095/article/details/84944185
