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

前端技术 2023/09/06 HTML

抽时间写了一个带有自动校验功能的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. &

本文地址：https://www.stayed.cn/item/17579

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案