首页
所有分类
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 相关文章推荐
js判断字符长度以及中英文数字等
Dec 31 Javascript
js style动态设置table高度
Oct 21 Javascript
让html页面不缓存js的实现方法
Oct 31 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
jQuery制作图片旋转效果
Feb 02 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
详解vue渲染函数render的使用
Dec 12 Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 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
开幕词(63) 工作总结(1972) 实用文书(952) 计划(88) 慰问信(53) 汇报材料(247) 导游词(322) 闭幕词(9) 通知(159) 观后感(479)
You might like
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
jQuery的缓存机制浅析
2014/06/07 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
mpvue+vant app搭建微信小程序的方法步骤
2019/02/11 Javascript
layUI实现列表查询功能
2019/07/27 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
es6函数之尾调用优化实例分析
2020/04/25 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
[01:17]Ti4 循环赛第一日回顾
2014/07/11 DOTA
Python简单进程锁代码实例
2015/04/27 Python
Python的面向对象编程方式学习笔记
2016/07/12 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
python time()的实例用法
2020/11/03 Python
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
施华洛世奇德国官网：SWAROVSKI德国
2017/02/01 全球购物
翻新二手苹果产品的网络领导者：Mac of all Trades
2017/12/19 全球购物
超市采购员岗位职责
2014/02/01 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript
redis lua限流算法实现示例
2022/07/15 Redis
MySQL自定义函数及触发器
2022/08/05 MySQL