常用的 Bootstrap 5 表單 pattern 屬性總結:
- 驗證文本框:驗證文本框的值是否符合指定的正則表達式。例如,
pattern="[a-zA-Z]{3,}$"表示驗證字符串必須至少包含 3 個字母,且最後一個字母不能爲數字或空格。 - 驗證密碼框:驗證密碼框的值是否符合指定的正則表達式。例如,
pattern="(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!@#$%^&*()_+])[a-zA-Z\\d!@#$%^&*()_+]{8,}$"表示密碼必須包含至少一個字母、一個數字、一個特殊字符,且長度至少爲 8 個字符。 - 驗證電子郵件框:驗證電子郵件框的值是否符合指定的正則表達式。例如,
pattern="^([a-zA-Z0-9_\.-]+)@([\da-zA-Z\.-]+)\.([a-zA-Z\.]{2,6})$"表示電子郵件地址必須由字母、數字、點、下劃線或破折號組成,並且郵件地址中的點不能位於郵件地址的開頭或結尾。 - 驗證手機號碼框:驗證手機號碼框的值是否符合指定的正則表達式。例如,
pattern="^1[3|4|5|6|7|8|9][0-9]{9}$"表示手機號碼的開頭必須是數字,第二位是 3、4、5、6、7、8、9 中的一位,手機號碼長度爲 11 位。 - 驗證 URL 框:驗證 URL 框的值是否符合指定的正則表達式。例如,
pattern="^(https?|ftp|ssh)://[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"表示 URL 必須使用 HTTPS 協議,開頭必須是 https://、http:// 或 ftp://,URL 長度不超過 2000 個字符。 - 驗證日期格式:驗證日期格式是否符合指定的正則表達式。例如,
pattern="^([0-9]{2}-[0-9]{2}-[0-9]{4})$"表示日期必須按照年 - 月-日 的格式輸入。 - 驗證時間格式:驗證時間格式是否符合指定的正則表達式。例如,
pattern="^([0-9]{2}-[0-9]{2}-[0-9]{4} [0-9]{2}:[0-9]{2}:[0-9]{2}Z)$"表示時間必須按照年 - 月-日 H:M:S 的格式輸入。
除了以上列舉的用法,pattern 屬性還有其他用法,具體取決於應用場景。