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:事件在用户按下并放开任何字母数字键时发生。但是系统按钮(例如:箭头键、功能键)无法得到识别。
常用正则表达式:
匹配国内电话号码: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的正则表达式:http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?
HTML静态网页--表单验证和事件的更多相关文章
- form表单验证和事件、正则表达式
1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...
- 2016年11月6日--form表单验证和事件、正则表达式
1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...
- form表单验证和事件
1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...
- python_way day17 jQuery表单验证,事件绑定,插件,文本框架,正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
- HTML 表单验证和事件
1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...
- JQuery制作网页——表单验证
1. 表单验证:减轻服务器的压力.保证输入的数据符合要求: 2. 常用的表单验证:日期格式.表单元素是否为空.用户名和密码.E-mail地址.身份证号码等: 3. 表单验证的思路: 1. ...
- HTML(六)——表单验证、正则表达式、事件
1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...
- Day5 JavaScript(三)事件、表单验证以及初识jQuery
事件 1)鼠标事件 mousedown mouseup 2)键盘事件 a) keydown:键被按下 b) keyup:键抬起 c) keypress:按下可打印字符的键时. document.onk ...
- JQuery制作网页——第九章 表单验证
1. 表单验证:减轻服务器的压力.保证输入的数据符合要求: 2. 常用的表单验证:日期格式.表单元素是否为空.用户名和密码.E-mail地址.身份证号码等: 3. 表单验证的思路: 1. ...
随机推荐
- vue+ElementUI项目中,input只能输入正整数的验证
代码如下: <el-input v-model="famount" placeholder="请输入内容" @keyup.native=&q ...
- Ajax--art-template + 调用天气接口
一.实现原理: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- Ajax--serialize应用表单数据序列化
一.jQuery+Ajax表单数据序列化 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- System.getProperty()和getenv()
System.getproperty(String name) 获取系统属性 System.getProperties() 获取所有系统属性 System.getenv(String name) 获取 ...
- 几种支持REST的Java框架
目前宣称支持REST的Java框架包括以下这些: Restlet(http://www.restlet.org/) Cetia4(https://cetia4.dev.java.net/) Apach ...
- jQuery中的工具和插件
jQuery的工具属性 jQuery类数组操作 length属性 表示获取类数组中元素的个数 get()方法 表示获取类数组中单个元素"括号中填写该元素的索引值" index()方 ...
- oracle-OFA模型
用于unix文件系统和安装点的命名约定 用于目录路径的命名约定 用于数据文件的命名约定 用于oracle相关文件的标准位置
- python中字母的大小写转换
1. capitalize(): 首字母大写,其余全部小写 2. upper() :全转换成大写 3. lower(): 全转换成小写 4. title() :标题首字大写,如 &q ...
- Thread class vs Runnnable interface(转)
http://developer.51cto.com/art/201203/321042.htm Thread(Runnable target) Allocates a new Thread obje ...
- 如何在 KiCad Eeschema 原理图中高亮网络
如何在 KiCad Eeschema 原理图中高亮网络 在 KiCad Pcbnew 中高度某个网络很方便,按着 Ctrl + 单击可以高度网络. 以为 Eeschema 也是一样的,按着 Ctrl ...