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