HTML5 web Form 的开发实例！

index.html

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>HTML5表单验证</title>

     <link rel="stylesheet" type="text/css" href="../css/style.css">

     <link rel="stylesheet" type="text/css" href="../css/test.css">

     <script type="text/javascript" src="../js/test.js"></script>

 </head>

 <body>

 <div id="content">

     <header>

         <h2>HTML5 Web Form</h2>

     </header>

     <section>

             <form method="post" action="" name="myform" class="form" >

                 <label for="user_name">真实姓名<br/></label>

                 <input id="user_name" type="text" name="user_name" required pattern="^([\u4e00-\u9fa5]+|([a-z]+\s?)+)$" /><br/>

                 <label for="user_item">比赛项目<br/></label>

                 <input list="ball" id="user_item" type="text" name="user_item" required/><br/>

                 <datalist id="ball">

                     <option value="篮球"/>

                     <option value="羽毛球"/>

                     <option value="桌球"/>

                 </datalist>

                 <label for="user_email">电子邮箱<br/></label>

                 <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/>

                 <label for="user_phone">手机号码<br/></label>

                 <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/>

                 <label for="user_id">身份证号</label><br/>

                 <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/>

                 <label for="user_born">出生年月</label><br/>

                 <input id="user_born" type="month" name="user_born" required /></span><br/>

                 <label for="user_rank">名次期望</label>

                 <span>第<em  id="ranknum">5</em>名</span><br/>

                 <input id="user_rank" type="range" name="user_rank" value="5" min="1" max="10" step="1" required /><br/>

                 <button type="submit" name="submit" value="提交表单">提交表单</button>

             </form>

     </section>

     <footer><em>Designed by Wang LeHui.</em></footer>

     </div>

 </body>

 </html>

style.css

 #content{

     margin:0 auto;

     width:350px;

 }

 .form{

     padding: 20px;

     border:1px solid #bbb;

     -moz-border-shadow:0 0 10px #bbb;

     -webkit-border-shadow:0 0 10px #bbb;

     shadow:0 0 10px #bbb;

 }

 label+span{

     color: #FF0000;

 }

 .form input,button{

     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;

     background-color: #fff;

     border:1px solid #ccc;

     font-size: 15px;

     width: 250px;

     min-height: 30px;

     display: block;

     margin-bottom: 5px;

     margin-top: 5px;

     -webkit-border-radius:5px;

     -moz-border-radius:5px;

     border-radius: 5px;

     -webkit-transition:all 0.5s ease-in-out;

     -moz-transition:all 0.5s ease-in-out;

     transition:all 0.5s ease-in-out;

 }

 .form input:focus,button:focus{

     background-color: #fff;

      -moz-border-shadow:0 0 20px #ccc;

     -webkit-border-shadow:0 0 20px #ccc;

     shadow:0 0 20px #ccc;

     -webkit-transform:scale(1.05);

     -moz-transform:scale(1.05);

     transform:scale(1.05);

  }

 button[type=submit]{

     background-color: #fff;

     display: inline-block;

     padding:5px 10px 6px 10px;

     font-weight: bold;

     border:1px solid #888;

     border-radius:5px;

     -moz-border-radius:5px;

     -moz-border-shadow:0 0 3px #888;

     -webkit_box_shadow:0 0 3px #888;

     box-shadow: 0 0 3px #888;

     opacity: 1.0;

 }

 button[type=submit]:hover{

     background-color: #fff;

     opacity: 1.0;

     color:#516527;

     cursor: hand;

     cursor: pointer;

 }

test.css

 .form input:valid{

     background:url("../images/right1.png") no-repeat 210px 1px;

 }

 .form input:focus:invalid{

     background:url("../images/error1.png") no-repeat 210px 0px;

 };

test.js

 var rank;

 var ranknum;

 var user_name;

 var user_item;

 var user_email;

 var email_validityState;

 function load(){

     rank = document.myform.user_rank;

     ranknum = document.getElementById('ranknum');

     rank.addEventListener("change",changerank,false);

     user_name = document.getElementById('user_name');

     user_name.addEventListener("change",checkname,false);

     user_item = document.getElementById("user_item");

     user_item.addEventListener("change",checkitem,false);

 }

 function changerank(){

     ranknum.innerHTML = rank.value;

 }

 function checkname(){

     if (isname(user_name.value)==null) {

         user_name.setCustomValidity("请输入真实的中文名字！");

         user_name.validationMessage;

     }

     else{

         user_name.setCustomValidity("");

     }

 }

 function isname(str){

     var reg = /^[\u4E00-\u9FA5]{2,5}(?:·[\u4E00-\u9FA5]{2,5})*$/;

     return reg.exec(str);

 }

 function checkitem(){

     if(isitem(user_item.value)==null){

         user_item.setCustomValidity("请正确选择比赛项目！");

         user_item.validationMessage;

     }

     else{

         user_item.setCustomValidity("");

     }

 }

 function isitem(str){

     if (!(str=="篮球"||str=="桌球"||str=="羽毛球")) {

         return null;

     }

     else {

         return 0;

     }

 }

 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. Jenkins_多项目构建(二)：使用Maven聚集关系

        一.假设有四个Maven项目 1.soa-dub-parent:父项目 1 2 3 4 5 <modules>         <module>../soa-dub-f ...

  2. 【BZOJ 1857】【SCOI 2010】传送带

    三分套三分,虽然简单,但是也得掌握,,, 时间复杂度$O(log_{1.5}^2 n)$ 一开始WA好几次发现是快速读入里没有return,这样也能过样例?_(:3J∠)_ #include<c ...

  3. 使用kuernetes提供高可用的kibana服务

    在kubernetes集群中部署kibana步骤如下: 1:kibana安装文件(目前最新版本4.5.1): 2:编写Dockerfile及执行点脚本文件run.sh,制作Kibana镜像: 3:推送 ...

  4. mysql-模拟全连接处理

    方案:通过union连接查询出所有需要的特殊标签,然后在通过left join与union中的结果集做多表比较. sql select t.`code`,a.`count` as count_a,b. ...

  5. Java算法-插入排序

    插入排序的基本思想是在遍历数组的过程中,假设在序号 i 之前的元素即 [0..i-1] 都已经排好序,本趟需要找到 i 对应的元素 x 的正确位置 k ,并且在寻找这个位置 k 的过程中逐个将比较过的 ...

  6. 数据库开发基础-SQl Server 变量、运算符、if、while

    变量: SQL语言也跟其他编程语言一样,拥有变量.分支.循环等控制语句. 在SQL语言里面把变量分为局部变量和全局变量,全局变量又称系统变量. 局部变量: 使用declare关键字给变量声明,语法非常 ...

  7. js学习笔记4----数据类型

    1.ECMAScript:标准.核心 JS中的数据类型:数字(NaN).字符串(空隔也会占据长度).布尔值(true和false).函数.对象(obj.[].{}.null).undefined. t ...

  8. SortedMap接口的实现类TreeMap介绍和实现Comparator自定义比较器(转)

    与SortedSet接口类似,SortedMap也是一个结构,待排序的Map,其一个比较常用的实现类是TreeMap. TreeMap的put(K key, V value)方法在每添加一个元素时,都 ...

  9. 【BZOJ-2937】建造酿酒厂 前缀和 + 展环为链 + 乱搞

    2937: [Poi2000]建造酿酒厂 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 70  Solved: 24[Submit][Status][D ...

  10. 大规模图的存储（前向星、next数组）

    大规模图的储存 在信息学中,经常会遇到比较大规模图,使用指针固然是很好的方法,不过一有指针速度不如数组之说,二有指针不如数组稳定之说,三有,也是最重要的,指针不如数组来得方便,这也便是大多数Oier不 ...