0

0

HTML 表单和验证事件

php中文网

php中文网

发布时间:2016-09-12 17:27:13

|

1758人浏览过

|

来源于php中文网

原创

1、表单验证

(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;    } }

 

 

立即学习前端免费学习笔记(深入)”;

jQuery带验证登录表单插件
jQuery带验证登录表单插件

jQuery带验证登录表单插件是可以对一些注册登录时常用的字段类型进行简单的验证,另外我们可以在同一个页面切换并完成注册或者登录操作。

下载

 

立即学习前端免费学习笔记(深入)”;

正则表达式补充:

建立正则表达式的方法:

 

var patten= new RegExp(/^[0-9]{17}[0-9|X]$/);/*RegExp()括号里面的式子需要自己定义:

1[]里面只有一个元素

2()里面可以写一个单词或者式子3{}里面表示数量
4^:以某个元素开头,写在元素前面
5$:以某个元素结束,写在元素后面*/

 

例:

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、正则表达式验证邮箱:

 

邮箱:提交" 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的正则表达式:http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?  

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

Swoft2.x速学之http api篇课程
Swoft2.x速学之http api篇课程

共16课时 | 0.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号