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;
}
}
正则表达式补充:
建立正则表达式的方法:

例:
1、正则表达式验证身份证:

2、正则表达式验证邮箱:

常用正则表达式:
匹配国内电话号码: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 表单和验证事件的更多相关文章
- 表单和验证事件以及marquee标签
1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...
- HTML--9表单和验证事件
1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...
- HTML表单和验证事件
1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...
- HTML5表单及其验证
随笔- 15 文章- 1 评论- 115 HTML5表单及其验证 HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...
- v-if案例解析(element-ui form-item 结合 v-if 动态生成rule规则\表单元素,表单无法验证问题剖析 )
fire 读在最前面: 1.此文章衔接Vue 虚拟Dom 及 部分生命周期初探,相关整体知识点请先阅读后再继续本文阅读 问:当v-if为true时,会重新渲染相关dom节点吗? <child v ...
- EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法
带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{ code: '01', name: 'name01' }); easyui修改操作的回显 ...
- ajax提交表单无法验证easyui的验证选项(比如required等)
在实际开发中,遇到ajax方式提交表单没法验证easyui的验证选项,这对实际用户体验造成了很大的困扰.当然,这也是理所当然的事情. 解决办法:使用jquery中ajax的beforeSend事件 ...
- Angualr6表单提交验证并跳转
在Angular6中,使用NG-ZRROR作为前端开发框架,在进行表单开发时遇到了一些问题,最后解决了,在此记录. 1.表单构造: 引入forms: import { FormGroup, FormB ...
- 深入了解Element Form表单动态验证问题 转载
随风丶逆风 2020-04-03 15:36:41 2208 收藏 3 分类专栏: Vue 随笔 文章标签: 动态验证 el-form elementUI 表单验证 版权 在上一篇<vue ...
随机推荐
- java大数取模
题目链接:http://lightoj.com/volume_showproblem.php?problem=1214 用java写大数果然是方便多了! import java.math.BigInt ...
- 【hibernate merge】session1.merge(T entity)方法的含义和update方法的区别
注意: MERGE语句是SQL语句的一种.在SQL Server.Oracle数据库中可用,MySQL.PostgreSQL中不可用. 1>session1.merge(T entity) 合 ...
- 数值的三种表示--C语言
在C语言中,数值常数可以是3中形式: (1)在数值前面加0表示的是8进制数据: (2)在数字前面加0x表示的是16进制数: (3)在数值前面什么也不加,表示的是10进制数值. 目前C语言 ...
- Class.forName()的作用与使用总结
1.Class类简介: Java程序在运行时,Java运行时系统一直对所有的对象进行所谓的运行时类型标识.这项信息纪录了每个对象所属的类.虚拟机通常使用运行时类型信息选准正确方法去执行,用来保存这些类 ...
- ADB常用的几个命令
1. 查看设备 adb devices 查看当前连接的设备, 连接到计算机的android设备或者模拟器将会列出显示 2. 安装软件 adb install [-r] [-s] <file> ...
- CF#335 Freelancer's Dreams
Freelancer's Dreams time limit per test 2 seconds memory limit per test 256 megabytes input standard ...
- 【oracle】解锁oracle用户,unlock
解除oracle用户的锁定状态,例如oracle数据库建立测试实例时默认建立的scott用户,一开始是处于locked状态的,现在我们需要将其解锁,步骤如下: (1)在cmd中登录sqlplus,例如 ...
- 01_Swift2基础之Swift简介+创建
1.Swift 1> Swift初影响 Swift 是新一代的 iOS.OS X 和 watchOS 和 tvOS 的app开发编程语言. 中文名"雨燕",寓意为敏捷.灵巧而 ...
- Storm-166:Nimbus HA solution based on Zookeeper
Nimbus HA feature is quite important for our application running on the storm cluster. So, we've bee ...
- Long-Short Memory Network(LSTM长短期记忆网络)
自剪枝神经网络 Simple RNN从理论上来看,具有全局记忆能力,因为T时刻,递归隐层一定记录着时序为1的状态 但由于Gradient Vanish问题,T时刻向前反向传播的Gradient在T-1 ...