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. Self Host WebApi服务传输层SSL加密(服务器端+客户端调用)

    接上篇<WebApi服务URI加密及验证的两种方式>,在实际开发中,仅对URI进行加密是不够的,在传输层采用SSL加密也是必须的. 如果服务寄宿于IIS,那对传输层加密非常简单仅需要配置一 ...

  2. iis 发布静态 html 代码

    参考地址: http://jingyan.baidu.com/article/c843ea0b7d0b7177921e4a68.html 操作步骤:1.在当前发布网站中建立虚拟目录 2.点击当前网站 ...

  3. mybatis实战教程(mybatis in action),mybatis入门到精通

    转自:http://www.yihaomen.com/article/java/302.htm (读者注:其实这个应该叫做很基础的入门一下下,如果你看过hibernate了那这个就非常的简单) (再加 ...

  4. python协程和yeild

    python多线程其实在操作系统级别是进程,因为在执行时,默认加了一个全局解释器锁(GIL),python的多线程,本质还是串行的,无法利用多核的优势:在java和C# 中,多线程是并发的,可以充分利 ...

  5. OPRNGL总结(一)OPENGL的理论原理

    1.计算机图形学的发展——走向3D 1.纸带 2.荧光屏,打印出*等等 3.阴极射线管 4实时3D 2.实现“3D”的原理 1.其实现在看到的3D都是伪3D,并不是真正的三维图像,真正的三维图像 真3 ...

  6. 59.Android开源项目及库 (转)

    转载 : https://github.com/Tim9Liu9/TimLiu-Android?hmsr=toutiao.io&utm_medium=toutiao.io&utm_so ...

  7. viewport ---移动端详解

    转自---http://www.cnblogs.com/2050/p/3877280.html 移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上 ...

  8. css-css权威指南学习笔记2

    第二章 选择器 1.在font属性中,只有一种情况下可以使用/来分隔两个特定的关键字,即元素的字体大小/行高. 2.通过把两个类选择器链接在一起,可以选择同时包含这些类名的元素,类名的顺序不限. .w ...

  9. Jenkins企业版与CloudBees

    Jenkins企业版由CloudBess提供! 参考 https://www.cloudbees.com/ http://www.infoq.com/cn/news/2012/01/cloudbees ...

  10. ecshop /includes/init.php Arbitrary User Login Vul

    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 对用户输入的cookie,判断免登的逻辑中存在漏洞,导致黑客可以直接通过 ...