html第九节课
2016-03-29 15:19
387 查看
正则表达式和marquee
1、表单验证<form></form>
(1).非空验证（去空格）
(2).对比验证（跟一个值对比）
(3).范围验证（根据一个范围进行判断）
(4).固定格式验证：电话号码，身份证号，邮箱，信用卡号等的验证；需要用到正则表达式来进行验证。
(5).其它验证
2、正则表达式
用符号来描述书写规则:/ 中间写正则表达式 /
^ ：匹配开头，$：匹配结尾 ； /^ve/以ve开头的 /ve$/以ve结尾
\d：一个任意的数字
\w：一个任意的数字或字母
\s：任意的字符串
{n}：把左边的表达式重复n遍
{m,n}：把左边的表达式重复至少m遍，至多n遍
{m, }：把左边的表达式重复至少m遍，,至多不限
+：左边的表达式，至少出现一次，至多不限，相当于{1，}
*：左边的表达式，至少出现0次，至多不限，相当于{0，}
?：左边的表达式，至少出现0次，至多出现1次，相当于{0，1}
[a,b,c]：只能取方括号中内容之一
[a-z]或[1-9]：在范围中取其一
|：代表或者； （）：优先级； \：转义--“\( \)”这个才是要出现的小括号，需要转义
3、事件
事件有三要素：事件源、事件数据、事件处理程序
事件冒泡：当元素嵌套的时候，内部元素激发某个事件后，默认情况下外部元素相应的事件也会跟着依次触发
可以加return false;是阻止默认操作
onclick: 鼠标单击触发
ondblclick: 双击触发
onmouseover: 鼠标移动上面触发
onmouseout: 鼠标离开时触发
onmousemove: 鼠标在上面移动时触发
onchange: 只要内容改变触发
onblur: 失去焦点时触发
onfocus: 获得焦点时触发
onkeydown: 按键按下的时候触发
onkeyup：按键抬起来的时候触发
onkeypress：事件在用户按下并放开任何字母数字键时发生。但是系统按钮（例如：箭头键、功能键）无法得到识别。
例子：根据正则表达式验证邮箱
function checkemail() { var v4 = trim(u4.value); var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; if(v4.match(reg) != null) { imgs4.setAttribute("src","imges/1.png"); return true; } else { imgs4.setAttribute("src","imges/2.png"); return false; } }
正则表达式补充：
建立正则表达式的方法：
var patten= new RegExp(/^[0-9]{17}[0-9|X]$/);/*RegExp()括号里面的式子需要自己定义：1、[]里面只有一个元素2、()里面可以写一个单词或者式子3、{}里面表示数量
4、^：以某个元素开头，写在元素前面
5、$：以某个元素结束，写在元素后面*/
例：
1、正则表达式验证身份证：
身份证：<input type="text" id="1" />
/*javascript部分*/ var a= document.getElementById("1").value; var patten= new RegExp(/^[0-9]{17}[0-9|X]$/); if(patten.test(a)) { alert("输入正确"); } else { alert("输入错误"); }
2、正则表达式验证邮箱：
邮箱：<input type="text" id="2" /><input type="button" value="提交" onclick="mail()" />
function mail(){ var patten2= new RegExp(/^[0-9|A-z|_]{1,17}[@][0-9|A-z]{1,3}.(com)$/) var mail = document.getElementById("2").value; if(patten2.test(mail)) { alert("输入正确"); } else { alert("输入错误"); }}
评注：匹配形式如 0511-4405222 或 021-87888822
匹配腾讯QQ号：[1-9][0-9]{4,}
评注：腾讯QQ号从10000开始
匹配中国邮政编码：[1-9]d{5}(?!d)
评注：中国邮政编码为6位数字
匹配身份证：d{15}|d{18}
评注：中国的身份证为15位或18位
匹配ip地址：d+.d+.d+.d+
评注：提取ip地址时有用
匹配特定数字：
^[1-9]d*$ //匹配正整数
^-[1-9]d*$ //匹配负整数
^-?[1-9]d*$ //匹配整数
^[1-9]d*|0$ //匹配非负整数（正整数 + 0）
^-[1-9]d*|0$ //匹配非正整数（负整数 + 0）
^[1-9]d*.d*|0.d*[1-9]d*$ //匹配正浮点数
^-([1-9]d*.d*|0.d*[1-9]d*)$ //匹配负浮点数
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$ //匹配浮点数
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$ //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$ //匹配非正浮点数（负浮点数 + 0）
评注：处理大量数据时有用，具体应用时注意修正
匹配特定字符串：
^[A-Za-z]+$ //匹配由26个英文字母组成的字符串
^[A-Z]+$ //匹配由26个英文字母的大写组成的字符串
^[a-z]+$ //匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$ //匹配由数字和26个英文字母组成的字符串
^w+$ //匹配由数字、26个英文字母或者下划线组成的字符串
在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下:
只能输入数字：“^[0-9]*$”
只能输入n位的数字：“^d{n}$”
只能输入至少n位数字：“^d{n,}$”
只能输入m-n位的数字：“^d{m,n}$”
只能输入零和非零开头的数字：“^(0|[1-9][0-9]*)$”
只能输入有两位小数的正实数：“^[0-9]+(.[0-9]{2})?$”
只能输入有1-3位小数的正实数：“^[0-9]+(.[0-9]{1,3})?$”
只能输入非零的正整数：“^+?[1-9][0-9]*$”
只能输入非零的负整数：“^-[1-9][0-9]*$”
只能输入长度为3的字符：“^.{3}$”
只能输入由26个英文字母组成的字符串：“^[A-Za-z]+$”
只能输入由26个大写英文字母组成的字符串：“^[A-Z]+$”
只能输入由26个小写英文字母组成的字符串：“^[a-z]+$”
只能输入由数字和26个英文字母组成的字符串：“^[A-Za-z0-9]+$”
只能输入由数字、26个英文字母或者下划线组成的字符串：“^w+$”
验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为：以字母开头，长度在6-18之间，
只能包含字符、数字和下划线。
验证是否含有^%&'',;=?$"等字符：“[^%&'',;=?$x22]+”
只能输入汉字：“^[u4e00-u9fa5],{0,}$”
验证Email地址：“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”
验证InternetURL：“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”
验证电话号码：“^((d{3,4})|d{3,4}-)?d{7,8}$”
正确格式为：“XXXX-XXXXXXX”，“XXXX-XXXXXXXX”，“XXX-XXXXXXX”，
“XXX-XXXXXXXX”，“XXXXXXX”，“XXXXXXXX”。
验证身份证号（15位或18位数字）：“^d{15}|d{}18$”
验证一年的12个月：“^(0?[1-9]|1[0-2])$”正确格式为：“01”-“09”和“1”“12”
验证一个月的31天：“^((0?[1-9])|((1|2)[0-9])|30|31)$”
正确格式为：“01”“09”和“1”“31”。
匹配中文字符的正则表达式： [u4e00-u9fa5]
匹配双字节字符(包括汉字在内)：[^x00-xff]
匹配空行的正则表达式：n[s| ]*r
匹配HTML标记的正则表达式：/<(.*)>.*|<(.*) />/
匹配首尾空格的正则表达式：(^s*)|(s*$)
匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
匹配网址URL的正则表达式：+.)+[w-]+(/[w]http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?
页面的自动滚动效果，可由javascript来实现，
但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果，无需js控制。
使用marquee标记不仅可以移动文字，也可以移动图片，表格等.
语法：<marquee>...</marquee>； 说明：在标记之间添加要进行滚动的内容。
重要属性：
1.滚动方向direction（包括4个值：up、 down、 left和 right）
语法：<marquee direction="滚动方向">...</marquee>
2.滚动方式behavior（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动）
语法：<marquee behavior="滚动方式">...</marquee>
3.滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位）
语法：<marquee scrollamount="5">...</marquee>
4.滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒）
语法：<marquee scrolldelay="100">...</marquee>
5.滚动循环loop（默认值是-1，滚动会不断的循环下去）
语法：<marquee loop="2">...</marquee>
6.滚动范围width、height
7.滚动背景颜色bgcolor
8.空白空间hspace、vspace
代码示例：
<!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=utf-8" /><title>无标题文档</title></head>
<body><div><marquee direction="up" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1" width="1000" height="50" bgcolor="#0099FF" hspace="10" vspace="10">
指整个Marquee对齐方式; (2)behavior:设置滚动的方式: scroll:表示由一端滚动到另一端,会重复,缺陷是不能无缝滚动。 slide:表示由一段滚动到另一端,不会重复...</marquee></div></body></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=utf-8" />
<title>无标题文档</title>
</head>
<body>
<select size="1" onchange="change()" id="sele">
<option value="11" selected="selected">可乐</option>
<option value="22">雪碧</option>
<option value="33">百事</option>
</select>
<p id="p">价格：3元</p>
</body>
</html>
<script>
function change()
{
var a = document.getElementById("sele").value;
var p = document.getElementById("p");
if(a=="11")
{
p.innerHTML="价格：3元";
}
else if(a=="22")
{
p.innerHTML="价格：4元";
}
else
{
p.innerHTML="价格：5元";
}
}
</script>
<!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=utf-8" />
<title>无标题文档</title>
</head>
<body>
<marquee scrollamount="30" vspace="100">
Hello World！！
</marquee>
<marquee hspace="150" loop="3" scrollamount="25" direction="up" height="400px" behavior="alternate" >
你好！！！！！
</marquee>123
</body>
</html>
1、表单验证<form></form>
(1).非空验证（去空格）
(2).对比验证（跟一个值对比）
(3).范围验证（根据一个范围进行判断）
(4).固定格式验证：电话号码，身份证号，邮箱，信用卡号等的验证；需要用到正则表达式来进行验证。
(5).其它验证
2、正则表达式
用符号来描述书写规则:/ 中间写正则表达式 /
^ ：匹配开头，$：匹配结尾 ； /^ve/以ve开头的 /ve$/以ve结尾
\d：一个任意的数字
\w：一个任意的数字或字母
\s：任意的字符串
{n}：把左边的表达式重复n遍
{m,n}：把左边的表达式重复至少m遍，至多n遍
{m, }：把左边的表达式重复至少m遍，,至多不限
+：左边的表达式，至少出现一次，至多不限，相当于{1，}
*：左边的表达式，至少出现0次，至多不限，相当于{0，}
?：左边的表达式，至少出现0次，至多出现1次，相当于{0，1}
[a,b,c]：只能取方括号中内容之一
[a-z]或[1-9]：在范围中取其一
|：代表或者； （）：优先级； \：转义--“\( \)”这个才是要出现的小括号，需要转义
3、事件
事件有三要素：事件源、事件数据、事件处理程序
事件冒泡：当元素嵌套的时候，内部元素激发某个事件后，默认情况下外部元素相应的事件也会跟着依次触发
可以加return false;是阻止默认操作
onclick: 鼠标单击触发
ondblclick: 双击触发
onmouseover: 鼠标移动上面触发
onmouseout: 鼠标离开时触发
onmousemove: 鼠标在上面移动时触发
onchange: 只要内容改变触发
onblur: 失去焦点时触发
onfocus: 获得焦点时触发
onkeydown: 按键按下的时候触发
onkeyup：按键抬起来的时候触发
onkeypress：事件在用户按下并放开任何字母数字键时发生。但是系统按钮（例如：箭头键、功能键）无法得到识别。
例子：根据正则表达式验证邮箱
function checkemail() { var v4 = trim(u4.value); var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; if(v4.match(reg) != null) { imgs4.setAttribute("src","imges/1.png"); return true; } else { imgs4.setAttribute("src","imges/2.png"); return false; } }
正则表达式补充：
建立正则表达式的方法：
var patten= new RegExp(/^[0-9]{17}[0-9|X]$/);/*RegExp()括号里面的式子需要自己定义：1、[]里面只有一个元素2、()里面可以写一个单词或者式子3、{}里面表示数量
4、^：以某个元素开头，写在元素前面
5、$：以某个元素结束，写在元素后面*/
例：
1、正则表达式验证身份证：
身份证：<input type="text" id="1" />
/*javascript部分*/ var a= document.getElementById("1").value; var patten= new RegExp(/^[0-9]{17}[0-9|X]$/); if(patten.test(a)) { alert("输入正确"); } else { alert("输入错误"); }
2、正则表达式验证邮箱：
邮箱：<input type="text" id="2" /><input type="button" value="提交" onclick="mail()" />
function mail(){ var patten2= new RegExp(/^[0-9|A-z|_]{1,17}[@][0-9|A-z]{1,3}.(com)$/) var mail = document.getElementById("2").value; if(patten2.test(mail)) { alert("输入正确"); } else { alert("输入错误"); }}
常用正则表达式：
匹配国内电话号码：d{3}-d{8}|d{4}-d{7}评注：匹配形式如 0511-4405222 或 021-87888822
匹配腾讯QQ号：[1-9][0-9]{4,}
评注：腾讯QQ号从10000开始
匹配中国邮政编码：[1-9]d{5}(?!d)
评注：中国邮政编码为6位数字
匹配身份证：d{15}|d{18}
评注：中国的身份证为15位或18位
匹配ip地址：d+.d+.d+.d+
评注：提取ip地址时有用
匹配特定数字：
^[1-9]d*$ //匹配正整数
^-[1-9]d*$ //匹配负整数
^-?[1-9]d*$ //匹配整数
^[1-9]d*|0$ //匹配非负整数（正整数 + 0）
^-[1-9]d*|0$ //匹配非正整数（负整数 + 0）
^[1-9]d*.d*|0.d*[1-9]d*$ //匹配正浮点数
^-([1-9]d*.d*|0.d*[1-9]d*)$ //匹配负浮点数
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$ //匹配浮点数
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$ //匹配非负浮点数（正浮点数 + 0）
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$ //匹配非正浮点数（负浮点数 + 0）
评注：处理大量数据时有用，具体应用时注意修正
匹配特定字符串：
^[A-Za-z]+$ //匹配由26个英文字母组成的字符串
^[A-Z]+$ //匹配由26个英文字母的大写组成的字符串
^[a-z]+$ //匹配由26个英文字母的小写组成的字符串
^[A-Za-z0-9]+$ //匹配由数字和26个英文字母组成的字符串
^w+$ //匹配由数字、26个英文字母或者下划线组成的字符串
在使用RegularExpressionValidator验证控件时的验证功能及其验证表达式介绍如下:
只能输入数字：“^[0-9]*$”
只能输入n位的数字：“^d{n}$”
只能输入至少n位数字：“^d{n,}$”
只能输入m-n位的数字：“^d{m,n}$”
只能输入零和非零开头的数字：“^(0|[1-9][0-9]*)$”
只能输入有两位小数的正实数：“^[0-9]+(.[0-9]{2})?$”
只能输入有1-3位小数的正实数：“^[0-9]+(.[0-9]{1,3})?$”
只能输入非零的正整数：“^+?[1-9][0-9]*$”
只能输入非零的负整数：“^-[1-9][0-9]*$”
只能输入长度为3的字符：“^.{3}$”
只能输入由26个英文字母组成的字符串：“^[A-Za-z]+$”
只能输入由26个大写英文字母组成的字符串：“^[A-Z]+$”
只能输入由26个小写英文字母组成的字符串：“^[a-z]+$”
只能输入由数字和26个英文字母组成的字符串：“^[A-Za-z0-9]+$”
只能输入由数字、26个英文字母或者下划线组成的字符串：“^w+$”
验证用户密码:“^[a-zA-Z]w{5,17}$”正确格式为：以字母开头，长度在6-18之间，
只能包含字符、数字和下划线。
验证是否含有^%&'',;=?$"等字符：“[^%&'',;=?$x22]+”
只能输入汉字：“^[u4e00-u9fa5],{0,}$”
验证Email地址：“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”
验证InternetURL：“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”
验证电话号码：“^((d{3,4})|d{3,4}-)?d{7,8}$”
正确格式为：“XXXX-XXXXXXX”，“XXXX-XXXXXXXX”，“XXX-XXXXXXX”，
“XXX-XXXXXXXX”，“XXXXXXX”，“XXXXXXXX”。
验证身份证号（15位或18位数字）：“^d{15}|d{}18$”
验证一年的12个月：“^(0?[1-9]|1[0-2])$”正确格式为：“01”-“09”和“1”“12”
验证一个月的31天：“^((0?[1-9])|((1|2)[0-9])|30|31)$”
正确格式为：“01”“09”和“1”“31”。
匹配中文字符的正则表达式： [u4e00-u9fa5]
匹配双字节字符(包括汉字在内)：[^x00-xff]
匹配空行的正则表达式：n[s| ]*r
匹配HTML标记的正则表达式：/<(.*)>.*|<(.*) />/
匹配首尾空格的正则表达式：(^s*)|(s*$)
匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
匹配网址URL的正则表达式：+.)+[w-]+(/[w]http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?
页面的自动滚动效果，可由javascript来实现，
但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果，无需js控制。
使用marquee标记不仅可以移动文字，也可以移动图片，表格等.
语法：<marquee>...</marquee>； 说明：在标记之间添加要进行滚动的内容。
重要属性：
1.滚动方向direction（包括4个值：up、 down、 left和 right）
语法：<marquee direction="滚动方向">...</marquee>
2.滚动方式behavior（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动）
语法：<marquee behavior="滚动方式">...</marquee>
3.滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位）
语法：<marquee scrollamount="5">...</marquee>
4.滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒）
语法：<marquee scrolldelay="100">...</marquee>
5.滚动循环loop（默认值是-1，滚动会不断的循环下去）
语法：<marquee loop="2">...</marquee>
6.滚动范围width、height
7.滚动背景颜色bgcolor
8.空白空间hspace、vspace
代码示例：
<!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=utf-8" /><title>无标题文档</title></head>
<body><div><marquee direction="up" behavior="scroll" scrollamount="1" scrolldelay="0" loop="-1" width="1000" height="50" bgcolor="#0099FF" hspace="10" vspace="10">
指整个Marquee对齐方式; (2)behavior:设置滚动的方式: scroll:表示由一端滚动到另一端,会重复,缺陷是不能无缝滚动。 slide:表示由一段滚动到另一端,不会重复...</marquee></div></body></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=utf-8" />
<title>无标题文档</title>
</head>
<body>
<select size="1" onchange="change()" id="sele">
<option value="11" selected="selected">可乐</option>
<option value="22">雪碧</option>
<option value="33">百事</option>
</select>
<p id="p">价格：3元</p>
</body>
</html>
<script>
function change()
{
var a = document.getElementById("sele").value;
var p = document.getElementById("p");
if(a=="11")
{
p.innerHTML="价格：3元";
}
else if(a=="22")
{
p.innerHTML="价格：4元";
}
else
{
p.innerHTML="价格：5元";
}
}
</script>
<!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=utf-8" />
<title>无标题文档</title>
</head>
<body>
<marquee scrollamount="30" vspace="100">
Hello World！！
</marquee>
<marquee hspace="150" loop="3" scrollamount="25" direction="up" height="400px" behavior="alternate" >
你好！！！！！
</marquee>123
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html 基本标签
- html 基本标签
- html 基本标签
- HTML使用列表
- HTMLTestRunner 异常输出中文乱码
- HTML中的英文缩写标记、属性
- 如何在Html中引入外部页面
- html文本溢出
- ubuntu下安装tidy
- html的表单form
- 在线工具、setHtmlRem、px2rem
- 解决问题 “You don't have permission to access /index.html on this server.”
- HTML学习笔记（一）
- HTML使用图像
- Html - 幽灵键盘
- 在table上面得加一个提示层,可加任何HTML
- HTML－文本格式化
- HTML文字与段落标记
- html-progress meter
- html-progress meter