|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
無JS，純HTML+CSS實現(xiàn)的表單驗證
作者:admin 時間:2022-5-16 18:10:1 瀏覽:通常我們進行注冊表單驗證時，都是用JavaScript或JQuery來實現(xiàn)的，今天我要介紹的是，無需JS，純HTML+CSS就能很好的完成表單驗證的任務(wù)。
實例介紹
表單包含多個字段，有必填的，也有非必填的，有E-maill，手機號、密碼等注冊時的常見字段。
表單驗證包括幾個方面：
1、必填字段不能為空
2、字段內(nèi)容有格式標準，如Email格式、密碼標準、手機號格式。
3、每個輸入框下方有填寫提示框
實現(xiàn)方法
HTML+CSS要實現(xiàn)表單驗證功能，主要是利用它們自身的幾個屬性：required、pattern、placeholder等。
required
<input type="name" name="name" id="name" placeholder=" " required/>
required 屬性規(guī)定必需在提交之前填寫輸入字段。
如果使用該屬性，則字段是必填（或必選）的。
注釋：required 屬性適用于以下 <input> 類型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
required 屬性是 HTML5 中的新屬性。
pattern
<input
type="password"
name="password"
id="password"
placeholder=" "
required
min="12"
pattern="^(?=.{12,})(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*\-_+=]).*$"
/>
<label for="password">密碼</label>
pattern 屬性規(guī)定了一個表單控件的值應(yīng)該匹配的 正則表達式。
pattern 屬性是 text, tel, email, url, password 和 search 等輸入類型的屬性。
pattern 屬性被定義為一個正則表達式，輸入的 value 必須與之匹配，以便該值能夠通過 約束驗證。它必須是一個有效的 JavaScript 正則表達式，如 RegExp 類型，并且如同我們的 正則表達式指南 中所述：在編譯正則表達式時指定 'u' 標志，以便將該模式作為 Unicode，而不是 ASCII。模式文本周圍不應(yīng)指定正斜杠。
如果沒有指定模式或無效，則不應(yīng)用正則表達式，此屬性被忽略。
placeholder
<input type="email" name="email" id="email" placeholder=webkaka@admin.com />
偽元素::placeholder可以選擇一個表單元素的占位文本，它允許開發(fā)者和設(shè)計師自定義占位文本的樣式。
placeholder 屬性提供可描述輸入字段預(yù)期值的提示信息（hint）。
該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。
注釋：placeholder 屬性適用于以下的 <input> 類型：text, search, url, telephone, email 以及 password。
placeholder 屬性是 HTML5 中的新屬性。
完整HTML代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="card">
<form class="material">
<header>
<h1>注冊賬號</h1>
<h2>填寫以下表格創(chuàng)建新賬戶</h2>
</header>
<div class="card-content form-content">
<div class="field">
<input type="name" name="name" id="name" placeholder=" " required/>
<label for="name">名稱</label>
</div>
<div class="field">
<input type="email" name="email" id="email" placeholder=" " />
<label for="email">Email</label>
</div>
<div class="field">
<input type="tel" name="phone" id="phone" placeholder=" " pattern="1((3[0-9])|(4[1579])|(5[0-9])|(6[6])|(7[0-9])|(8[0-9])|(9[0-9]))\d{8}" required/>
<label for="phone">電話</label>
<div class="hint">如：13800000000</div>
</div>
<div class="field">
<input
type="password"
name="password"
id="password"
placeholder=" "
required
min="12"
pattern="^(?=.{12,})(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*\-_+=]).*$"
/>
<label for="password">密碼</label>
</div>
<div class="password-criteria">
<p><strong>密碼標準</strong></p>
<ul>
<li>至少12位長度</li>
<li>必須至少包含一個大寫字母</li>
<li>必須至少包含一個數(shù)字</li>
<li>必須包含至少一個字符</li>
</ul>
</div>
<div class="field">
<input
type="password"
name="confirm"
id="confirm"
placeholder=" "
required
min="12"
pattern="^(?=.{12,})(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*\-_+=]).*$"
/>
<label for="confirm">再次輸入密碼</label>
</div>
</div>
<footer>
<button class="material flat" type="reset">重置</button>
<button class="material primary" type="submit">注冊</button>
</footer>
</form>
</section>
</body>
</html>
style.css
請看附件源碼。
總結(jié)
本文詳細介紹了純HTML+CSS實現(xiàn)的表單驗證，通過本文，我們應(yīng)該了解幾個HTML知識點，它們是HTML5的新屬性：required，pattern等。
不過并不是所有的驗證HTML都能完成，比如本實例中，并沒有驗證“密碼兩次輸入是否一致”。
相關(guān)文章
- 如何用CSS把背景分為2種顏色
- 實例演示CSS Inline與inline-block的區(qū)別
- [CSS]防止移動端放大屏幕時文字換行溢出的方法
- 以前的失效了,最新CSS識別Chrome、Firefox、IE11代碼
- CSS類不起作用？id、類名、標簽選擇器的優(yōu)先分析
- 兩種方法——在input輸入框里放一個搜索小圖標
- 4個實例演示——美化表單input輸入框CSS樣式
- 6款CSS性能檢測、審計(audit)工具
- 4款CSS 3D按鈕點擊過渡效果
- CSS表單輸入框設(shè)計：點擊放大輸入框
- 純CSS實現(xiàn)具有漸變和圓角的彩色邊框
- 10款純CSS Tabs選項卡【實例演示/源碼下載】
- jQuery和CSS3實現(xiàn)有進度條的多步注冊表單
- CSS+SVG：畫圓并且文字寫在圓中間
- CSS實現(xiàn)自右向左的豎向文字排布
- 站長推薦
