H5用戶注冊(cè)表單頁(yè) 注冊(cè)模態(tài)框!
更新時(shí)間：2016年09月17日 14:12:44 作者：li_han
這篇文章主要為大家詳細(xì)介紹了H5用戶注冊(cè)表單頁(yè)的相關(guān)代碼，注冊(cè)模態(tài)框，如何設(shè)計(jì)用戶注冊(cè)表單頁(yè)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本實(shí)例為大家分享了H5表單驗(yàn)證新特性，如何用戶注冊(cè)表單頁(yè)，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>用戶注冊(cè)表單頁(yè)</title>
<style>
#form_content{
width:600px;
margin:0 auto;
position:absolute;
left:400px;
}
#form_content .dc{
width:600px;
margin-top:10px;
overflow:hidden;
}
#form_content .dc h3{
text-align:center;
}
#form_content b{
display:inline-block;
height:40px;
line-height: 40px;
margin-left:20px;
}
#form_content input{
display:inline-block;
height:34px;
width:200px;
border-radius:2px;
margin-left:60px;
padding-left:10px;
}
.pc{
width:200px;
height:40px;
float:right;
line-height:40px;
text-align:center;
margin:0 20px 0;
background:#333;
color:#fff;
font-weight:bold;
border-radius:8px;
display:none;
}
input#sub{
display:inline-block;
width:215px;
background:#f0f;
margin-left:144px;
}
.show_pass{
background:limegreen;
display:block;
}
.show_warn{
background:#e4393c;
display:block;
}
#audio_bground{
width:100%;
height:100%;
background:#afa;
position:absolute;
z-index:-10;
}
</style>
</head>
<body>
<!--input 標(biāo)簽新特性-->
<form>
<!--email屬性-->
郵箱類型<input type="email"/><br/>
<!--tel屬性-->
電話類型<input type="tel"/><br/>
<!--number屬性-->
數(shù)字類型<input type="number"/><br/>
<!--date屬性-->
日期類型<input type="date"/><br/>
<!--month屬性-->
月份類型<input type="month"/><br/>
<!--week屬性-->
周期類型<input type="week"/><br/>
<!--range屬性-->
數(shù)字范圍<input type="range" min="18" max="60"/><br/>
<!--search屬性-->
搜素類型<input type="search"/><br/>
<!--color屬性-->
顏色選擇器<input type="color"/><br/>
<!--url屬性-->
網(wǎng)址類型<input type="url"/><br/>
<input type='submit'/>
</form>
<hr/>
<div id="form_content">
<form action="">
<div class="dc"><h3>用戶注冊(cè)頁(yè)面</h3></div>
<div class="dc"><b>用戶昵稱</b><input id="user" type="text" autofocus required pattern="^[0-9a-zA-Z]{6,10}$"/><p class="pc">請(qǐng)輸入用戶名</p></div>
<div class="dc"><b>用戶密碼</b><input id="pwd" type="password" required pattern="^\w{8,12}$"/><p class="pc">請(qǐng)輸入密碼</p></div>
<div class="dc"><b>個(gè)人郵箱</b><input id="email" type="email" required/><p class="pc">清輸入郵箱</p></div>
<div class="dc"><b>個(gè)人主頁(yè)</b><input id="url" type="url" required/><p class="pc">請(qǐng)輸入個(gè)人主頁(yè)(可不填)</p></div>
<div class="dc"><b>聯(lián)系電話</b><input id="tel" type="tel" required/><p class="pc">請(qǐng)輸入聯(lián)系電話</p></div>
<div class="dc"><b>你的年齡</b><input id="age" type="number" min="18" max="60" required/><p class="pc">請(qǐng)輸入你的年齡</p></div>
<div class="dc"><b>出生日期</b><input id="date" type="date" required/><p class="pc">請(qǐng)選擇出生日期</p></div>
<div class="dc"><input id="sub" type="submit" value="提交注冊(cè)"/></div>
</form>
</div>
<script>
var uname=document.getElementById('user');
uname.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='8-12數(shù)字或字母組成';
}
uname.onblur=function(){
if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='用戶名格式正確';
}
else if(this.validity.valueMissing) {
this.nextElementSibling.className = 'pc show_warn';
this.nextElementSibling.innerHTML = '用戶名不能為空';
}else if(this.validity.patternMismatch){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='用戶名格式非法';
}
}
var upwd=document.getElementById('pwd');
upwd.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='6-12位數(shù)字/字母/英文符號(hào)組成';
}
upwd.onblur=function(){
if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='密碼格式正確';
}else if(this.validity.valueMissing){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='用戶密碼不能為空';
}else if(this.validity.patternMismatch){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='密碼格式非法';
}
}
var e_mail=document.getElementById('email');
e_mail.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='請(qǐng)輸入你的常用郵箱';
}
e_mail.onblur=function(){
if(this.validity.valid) {
this.nextElementSibling.className = 'pc show_pass';
this.nextElementSibling.innerHTML = '郵箱格式正確';
}else if(this.validity.valueMissing){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='郵箱不能為空';
}else if(this.validity.typeMismatch){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='郵箱格式有誤';
}
}
var url=document.getElementById('url');
url.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='請(qǐng)輸入你的個(gè)人主頁(yè)(選填)';
}
url.onblur=function(){
if(this.validity.valid) {
this.nextElementSibling.className = 'pc show_pass';
this.nextElementSibling.innerHTML = '網(wǎng)址格式正確';
}else if(this.validity.typeMismatch){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='網(wǎng)址格式非法';
}
}
var uphone=document.getElementById('tel');
uphone.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='請(qǐng)輸入你的聯(lián)系電話';
}
uphone.onblur=function(){
if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='電話號(hào)碼格式正確';
}else if(this.validity.valueMissing){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='電話號(hào)碼不能外空';
}else if(this.validity.typeMismatch){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='電話號(hào)碼格式非法';
}
}
var uage=document.getElementById('age');
uage.onfocus=function(){
this.nextElementSibling.style.diplay='block';
this.nextElementSibling.innerHTML='請(qǐng)輸入你的年齡';
}
uage.onblur=function(){
if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='你的年齡符合注冊(cè)要求';
}else if(this.validity.rangeOverflow){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='你的年齡大于注冊(cè)范圍';
}else if(this.validity.rangeUnderflow){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='你的年齡小于注冊(cè)范圍'
}else if(this.validity.valueMissing){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='年齡不能為空';
}
}
var udate=document.getElementById('date');
udate.onfocus=function(){
this.nextElementSibling.style.display='block';
this.nextElementSibling.innerHTML='請(qǐng)輸入你的出生日期';
}
udate.onblur=function(){
if(this.validity.valueMissing){
this.nextElementSibling.className='pc show_warn';
this.nextElementSibling.innerHTML='出生日期不能為空';
}else if(this.validity.valid){
this.nextElementSibling.className='pc show_pass';
this.nextElementSibling.innerHTML='已選擇出生日期';
}
}
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaWeb實(shí)現(xiàn)用戶登錄注冊(cè)功能實(shí)例代碼(基于Servlet+JSP+JavaBean模式)
- JSP實(shí)現(xiàn)用戶登錄、注冊(cè)和退出功能
- mvc C# JavaScript LigerUI oracle實(shí)現(xiàn)用戶的注冊(cè)、登陸驗(yàn)證、登陸
- jsp基于XML實(shí)現(xiàn)用戶登錄與注冊(cè)的實(shí)例解析（附源碼）
- js實(shí)現(xiàn)用戶注冊(cè)協(xié)議倒計(jì)時(shí)的方法
- js簡(jiǎn)單實(shí)現(xiàn)用戶注冊(cè)信息的校驗(yàn)代碼
- php用戶注冊(cè)頁(yè)面利用js進(jìn)行表單驗(yàn)證具體實(shí)例
- javascript用戶注冊(cè)提示效果的簡(jiǎn)單實(shí)例
- 用戶注冊(cè)常用javascript代碼
- 用于判斷用戶注冊(cè)時(shí)，密碼強(qiáng)度的JS代碼
相關(guān)文章
本文給大家匯總介紹了javascript格式化日期時(shí)間的幾種常用方法，個(gè)人對(duì)最后一種個(gè)性化輸出時(shí)間比較有興趣，基本上只要項(xiàng)目中能用到都是使用這種，推薦給小伙伴們。2015-10-10
這篇文章主要介紹了JavaScript中BOM對(duì)象原理與用法,,結(jié)合實(shí)例形式分析了javascript中BOM瀏覽器對(duì)象模型相關(guān)概念、原理、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-07-07
javascript動(dòng)畫效果類封裝代碼...2007-08-08
把項(xiàng)目里很土的彈窗，改成了遮罩層顯示，現(xiàn)在感覺(jué)好多了。在這里創(chuàng)建一個(gè)div和body一樣大小，這樣就可以把整個(gè)頁(yè)面全部蓋住了，具體實(shí)現(xiàn)祥看本文，希望可以幫助到你2013-05-05
JavaScript實(shí)現(xiàn)動(dòng)態(tài)數(shù)字時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)數(shù)字時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
JavaScript中的字符串與數(shù)字轉(zhuǎn)換的示例
在JavaScript編程中,掌握字符串與數(shù)字的轉(zhuǎn)換技巧對(duì)處理用戶輸入、數(shù)據(jù)計(jì)算及格式化輸出至關(guān)重要,本文詳細(xì)介紹了多種轉(zhuǎn)換方法,下面就一起來(lái)介紹一下2024-09-09
使用Javascript判斷瀏覽器終端設(shè)備(PC、IOS(iphone)、Android)
WEB開發(fā)中如何通過(guò)Javascript來(lái)判斷終端為PC、IOS(iphone)、Android呢?可以通過(guò)判斷瀏覽器的userAgent，用正則來(lái)判斷手機(jī)是否是ios和Android客戶端,下面通過(guò)本文學(xué)習(xí)下吧2017-01-01
非常不錯(cuò)的效果，適合在當(dāng)前頁(yè)打開測(cè)試窗口，圖片等2008-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖形驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
js 數(shù)組倒序排列的具體實(shí)現(xiàn)
有時(shí)候需要將數(shù)組類型變量?jī)?nèi)的元素顛倒一下順序再輸出,本文就詳細(xì)的介紹一下,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08