1. 首页
  2. PHP教程
  3. Html5实现用户注册自动校验功能实例代码

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

抽时间写了一个带有自动校验功能的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 : {     
  189.                     extension : [ 'jpg' ]     
  190. &
    « 
    » 
PHP教程
PHP简介 PHP基本语法 PHP类型 PHP变量 PHP运算符 PHP控制结构 PHP函数 PHP类与对象 PHP异常处理 函数库分类
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道
Copyright © 2016 phpStudy | 豫ICP备2021030365号-3