首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

H5用户注册表单页 注册模态框!

Posted in Javascript onSeptember 17, 2016

本实例为大家分享了H5表单验证新特性，如何用户注册表单页，供大家参考，具体内容如下

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>用户注册表单页</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 标签新特性-->
 <form>
  <!--email属性-->
  邮箱类型<input type="email"/><br/>
  <!--tel属性-->
  电话类型<input type="tel"/><br/>
  <!--number属性-->
  数字类型<input type="number"/><br/>
  <!--date属性-->
  日期类型<input type="date"/><br/>
  <!--month属性-->
  月份类型<input type="month"/><br/>
  <!--week属性-->
  周期类型<input type="week"/><br/>
  <!--range属性-->
  数字范围<input type="range" min="18" max="60"/><br/>
  <!--search属性-->
  搜素类型<input type="search"/><br/>
  <!--color属性-->
  颜色选择器<input type="color"/><br/>
  <!--url属性-->
  网址类型<input type="url"/><br/>
  <input type='submit'/>
 </form>
  <hr/>
 <div id="form_content">
  <form action="">
   <div class="dc"><h3>用户注册页面</h3></div>
   <div class="dc"><b>用户昵称</b><input id="user" type="text" autofocus required pattern="^[0-9a-zA-Z]{6,10}$"/><p class="pc">请输入用户名</p></div>
   <div class="dc"><b>用户密码</b><input id="pwd" type="password" required pattern="^\w{8,12}$"/><p class="pc">请输入密码</p></div>
   <div class="dc"><b>个人邮箱</b><input id="email" type="email" required/><p class="pc">清输入邮箱</p></div>
   <div class="dc"><b>个人主页</b><input id="url" type="url" required/><p class="pc">请输入个人主页(可不填)</p></div>
   <div class="dc"><b>联系电话</b><input id="tel" type="tel" required/><p class="pc">请输入联系电话</p></div>
   <div class="dc"><b>你的年龄</b><input id="age" type="number" min="18" max="60" required/><p class="pc">请输入你的年龄</p></div>
   <div class="dc"><b>出生日期</b><input id="date" type="date" required/><p class="pc">请选择出生日期</p></div>
   <div class="dc"><input id="sub" type="submit" value="提交注册"/></div>
  </form>
 </div>
 <script>
  var uname=document.getElementById('user');
  uname.onfocus=function(){
   this.nextElementSibling.style.display='block';
   this.nextElementSibling.innerHTML='8-12数字或字母组成';
  }
  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位数字/字母/英文符号组成';
  }
  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='请输入你的常用邮箱';
  }
  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='请输入你的个人主页(选填)';
  }
  url.onblur=function(){
   if(this.validity.valid) {
    this.nextElementSibling.className = 'pc show_pass';
    this.nextElementSibling.innerHTML = '网址格式正确';
   }else if(this.validity.typeMismatch){
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='网址格式非法';
   }
  }
  var uphone=document.getElementById('tel');
  uphone.onfocus=function(){
   this.nextElementSibling.style.display='block';
   this.nextElementSibling.innerHTML='请输入你的联系电话';
  }
  uphone.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 uage=document.getElementById('age');
  uage.onfocus=function(){
   this.nextElementSibling.style.diplay='block';
   this.nextElementSibling.innerHTML='请输入你的年龄';
  }
  uage.onblur=function(){
   if(this.validity.valid){
    this.nextElementSibling.className='pc show_pass';
    this.nextElementSibling.innerHTML='你的年龄符合注册要求';
   }else if(this.validity.rangeOverflow){
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='你的年龄大于注册范围';
   }else if(this.validity.rangeUnderflow){
    this.nextElementSibling.className='pc show_warn';
    this.nextElementSibling.innerHTML='你的年龄小于注册范围'
   }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='请输入你的出生日期';
  }
  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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

H5用户注册表单页 注册模态框!

- Author -

li_han

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
extJs 下拉框联动实现代码
Apr 09 Javascript
深入理解JavaScript系列（31）：设计模式之代理模式详解
Mar 03 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
JS设置cookie、读取cookie
Feb 24 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
Sep 14 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 #Javascript
JavaScript职责链模式概述
Sep 17 #Javascript
JavaScript类的写法
Sep 17 #Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 #Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
Sep 17 #Javascript
JavaScript每天必学之数组和对象部分
Sep 17 #Javascript
JavaScript每天必学之基础知识
Sep 17 #Javascript
MutationObserver(1) HBuilder(1) OOP(1) 分布式追踪(1) GPU(1) 条形码(1) tree shaking(1) kubernetes(1) Three.js(1) Express(1)
You might like
php开启与关闭错误提示适用于没有修改php.ini的权限
2014/10/16 PHP
php网页版聊天软件实现代码
2016/08/12 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
前端开发部分总结[兼容性、DOM操作、跨域等]（持续更新）
2010/03/04 Javascript
javascript,jquery闭包概念分析
2010/06/19 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
Vue.js实现备忘录功能
2019/06/26 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
Python中的连接符（+、+=）示例详解
2017/01/13 Python
Python3正则匹配re.split，re.finditer及re.findall函数用法详解
2018/06/11 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
深入浅析Python的类
2018/06/22 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
python3中rank函数的用法
2019/11/27 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
python中shell执行知识点
2020/05/06 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
最新版 Windows10上安装Python 3.8.5的步骤详解
2020/11/28 Python
超越自我演讲稿
2014/05/21 职场文书
县级文明单位申报材料
2014/05/23 职场文书
户籍证明格式
2014/09/15 职场文书
2015大学生求职信范文
2015/03/20 职场文书
小学四年级班务总结该怎么写？
2019/08/16 职场文书
基于Python和openCV实现图像的全景拼接详细步骤
2021/10/05 Python
Android存储中最基本的文件存储方式
2022/04/30 Java/Android