首页
所有分类
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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
利用Angularjs实现幻灯片效果
Sep 07 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
在vue 中使用 less的教程详解
Sep 26 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
用vue写一个日历
Nov 02 Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 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
scrapy(1) Quartz(1) dataBinding(1) Postman(1) 反射(1) DeOldify(1) virtualenv(1) 注解(1) BottomSheetDialog(1) ip2region(1)
You might like
PHP概述.
2006/10/09 PHP
我的论坛源代码(七)
2006/10/09 PHP
php操作excel文件 基于phpexcel
2010/07/02 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
新手入门常用代码集锦
2007/01/11 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
JavaScript原生数组Array常用方法
2017/04/06 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
angularjs 动态从后台获取下拉框的值方法
2018/08/13 Javascript
vue组件开发props验证的实现
2019/02/12 Javascript
移动端（微信等使用vConsole调试console的方法
2019/03/05 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
python使用calendar输出指定年份全年日历的方法
2015/04/04 Python
python使用PyQt5的简单方法
2019/02/27 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
查看Python依赖包及其版本号信息的方法
2019/08/13 Python
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
什么是跨站脚本攻击
2014/12/11 面试题
社区活动邀请函范文
2014/01/29 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
清明节寄语2015
2015/03/23 职场文书
高考百日冲刺决心书
2015/09/23 职场文书
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL