首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

Html5实现用户注册自动校验功能实例代码

所属分类： 网页制作 / html5 阅读数： 737
收藏 0 赞 0 分享

抽时间写了一个带有自动校验功能的Html5用户注册Demo。使用到Handlebars模板技术和手机验证码校验。

以下是效果截图：

1.页面代码：usersRegister.hbs

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>     
  2. <!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->     
  3. <!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->     
  4. <!--[if (gt IE 9)|!(IE)]><!-->     
  5. <html lang="en">     
  6. <!--<![endif]-->     
  7. <head>     
  8.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     
  9.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />     
  10.     <title>用户注册</title>     
  11.     <!--[if lt IE 9]>     
  12.     <script src="/assets/scripts/html5shiv.js"></script>     
  13.     <![endif]-->     
  14.     <link href="/assets/styles/jquery.idealforms.min.css" rel="stylesheet" media="screen" />     
  15.     <style type="text/css">     
  16.         body {     
  17.             font: normal 15px/1.5 Arial, Helvetica, Free Sans, sans-serif;     
  18.             color: #222;     
  19.             overflow-y: scroll;     
  20.             padding: 60px 0 0 0;     
  21.         }     
  22.         .main {     
  23.             width: 560px;     
  24.             height: 480px;     
  25.             margin: -50px auto;     
  26.         }     
  27.         #my-form {     
  28.             width: 560px;     
  29.             height: 450px;     
  30.             margin: 0 auto;     
  31.             border: 1px solid #ccc;     
  32.             padding: 3em;     
  33.             border-radius: 3px;     
  34.             box-shadow: 0 0 2px rgba(0, 0, 0, .2);     
  35.         }     
  36.     </style>     
  37.     <script type="text/javascript" src="/assets/scripts/jquery-1.8.2.min.js"></script>     
  38.     <script type="text/javascript" src="/assets/scripts/jquery.idealforms.js"></script>     
  39. </head>     
  40. <body>     
  41. <!-- style="background-image: url(static/image/bg.jpg) -->     
  42.     <div class="main" >     
  43.         <div style="height：5px;text-align:center;font-size:25px"> 欢迎您注册！</div>     
  44.         <!-- Begin Form -->     
  45.         <form id="my-form" class="myform">     
  46.             <div>     
  47.                 <label>用户名:</label><input id="username" name="username" type="text" />     
  48.             </div>     
  49.             <div>     
  50.                 <!-- <label>密码:</label><input id="pass" name="password" type="password" /> -->     
  51.                 <label>密码:</label><input id="pass" name="password" type="text" />     
  52.             </div>     
  53.             <div>     
  54.                 <label>邮箱:</label><input id="email" name="email"     
  55.                                          data-ideal="required email" type="email" />     
  56.             </div>     
  57.             <div>     
  58.                 <label>电话:</label><input id="telephone" type="text" name="phone" data-ideal="phone" />     
  59.             </div>     
  60.             <div>     
  61.                 <label>供应商V码:</label><input id="vCode" type="text" name="vCode" data-ideal="vCode" />     
  62.             </div>     
  63.             <div>     
  64.                 <label>真实姓名:</label><input id="trueName" type="text" name="trueName" data-ideal="trueName" />     
  65.             </div>     
  66.             <div>     
  67.                 <label>手机验证码:</label><input id="telCode" type="text" name="telCode" data-ideal="telCode" />     
  68.             </div>     
  69.             <div style="margin-bottom:5px;">     
  70.                 <button id="getTelCode" type="button" style="margin-left:160px; margin-right:auto;" >获取手机校验码</button>     
  71.                 <hr style="margin-top:5px; margin-bottom:5px;" />     
  72.             </div>     
  73.             <!--<div>     
  74.                 <label>性别:</label>     
  75.                 <select id="sex" name="sex">     
  76.                     <option value="男">男</option>     
  77.                     <option value="女">女</option>     
  78.                 </select>     
  79.             </div>     
  80.             <div>     
  81.                 <label>昵称:</label><input id="nickName" type="text" name="nickName" data-ideal="nickName" />     
  82.             </div>     
  83.             <div>     
  84.                 <label>年龄:</label><input id="age" type="text" name="age" data-ideal="age" />     
  85.             </div>-->     
  86.             <!-- <div>     
  87.                 <label>地址:</label><input type="text" name="address" data-ideal="address" />     
  88.             </div>     
  89.             <div>     
  90.                 <label>QQ:</label><input type="text" name="qq" data-ideal="qq" />     
  91.             </div>     
  92.             <div>     
  93.                 <label>邮编:</label><input type="text" name="zip" data-ideal="zip" />     
  94.             </div>     
  95.             <div>     
  96.                 <label>传真:</label><input type="text" name="fax" data-ideal="fax" />     
  97.             </div>     
  98.             <div>     
  99.                 <label>身份证:</label><input type="text" name="creditID" data-ideal="creditID" />     
  100.             </div>     
  101.             <div>     
  102.                 <label>出生日期:</label><input name="date" class="datepicker"     
  103.                     data-ideal="date" type="text" placeholder="月/日/年" />     
  104.             </div>     
  105.             <div>     
  106.                 <label>上传头像:</label><input id="file" name="file" multiple     
  107.                     type="file" />     
  108.             </div>     
  109.             <div>     
  110.                 <label>个人主页:</label><input name="website" data-ideal="url"     
  111.                     type="text" />     
  112.             </div>     
  113.             <div>     
  114.                 <label>备注:</label>     
  115.                 <textarea id="comments" name="comments"></textarea>     
  116.             </div>     
  117.             -->     
  118.             <!-- <div id="languages">     
  119.                 <label>语言:</label> <label><input type="checkbox"     
  120.                     name="langs[]" value="English" />英文</label> <label><input     
  121.                     type="checkbox" name="langs[]" value="Chinese" />中文</label> <label><input     
  122.                     type="checkbox" name="langs[]" value="Spanish" />西班牙文</label> <label><input     
  123.                     type="checkbox" name="langs[]" value="French" />法文</label>     
  124.             </div>     
  125.             <div>     
  126.                 <label>精通几门:</label> <label><input type="radio"     
  127.                     name="radio" checked />1</label> <label><input type="radio"     
  128.                     name="radio" />2</label> <label><input type="radio" name="radio" />3</label>     
  129.                 <label><input type="radio" name="radio" />4</label>     
  130.             </div>     
  131.             <div>     
  132.                 <label>国籍:</label> <select id="states" name="states">     
  133.                     <option value="default">– 选择国籍 –</option>     
  134.                     <option value="AL">阿拉伯</option>     
  135.                     <option value="AK">中国</option>     
  136.                     <option value="AZ">美国</option>     
  137.                     <option value="AR">法国</option>     
  138.                     <option value="CA">英国</option>     
  139.                     <option value="CO">德国</option>     
  140.                     <option value="CT">西班牙</option>     
  141.                     <option value="DE">俄罗斯</option>     
  142.                 </select>     
  143.             </div> -->     
  144.             <div style="margin-top:10px; margin-left:100px;margin-right:100px;">     
  145.                 <button type="button" id="submit" class="submit">提交</button>     
  146.                 <button id="reset" type="button" >重置</button>     
  147.             </div>     
  148.         </form>     
  149.         <!-- End Form -->     
  150.     </div>     
  151. <script type="text/javascript">     
  152.     var options = {     
  153.         onFail : function() {     
  154.             alert($myform.getInvalid().length + ' invalid fields.')     
  155.         },     
  156.         inputs : {     
  157.             'password' : {     
  158.                 filters : 'required pass'     
  159.             },     
  160.             'username' : {     
  161.                 filters : 'required username'     
  162.             },     
  163.             'email' : {     
  164.                 filters : 'required email'     
  165.             },     
  166.             'phone' : {     
  167.                 filters : 'required phone'     
  168.             },     
  169.             'trueName' : {     
  170.                 filters : 'required'     
  171.             },     
  172.             'vCode' : {     
  173.                 filters : 'required'     
  174.             },     
  175.             'telCode' : {     
  176.                 filters : 'required'     
  177.             }     
  178.             /*     
  179.             'age' : {     
  180.                 filters : 'required digits',     
  181.                 data : {     
  182.                    min : 16,     
  183.                    max : 70     
  184.                 }     
  185.             },     
  186.             'file' : {     
  187.                 filters : 'extension',     
  188.                 data : {   &nb
更多精彩内容其他人还在看

突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)

前面已经总结了主要的API扩展(应用缓存/服务端消息/桌面通知),下面的几个只有在特定的场合才能发挥它的潜质，无一例外，IE均不支持,桌面通知目前只有Chrome支持,感兴趣的朋友可以了解下，或许对你有所帮助
收藏 0 赞 0 分享

HTML5之HTML元素扩展(上)—新增加的元素及使用概述

HTML5中加入了全新的结构型元素，例如页眉header，页脚footer，导航nav，内容article，章节section等除了这种整个页面的结构型元素，html5也加入了块级别的语义元素,感兴趣的朋友可以了解下，或许对你有所帮助
收藏 0 赞 0 分享

HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注

在HTML5增强的元素中，最值得关注的就是表单元素;在HTML5中，表单已经做了重大的修整，一些以前需要通过JavaScript编码实现的功能现在无需编码就可轻松实现,感兴趣的朋友可以详细了解下，或许对你有所帮助
收藏 0 赞 0 分享

HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代

WebGL开启了网页3D渲染的新时代，它允许在canvas中直接渲染3D的内容，而不借助任何插件,看到此处是不是感觉特别惊讶啊，WebGL有一个很好的中文教程，就是下面使用参考中的第一个链接，所以这里不再班门弄斧，后面的内容只是简单的总结一下学习的内容,感兴趣的朋友可以了
收藏 0 赞 0 分享

HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍

前面我们看到了使用原生的WebGL API开发是多么的累,只因如此大量的WebGL框架被开发出来，这些框架不同程度的封装了创建3D场景的各种要素你可以快速创建需要的3D场景，感兴趣的朋友可以了解下，或许本文对你有所帮助
收藏 0 赞 0 分享

HTML中fieldset标签概述及使用方法

之前HTML没有好好学，导致以前看到控件组样式感觉很新奇,fieldset> 标签将表单内容的一部分打包，生成一组相关表单的字段,接下来对HTML中fieldset标签的使用进行详细解读，感兴趣的朋友可以了解下，或许对你有所帮助
收藏 0 赞 0 分享

HTML5中微数据概述及在搜索引擎中的使用举例

HTML5微数据规范是标记内容的一种方式，用于描述特定的信息类型，例如评论、人物信息或活动。微数据使用 HTML 标记(常为 span>或 div)中的简单属性为项和属性指定简要的描述性名称
收藏 0 赞 0 分享

html5新增的属性和废除的属性简要概述

HTML5中，在新增加和废除很多元素的同时，也增加和废除了很多属性比如表单相关的属性/链接相关属性是新增的而HTML4中一些属性就被废除掉了，感兴趣的你可以了解下，或许对你学习html5有所帮助
收藏 0 赞 0 分享

html5的新增的标签和废除的标签简要概述

HTML5中在新增加和废除很多标签的同时，也增加和废除了很多标签比如新增的结构标签:section元素/video元素等等，感兴趣的朋友可以了解下，希望本文的知识点对你有所帮助
收藏 0 赞 0 分享

html5配合css3实现带提示文字的输入框(摆脱js)

webkit特有的一个css，可以控制里面的文字样式，配合css3的动画效果和伪类，我们就可以很容易做出一个带动画的输入框，在系统登录、搜索等位置很适合，感兴趣的你可以参考下本文或许可以帮助到你
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22