首页
所有分类
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实现仿银行密码输入框效果的代码
Dec 13 Javascript
javascript eval函数深入认识
Feb 21 Javascript
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
JS简单实现多级Select联动菜单效果代码
Sep 06 Javascript
jquery密码强度校验
Dec 02 Javascript
vue2.0全局组件之pdf详解
Jun 26 Javascript
JS实现的简单下拉框联动功能示例
May 11 Javascript
vue2.0 实现导航守卫（路由守卫）
May 21 Javascript
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
JS实现前端动态分页码代码实例
Jun 02 Javascript
javascript中导出与导入实现模块化管理教程
Dec 03 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
limit(1) 事务(5) 内存(1) 性能优化(3) 弱口令(1) 缓存(3) 策略(1) offset(1) 逻辑架构(1) 锁(1)
You might like
PHP的运行机制与原理(底层)
2015/11/16 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
JS实现十字坐标跟随鼠标效果
2017/12/25 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
python生成密码字典的方法
2018/07/06 Python
python批量获取html内body内容的实例
2019/01/02 Python
Python 学习教程之networkx
2019/04/15 Python
python中time库的实例使用方法
2019/10/31 Python
Python实现搜索算法的实例代码
2020/01/02 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
python爬虫请求头的使用
2020/12/01 Python
Nike台湾官方商店：Nike.com (TW)
2017/08/16 全球购物
澳大利亚排名第一的狂热牛仔品牌：ONETEASPOON
2018/11/20 全球购物
大学生的网上创业计划书
2013/12/31 职场文书
大学生职业生涯设计书
2014/01/02 职场文书
市场营销专业自荐书
2014/06/10 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
考试保密承诺书
2014/08/30 职场文书
平遥古城导游词
2015/02/03 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
公司出差管理制度范本
2015/08/05 职场文书
Hive HQL支持2种查询语句风格
2022/06/25 数据库