HTML5入门----表单验证及实例
2016-06-03 20:10
435 查看
表单验证
属性
- validity （获得验证对象，管理表单的验证状态）
- valid （表示验证是否通过，属性值为真，则通过；为假，没通过）
约束条件 （用来实现表单验证）
- valueMissing
（值为空，即必填字段，如果未填，值为false；如果填写，值为空）
- typeMismatch
（类型不一致，如，当限定文本框的输入类型为email时，文本框输入内容必须
满足email的格式，否则，值为true）
- patternMismatch
（模式匹配，如，限定输入框的格式要符合正则表达式时，如果不符合，值为true）
- tooLong （超过所能允许的最大范围）
- rangeUnderflow （小于下限）
- rangeOverflow （超过上限）
- stepMismatch （不符合控件的min、max和step特性综合计算的结果）
- customError （用户自定义的错误，一般用在验证两个密码不一致的情况下）
以上元素相关代码
构建HTML表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML5表单实例</title>
<style type="text/css">
body{
width:600px;
height:auto;
margin:0 auto;
}
fieldset{
padding:10px;
margin:20px;
-moz-border-radius:5px;
-wekit-border-radius:5px;
border-radius:5px;
background:#CCC;
}
legend{
padding:10px;
font;#000;
-moz-border-radius:5px;
-wekit-border-radius:5px;
border-radius:5px;
background:red;
}
footer p{
text-align:center;
font-size:12px;
color:#888;
margin-top:24px;
}
</style>
<script type="text/javascript">
function alertValues(){
alert("Customer information:"+"\n "+fullname.value+"\n "+tel.value+"\n "+email.value);
}
function check(id){
var obj = document.getElementById(id).validity;
if(!obj.valid){
document.getElementById(id).style.backgroundColor = 'red';
}
}
</script>
</head>
<body>
<header>
<hgroup>
<h1>HTML5表单实例</h1>
<h2>涉及简化，表现更好</h2>
</hgroup>
</header>
<form id="orderForm" autocomplete="on" action="javascript:alterValues();" method="get">
<fieldset>
<legend>顾客信息</legend>
<p>
<label>姓名：
<input id="fullname" name="name" type="text" placeholder="Enter your name" autofocus required size="50" onblur=""/>
</label>
</p>
<p>
<label>电话：
<input id="tel" name="telephone" type="tel" placeholder="Pattern 1234-567890" required size="50" pattern="([0-9]{3,4}-([0-9]{7,8}))"/>
</label>
</p>
<p>
<label>电子邮件：
<input id="email" name="email" type="email" placeholder="Enter your email address" required size="50" />
</label>
</p>
<p>
<label>日期：<input type="date" />
</label>
</p>
</fieldset>
<fieldset>
<legend>兴趣爱好</legend>
<p>
<label>
<input type="text" name="favorites" list="data"/>
<datalist id="data">
<option value="足球">
<option value="篮球">
<option value="音乐">
<option value="看书">
<option value="看电影">
</datalist>
</label>
</p>
</fieldset>
<fieldset>
<legend>兴趣数值</legend>
<p>
<label>足球：<input name="form_number" id="form_number" type="number" min="1" max="5" /></label>
</p>
<p>
<label>篮球：<input name="form_number" id="form_number" type="number" min="1" max="5" /></label>
</p>
<p>
<label>音乐：<input name="form_number" id="form_number" type="number" min="1" max="5" /></label>
</p>
<p>
<label>看书：<input name="form_number" id="form_number" type="number" min="1" max="5" /></label>
</p>
<p>
<label>看电影：<input name="form_number" id="form_number" type="number" min="1" max="5" /></label>
</p>
</fieldset>
<fieldset>
<legend>上传</legend>
<p>上传图像作为头像</p>
<p>
<label><input type="file" multiple="multiple" /></label>
</p>
</fieldset>
<fieldset>
<input type="image" src="../../9.3图片轮播/images/2.jpg" alt="Submit" width="220" height="220" />
</fieldset>
</form>
<footer>
<p>©2016 All rights reserved.</p>
</footer>
</body>
</html>
显示效果
属性
- validity （获得验证对象，管理表单的验证状态）
- valid （表示验证是否通过，属性值为真，则通过；为假，没通过）
约束条件 （用来实现表单验证）
- valueMissing
（值为空，即必填字段，如果未填，值为false；如果填写，值为空）
- typeMismatch
（类型不一致，如，当限定文本框的输入类型为email时，文本框输入内容必须
满足email的格式，否则，值为true）
- patternMismatch
（模式匹配，如，限定输入框的格式要符合正则表达式时，如果不符合，值为true）
- tooLong （超过所能允许的最大范围）
- rangeUnderflow （小于下限）
- rangeOverflow （超过上限）
- stepMismatch （不符合控件的min、max和step特性综合计算的结果）
- customError （用户自定义的错误，一般用在验证两个密码不一致的情况下）
以上元素相关代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表单</title>
<script type="text/javascript">
function test(){
var val = document.getElementById('myTest').validity;
alert(val.valueMissing+" "+"val.valid")
}
function test2(){
var valCheck = document.getElementById('email').validity;
alert(valCheck.typeMismatch+" "+"valCheck.valid");
}
</script>
</head>
<body>
<form>
<input type="text" id="myTest" required onblur="test()" pattern="[0-9]{8}" />
<input type="email" id="email" onblur="test2()" />
</form>
</body>
</html>构建HTML表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>HTML5表单实例</title>
<style type="text/css">
body{
width:600px;
height:auto;
margin:0 auto;
}
fieldset{
padding:10px;
margin:20px;
-moz-border-radius:5px;
-wekit-border-radius:5px;
border-radius:5px;
background:#CCC;
}
legend{
padding:10px;
font;#000;
-moz-border-radius:5px;
-wekit-border-radius:5px;
border-radius:5px;
background:red;
}
footer p{
text-align:center;
font-size:12px;
color:#888;
margin-top:24px;
}
</style>
<script type="text/javascript">
function alertValues(){
alert("Customer information:"+"\n "+fullname.value+"\n "+tel.value+"\n "+email.value);
}
function check(id){
var obj = document.getElementById(id).validity;
if(!obj.valid){
document.getElementById(id).style.backgroundColor = 'red';
}
}
</script>
</head>
<body>
<header>
<hgroup>
<h1>HTML5表单实例</h1>
<h2>涉及简化，表现更好</h2>
</hgroup>
</header>
<form id="orderForm" autocomplete="on" action="javascript:alterValues();" method="get">
<fieldset>
<legend>顾客信息</legend>
<p>
<label>姓名：
<input id="fullname" name="name" type="text" placeholder="Enter your name" autofocus required size="50" onblur=""/>
</label>
</p>
<p>
<label>电话：
<input id="tel" name="telephone" type="tel" placeholder="Pattern 1234-567890" required size="50" pattern="([0-9]{3,4}-([0-9]{7,8}))"/>
</label>
</p>
<p>
<label>电子邮件：
<input id="email" name="email" type="email" placeholder="Enter your email address" required size="50" />
</label>
</p>
<p>
<label>日期：<input type="date" />
</label>
</p>
</fieldset>
<fieldset>
<legend>兴趣爱好</legend>
<p>
<label>
<input type="text" name="favorites" list="data"/>
<datalist id="data">
<option value="足球">
<option value="篮球">
<option value="音乐">
<option value="看书">
<option value="看电影">
</datalist>
</label>
</p>
</fieldset>
<fieldset>
<legend>兴趣数值</legend>
<p>
<label>足球：<input name="form_number" id="form_number" type="number" min="1" max="5" /></label>
</p>
<p>
<label>篮球：<input name="form_number" id="form_number" type="number" min="1" max="5" /></label>
</p>
<p>
<label>音乐：<input name="form_number" id="form_number" type="number" min="1" max="5" /></label>
</p>
<p>
<label>看书：<input name="form_number" id="form_number" type="number" min="1" max="5" /></label>
</p>
<p>
<label>看电影：<input name="form_number" id="form_number" type="number" min="1" max="5" /></label>
</p>
</fieldset>
<fieldset>
<legend>上传</legend>
<p>上传图像作为头像</p>
<p>
<label><input type="file" multiple="multiple" /></label>
</p>
</fieldset>
<fieldset>
<input type="image" src="../../9.3图片轮播/images/2.jpg" alt="Submit" width="220" height="220" />
</fieldset>
</form>
<footer>
<p>©2016 All rights reserved.</p>
</footer>
</body>
</html>
显示效果
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证（升级版）
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 关于前端的思考与感悟
- 新时代编辑神器：Atom
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 原生js结合html5制作小飞龙的简易跳球
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
- 三个不常见的 HTML5 实用新特性简介
- 低版本IE正常运行HTML5+CSS3网站的3种解决方案
- js+HTML5实现canvas多种颜色渐变效果的方法
- javascript+HTML5的Canvas实现Lab单车动画效果
- javascript+html5实现绘制圆环的方法
- javascript html5实现表单验证
- HTML5实现微信拍摄上传照片功能
- JavaScript+html5 canvas制作的百花齐放效果完整实例