html5 表单样式 表单验证1 2 3
html5 表单样式 ie9以下不支持
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
ie 9 不支持 html智能表单form
<hr/>
<input type="text" list="mydata" autofocus placeholder="请输入电影名称">
<!--autofocus 自动获得焦点-->
<!--placeholder 点击input内容消失-->
<!--required 必填-->
<datalist id="mydata">
<option label="搜索10000次" value="让子弹飞">
<option label="搜索9000次" value="非诚勿扰">
<option label="搜索8000次" value="大笑江湖">
<option label="搜索7000次" value="赵氏孤儿">
<option label="搜索6000次" value="花千骨">
</datalist>
<br/><br/><br/><br/><br/>
<form action="" method="get" name="res" >
邮件<input type="email"/><br/>
网址<input type="url" ><br/> <!--必填 -->
日期<input type="date"/><br/>
月份<input type="month">
电话<input type="tel"> 在手机端才有数字键盘效果<br/>
<!--时间 time datetime
数字 number-->
进度条 <input type="range" min="0" max="3" step="1"/><br/>
搜索 <input type="search" value="搜索"><br/>
颜色<input type="color"/><br/>
数字<input type="number" min="0" max="100" step="1"/><br/>
时间日期<input type="datetime"/>
正则<input type="text" pattern="[789]+" required/> <input type="submit" value="sub"/> </form>
对本网站的评价:<input type="text" name="txtComment" value="Very Good!" form="res" />
</body>
</body>
</html>
表单验证1
表单提交时激发 添加默认验证消息 //txtName.setCustomValidity
checkValidity()实现实时验证
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
</head>
<body>
<form method="get">
<input required type="text" id="name" name="name" >
<span id="tip">*</span><br>
<input type="submit" value="submit">
</form>
<script>
function $(id){
return document.getElementById(id);
}
$("name").addEventListener("blur",blurCheck,false);
function blurCheck(){
/* var value=$("name").value;
if(value.length==0){
// 改变默认提示
$("name").setCustomValidity("用户名不能为空");
}else{
//清空自定义验证，让文本提交
$("name").setCustomValidity("");
}*/
//实时验证
var res=$("name").checkValidity();
if(res){
$("tip").innerHTML="通过";
}else{
$("tip").innerHTML="用户名称不能为空";
}
}
</script>
</body>
</html>
表单验证二
invalid 错误时激发
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title></title>
<script>
function $(id){
return document.getElementById(id);
} function initial(){
document.frmLogin.addEventListener("invalid",frmLogin_invalid,true);
} //表单执行遇到错误时激发的事件
function frmLogin_invalid(e){
//获取产生错误的元素
var tar = e.target;
tar.style.backgroundColor="red";
var tipId = tar.id + "Tip";
$(tipId).innerHTML="请输入正确数据";
}
window.addEventListener("load",initial,false);
</script>
</head> <body>
<form name="frmLogin">
用户名称:<input type="text" id="txtName" required />
<span id="txtNameTip"></span><br />
用户Email:<input type="email" id="txtEmail" />
<span id="txtEmailTip"></span><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
表单验证三
实时验证 validity.patternMismatch
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title></title>
<script>
function $(id){
return document.getElementById(id);
} function initial(){
txtName=$("txtName");
txtEmail=$("txtEmail");
txtPhone=$("txtPhone"); //绑定事件
txtName.addEventListener("blur",txtName_blur,false);
txtEmail.addEventListener("blur",txtEmail_blur,false);
txtPhone.addEventListener("blur",txtPhone_blur,false);
} function txtPhone_blur(){
if(txtPhone.validity.patternMismatch){
$("txtPhoneTip").innerHTML="电话号码格式不正确";
} else{
$("txtPhoneTip").innerHTML="通过";
}
} function txtEmail_blur(e){
//验证格式是否正确
if(txtEmail.validity.typeMismatch){
$("txtEmailTip").innerHTML="Email格式不正确，请重新输入";
} else {
$("txtEmailTip").innerHTML="通过";
}
} function txtName_blur(e){
// 判断txtName是否通过了所有的验证
//1、checkValidity
//2、通过validity属性的valid状态
var ret = txtName.validity.valid;
if(ret){
$("txtNameTip").innerHTML="通过";
}else{
if(txtName.validity.valueMissing){
//数据为空,有required,但是没有输入值
$("txtNameTip").innerHTML="请输入您的姓名";
}
}
} window.addEventListener("load",initial,false);
</script>
</head> <body>
<form name="frmLogin">
用户名称:<input type="text" id="txtName" required />
<span id="txtNameTip"></span><br />
用户Email:<input type="email" id="txtEmail" />
<span id="txtEmailTip"></span><br />
移动电话:<input type="phone" id="txtPhone" pattern="^1[3,5,4,8,7]\d{9}$" />
<span id="txtPhoneTip"></span><br />
<input type="submit" value="提交" />
</form>
</body>
</html>
1)、valid
验证元素是否通过所有验证
2)、valueMissing
与required属性相关联，设置了required属性，但是没有赋值，该属性为true
3)、typeMismatch
与type属性相关联,如果输入的数据违反了type类型定义的格式，该属性为true
4)、patternMismatch
与patter属性相关联,如果输入的数据违反了patter属性定义的格式，该属性为true
5)、customError
与setCustomValidity()方法相关的，如果用户设置了setCustomValidity()并且没有清空，该值为true
html5 表单样式 表单验证1 2 3的更多相关文章
- [HTML/HTML5]2 CSS样式表设置
2.1 在HTML文件中设置样式表 当前HTML"规则"指出:HTML仅用于标识页面的内容,应该使用样式表来定义内容的呈现样式.这不仅使Web页面对于所有用户(无论采用什么浏览器 ...
- 9月9日HTML上午表单元素2（框架、样式表）
五.框架 1.frameset是双标签框架集,如果使用框架集,当前页面不能有body. frameset属性:①cols代表左右拆分.cols=“300,*”表示左边框架宽300,右边宽剩余的宽度.* ...
- WEB入门 四 CSS样式表深入
学习内容 Ø CSS选择器深入学习 Ø CSS继承 Ø CSS文本效果 Ø CSS图片效果 能力目标 Ø 掌握CSS选择器的组合声 ...
- CSS样式表的书写位置
行内式(内联样式) 是通过标签的style属性来设置元素的样式,其基本语法格式如下: <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"&g ...
- css002 创建样式和样式表
创建样式和样式表 一个样式表包含多个样式 样式表的种类 1.内部样式表,存放在<head></head>之间.如: <head> <style> ( ...
- HTML基础（三）——css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- 一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- CSS样式表 选择器
1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...
- CCS样式表
一.css样式表 1.样式表分类 1.内联式 <p style="font-size:18px;">This is an apple</p> 2.内嵌样式表 ...
随机推荐
- ios 关键字 IB_DESIGNABLE IBInspectable 尝鲜
每次都用代码定义一个属性,然后在viewDidLoad中再去设置这个属性,最常见的就是什么圆角,描边的, 现在终于可以直接像系统的属性一样在界面上设定了 界面上修改你的属性,减少代码压力
- ALTER 语句修改数据表
1.修改数据表名:alter table 表名 rename 新表名; 2.修改列名: alter table 表名 change 列名 新列名(可以与旧的一样) 类型 默认值; 3.修改类型: al ...
- ssh事务配置
<!-- 配置业务层 --> <bean id="employeeService" class="cn.bdqn.jboa.service.impl.E ...
- WPF 屏蔽Alt+F4强制退出
if (e.KeyStates == Keyboard.GetKeyStates(Key.F4) && Keyboard.Modifiers == ModifierKeys.Alt) ...
- Hibernate3的DetachedCriteria支持
Hibernate3支持DetachedCriteria,这是一个非常有意义的特性!我们知道,在常规的Web编程中,有大量的动态条件查询,即用户在网页上面自由选择某些条件,程序根据用户的选择条件,动态 ...
- app内嵌web的一些问题记录
问题(1)webview里面出现大图预览,点击手机上的返回,应该是图片预览消失 问题(2)键盘输入的时候,键盘会把输入框遮挡 ------------------------------------- ...
- C# Window Service详解
Windows Service这一块并不复杂,但是注意事项太多了,网上资料也很凌乱,偶尔自己写也会丢三落四的.所以本文也就产生了,本文不会写复杂的东西,完全以基础应用的需求来写,所以不会对Window ...
- NGUI无限滑动
http://www.unity蛮牛.com/blog-9383-1391.html 最近由于工作需要,就开始研究NGUI滑动.刚开始参考NGUI自带的循环滑动,利用隐藏和显示,提高GPU的渲染,但是 ...
- 在rails下新建表
(文章都是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) 今天需要新建表,以下是建表语句 rails generate scaffold users ema ...
- HDOJ 1690
Bus System Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...