HTML5 web Form 的开发实例！

index.html

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <title>HTML5表单验证</title>
  6.      <link rel="stylesheet" type="text/css" href="../css/style.css">
  7.      <link rel="stylesheet" type="text/css" href="../css/test.css">
  8.      <script type="text/javascript" src="../js/test.js"></script>
  9.  </head>
  10.  <body>
  11.  <div id="content">
  12.      <header>
  13.          <h2>HTML5 Web Form</h2>
  14.      </header>
  15.      <section>
  16.              <form method="post" action="" name="myform" class="form" >
  17.                  <label for="user_name">真实姓名<br/></label>
  18.                  <input id="user_name" type="text" name="user_name" required pattern="^([\u4e00-\u9fa5]+|([a-z]+\s?)+)$" /><br/>
  19.  
  20.                  <label for="user_item">比赛项目<br/></label>
  21.                  <input list="ball" id="user_item" type="text" name="user_item" required/><br/>
  22.                  <datalist id="ball">
  23.                      <option value="篮球"/>
  24.                      <option value="羽毛球"/>
  25.                      <option value="桌球"/>
  26.                  </datalist>
  27.  
  28.                  <label for="user_email">电子邮箱<br/></label>
  29.                  <input id="user_email" type="email" name="user_email" pattern="^[0-9a-z][a-z0-9\._-]{1,}@[a-z0-9-]{1,}[a-z0-9]\.[a-z\.]{1,}[a-z]$"  required /><br/>
  30.  
  31.                  <label for="user_phone">手机号码<br/></label>
  32.                  <input id="user_phone" type="telephone" name="user_phone" pattern="^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$" required/><br/>
  33.  
  34.                  <label for="user_id">身份证号</label><br/>
  35.                  <input id="user_id" type="text" name="user_id" required pattern="^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$" /><br/>
  36.  
  37.                  <label for="user_born">出生年月</label><br/>
  38.                  <input id="user_born" type="month" name="user_born" required /></span><br/>
  39.  
  40.                  <label for="user_rank">名次期望</label>
  41.                  <span>第<em  id="ranknum">5</em>名</span><br/>
  42.                  <input id="user_rank" type="range" name="user_rank" value="5" min="1" max="10" step="1" required /><br/>
  43.  
  44.                  <button type="submit" name="submit" value="提交表单">提交表单</button>
  45.              </form>
  46.      </section>
  47.      <footer><em>Designed by Wang LeHui.</em></footer>
  48.      </div>
  49.  </body>
  50.  </html>

style.css

  1.  #content{
  2.      margin:0 auto;
  3.      width:350px;
  4.  }
  5.  .form{
  6.      padding: 20px;
  7.      border:1px solid #bbb;
  8.      -moz-border-shadow:0 0 10px #bbb;
  9.      -webkit-border-shadow:0 0 10px #bbb;
  10.      shadow:0 0 10px #bbb;
  11.  }
  12.  label+span{
  13.      color: #FF0000;
  14.  }
  15.  .form input,button{
  16.      font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  17.      background-color: #fff;
  18.      border:1px solid #ccc;
  19.      font-size: 15px;
  20.      width: 250px;
  21.      min-height: 30px;
  22.      display: block;
  23.      margin-bottom: 5px;
  24.      margin-top: 5px;
  25.      -webkit-border-radius:5px;
  26.      -moz-border-radius:5px;
  27.      border-radius: 5px;
  28.      -webkit-transition:all 0.5s ease-in-out;
  29.      -moz-transition:all 0.5s ease-in-out;
  30.      transition:all 0.5s ease-in-out;
  31.  }
  32.  .form input:focus,button:focus{
  33.      background-color: #fff;
  34.       -moz-border-shadow:0 0 20px #ccc;
  35.      -webkit-border-shadow:0 0 20px #ccc;
  36.      shadow:0 0 20px #ccc;
  37.      -webkit-transform:scale(1.05);
  38.      -moz-transform:scale(1.05);
  39.      transform:scale(1.05);
  40.   }
  41.  button[type=submit]{
  42.      background-color: #fff;
  43.      display: inline-block;
  44.      padding:5px 10px 6px 10px;
  45.      font-weight: bold;
  46.      border:1px solid #888;
  47.      border-radius:5px;
  48.      -moz-border-radius:5px;
  49.      -moz-border-shadow:0 0 3px #888;
  50.      -webkit_box_shadow:0 0 3px #888;
  51.      box-shadow: 0 0 3px #888;
  52.      opacity: 1.0;
  53.  }
  54.  button[type=submit]:hover{
  55.      background-color: #fff;
  56.      opacity: 1.0;
  57.      color:#516527;
  58.      cursor: hand;
  59.      cursor: pointer;
  60.  }

test.css

  1.  .form input:valid{
  2.      background:url("../images/right1.png") no-repeat 210px 1px;
  3.  }
  4.  
  5.  .form input:focus:invalid{
  6.      background:url("../images/error1.png") no-repeat 210px 0px;
  7.  };

test.js

  1.  var rank;
  2.  var ranknum;
  3.  var user_name;
  4.  var user_item;
  5.  var user_email;
  6.  var email_validityState;
  7.  
  8.  function load(){
  9.      rank = document.myform.user_rank;
  10.      ranknum = document.getElementById('ranknum');
  11.      rank.addEventListener("change",changerank,false);
  12.  
  13.      user_name = document.getElementById('user_name');
  14.      user_name.addEventListener("change",checkname,false);
  15.  
  16.      user_item = document.getElementById("user_item");
  17.      user_item.addEventListener("change",checkitem,false);
  18.  }
  19.  function changerank(){
  20.      ranknum.innerHTML = rank.value;
  21.  }
  22.  function checkname(){
  23.      if (isname(user_name.value)==null) {
  24.          user_name.setCustomValidity("请输入真实的中文名字！");
  25.          user_name.validationMessage;
  26.      }
  27.      else{
  28.          user_name.setCustomValidity("");
  29.      }
  30.  }
  31.  function isname(str){
  32.      var reg = /^[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*$/;
  33.      return reg.exec(str);
  34.  }
  35.  
  36.  function checkitem(){
  37.      if(isitem(user_item.value)==null){
  38.          user_item.setCustomValidity("请正确选择比赛项目！");
  39.          user_item.validationMessage;
  40.      }
  41.      else{
  42.          user_item.setCustomValidity("");
  43.      }
  44.  }
  45.  function isitem(str){
  46.      if (!(str=="篮球"||str=="桌球"||str=="羽毛球")) {
  47.          return null;
  48.      }
  49.      else {
  50.          return 0;
  51.      }
  52.  }
  53.  window.addEventListener("load",load,false);

HTML5 web Form表单验证实例的更多相关文章

  1. Django（5） session登录注销、csrf及中间件自定义、django Form表单验证（非常好用）

    一.Django中默认支持Session,其内部提供了5种类型的Session供开发者使用: 数据库(默认) 缓存 文件 缓存+数据库 加密cookie 1.数据库Session 1 2 3 4 5 ...

  2. web框架-（六）Django补充---form表单验证

    一.form表单验证 1. 常规html页面的form表单验证 常规页面中,如果想实现对表单中用户输入信息的数据验证,需要配合Ajax来实现. 使用前我们先来熟悉下函数参数:request,其中包含的 ...

  3. python26:自定义form表单验证

    一.自定义Form的原理 1.1 各种form表单验证比较 只有python提供了form表单验证,其他的都没有提供.django提供的功能还不够强大.最强大的是微软的ASP.NET!我们可以自己写一 ...

  4. python_way day19 HTML-day5 （form表单验证，CSRF,cookie，session,缓存）

    python-way day19 1. dJango的form表单验证 2.CSRF 跨站请求伪造 3.cookie,session 4.缓存 一,django表单验证功能 1.django验证基础: ...

  5. [php基础]PHP Form表单验证:PHP form validator使用说明

    在PHP网站开发建设中,用户注册.留言是必不可少的功能,用户提交的信息数据都是通过Form表单提交,为了保证数据的完整性.安全性,PHP Form表单验证是过滤数据的首要环节,PHP对表单提交数据的验 ...

  6. Bootstrap+PHP表单验证实例

    简单实用的Bootstrap+PHP表单验证实例,非常适合初学者及js不熟悉者,还有ajax远程验证 js验证表单 1 $(document).ready(function() { 2 $('#def ...

  7. jQuery-easyui和validate表单验证实例

    jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...

  8. 抽屉之Tornado实战（7）--form表单验证

    在这里,我们把form表单验证的代码进行工具化了,以后稍微修改一下参数就可以拿来用了 先贴上代码 forms.py from backend.form import fields class Base ...

  9. ASP.NET MVC Form表单验证与Authorize特性

    一.Form表单验证 1.基本概念 表单验证是一个基于票据(ticket-based)[也称为基于令牌(token-based)]的系统.当用户登录系统以后,会得到一个包含基于用户信息的票据(tick ...

随机推荐

  1. ES6新特性：Javascript中Set和WeakSet类型的数据结构

    ES6提供了新的数据结构Set,Set对象不是数组, 可以用来保存对象或者基本类型, 所有保存的值都是唯一的, chrome浏览器>38和FF>13,以及nodeJS,对Set支持良好, ...

  2. 管理系统UI: System Bar 详解

    Google原文: http://developer.android.com/training/system-ui/index.html 管理系统UI之一:淡化System Bar(Dimming t ...

  3. MVVM: 通过 Binding 或 x:Bind 结合 Command 实现，通过非 ButtonBase 触发命令

    介绍背水一战 Windows 10 之 MVVM(Model-View-ViewModel) 通过 Binding 或 x:Bind 结合 Command 实现,通过非 ButtonBase 触发命令 ...

  4. 如何更改IP地址的映射名字

    windows系统下: 在C:\Windows\System32\drivers\etc\hosts里面添加你想对应的域名 如192.168.230.134 weekend110 注意:这要有管理员权 ...

  5. Hive 按某列的部分排序 以及 删列操作

    脑袋果然还是智商不足. 涉及到的小需求: 某个表test 有一列 tc: a字符串+b字符串+c字符串 拼接组成 把test表,按b字符串排序 输出 遇到的问题: select 里面必须包含 orde ...

  6. FastCopy包含和排除文件夹处理

    包含和排除文件夹操作: 1.有多个时,用[;]进行分割. 2.可指定文件夹深度,也可以不用指定,直接最终名称. 3.不用指定盘符. 4.名称后面带上反斜杠[\]. 假如有两个文件夹:F:\A,F:\B ...

  7. IIS如何设置可以让.aspx后缀的文件直接下载

    修改配置文件:<system.webServer> <staticContent> <remove fileExtension=".aspx" /&g ...

  8. 虚拟机软件bochs编译使用问题

    bochs是一款具有调试功能的虚拟机软件,由C++编写,可用于调试操作系统.从ubuntu软件源中下载的很可能没有调试功能,需要先下载源码,可能比编译之后的可执行文件大的多. 编译时有很多选项,可以通 ...

  9. hdu 5269 trie树

    现场想到了lowbit(X xor Y)=X和Y从右向左数,对应相同的数的个数+1...然而并没有想到接下来用trie树 然后就想排个序试试...然后就整个人都不好了啊摔 sol:用trie,一边in ...

  10. android.content.SharedPreferences.edit()

    今天在实现一个保存用户设置到SharedPreferences时,出现了一个不能将数据保存到SharedPreferences中的情况.经过仔细的分析得出: android.content.Share ...