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、正则表达式验证身份证

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表单和验证事件的更多相关文章

  1. HTML 表单和验证事件

    1.表单验证<form></form> (1)非空验证(去空格) (2)对比验证(跟一个值对比) (3)范围验证(根据一个范围进行判断) (4)固定格式验证:电话号码,身份证号 ...

  2. 表单和验证事件以及marquee标签

    1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...

  3. HTML--9表单和验证事件

    1.表单验证<form></form> (1).非空验证(去空格) (2).对比验证(跟一个值对比) (3).范围验证(根据一个范围进行判断) (4).固定格式验证:电话号码, ...

  4. HTML5表单及其验证

    随笔- 15 文章- 1 评论- 115 HTML5表单及其验证   HTML表单一直都是Web的核心技术之一,有了它我们才能在Web上进行各种各样的应用.HTML5 Forms新增了许多新控件及其A ...

  5. v-if案例解析(element-ui form-item 结合 v-if 动态生成rule规则\表单元素,表单无法验证问题剖析 )

    fire 读在最前面: 1.此文章衔接Vue 虚拟Dom 及 部分生命周期初探,相关整体知识点请先阅读后再继续本文阅读 问:当v-if为true时,会重新渲染相关dom节点吗? <child v ...

  6. EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法

    带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{ code: '01', name: 'name01' }); easyui修改操作的回显 ...

  7. ajax提交表单无法验证easyui的验证选项(比如required等)

    在实际开发中,遇到ajax方式提交表单没法验证easyui的验证选项,这对实际用户体验造成了很大的困扰.当然,这也是理所当然的事情.   解决办法:使用jquery中ajax的beforeSend事件 ...

  8. Angualr6表单提交验证并跳转

    在Angular6中,使用NG-ZRROR作为前端开发框架,在进行表单开发时遇到了一些问题,最后解决了,在此记录. 1.表单构造: 引入forms: import { FormGroup, FormB ...

  9. 深入了解Element Form表单动态验证问题 转载

    随风丶逆风 2020-04-03 15:36:41  2208  收藏 3 分类专栏: Vue 随笔 文章标签: 动态验证 el-form elementUI 表单验证 版权 在上一篇<vue ...

随机推荐

  1. hibernate篇章六--demo(Hibernate之第1解之-hibernate_demo_1)

    准备工作做好了,开始Hibernate: 1:建立包:package:dao.model.service.util包: 2:开始model实体类Student:id,sname生成getter/set ...

  2. UITabBarController 初学

    纯代码编写UITabBarController, 不多说,直接见代码 RViewController1 *vc1 = [[RViewController1 alloc]init]; UINavigat ...

  3. c# winform实现网页上用户自动登陆,模拟网站登录

    using System; using System.Collections.Generic; using System.Text; using System.Net; using System.IO ...

  4. 在SQL Server 实现递归

    --在SQL Server 中其实提供了CTE[公共表表达式]来实现递归: Declare @Id Int Set @Id = 24;    ---在此修改父节点 With RootNodeCTE(I ...

  5. ISA2006 下建立VPN连接时出现“错误800”时的解决办法

    [转载]http://social.microsoft.com/Forums/zh-CN/9cfa0c06-0f46-44cb-9e8f-8eba1c3821ba/vpn-vpn800 重启Routi ...

  6. spring mvc源码解析

    1.从DispatcherServlet开始 与很多使用广泛的MVC框架一样,SpringMVC使用的是FrontController模式,所有的设计都围绕DispatcherServlet 为中心来 ...

  7. [002] The Perks of Being a Wallflower - 读后记

    The Perks of Being a Wallflower 今天(2015年10月30日 18:26:17)读完"The Perks of Being a Wallflower" ...

  8. 如何讓Android系統顯示CJK擴展區漢字

    由於一些特殊需要,需要在個人設備上顯示CJK擴展區漢字,經多方詢問並驗證,找到了一下辦法,暫總結如下. 一.電腦上顯示 在電腦(Windows,Linux,Mac等系統)上可以通過安裝「花園明朝字體」 ...

  9. MinGW 仿 linux 开发环境

    MinGW 默认安装 MSYS.通常打开的 MinGW Shell 其实 MSYS,MinGW 作为一个组件存在. MSYS -- Minimal SYStem,是一个 Bourne Shell 解释 ...

  10. 自定义注解与MYSQL

    无聊之作,可以提意见,但别嘲笑啊 package bean; import java.sql.Date; import annotationK.annotation.Column; import an ...