表单验证和正则表达式

第一部分:form表单基础

表单验证使用onblur还是onchange.

JavaScript中的正则表达式

提示:在JavaScript代码中,函数需要传入的参数是一个对象时,在函数主体body中一定需要对这个参数进行判断是否为null。

表单验证的作用:把输入的表单数据传入给JavaScript代码进行验证,可以让网络应用程序更加可靠,也能减少服务器的负担,同时减少客户端与服务器的带宽。

 

form表单常见需要验证的字段:

Message(字符串),ZIP code(邮政编码),日期(date),Phone Number(电话号码),Email(电子邮件),smart Phone Number(手机号码)。

form对象是一个数组,负责存储表单中所与域的值,但它的数组元素并非利用数值索引存储,而是使用域独有的name属性设定的标示符。在后台服务器接收form表单域的值也是通过name来作为标示符的。

 

onchange事件不可以用于验证表单域的值是否为空。onblur事件适合触发数据验证。如何处理用户复制/粘贴文本到表单域中?(onblur和onfocus是相反事件)

onblur事件:表单域失去焦点时触发。

onfocus事件:表单元素或表单域获得输入的焦点时触发。

 

this关键字,在HTML元素的上下文中,它代表该元素的对象。

 

alert框和弹出式广告(pop-up ad)

alert框会阻止用户当前进行的工作,强制用户按下确定按钮之后才能继续下一步操作。这种设计具有分裂性,所以alert框不适合用在数据验证的提示。

pop-up框目前是一种使用非常多的提示用户的方法。一方面可以在很小的空间显示更多的内容,另一方面能大大提供应用程序的交互性。缺点是在mobile devices时,操作起来不是很方便,同时开放起来相对要复杂一些,需要做适配设备的显示分辨率。

 

表单域的所有验证都通过后,可以调用form.submit()方法将表单的值提交给服务器。

 

第二部分:正则表达式(Regular Expression)

正则表达式专门设计用于匹配(match)文本模式(pattern),可用于创建模式,然后应用于文本字符串,搜索匹配的部分。

/Expression/ 正则表达式总是以斜线起始和结束。

元字符


.


匹配任何字符,换行符(newline)除外


\d


匹配任何数字字符


\w


匹配任何字母和数字字符串


\s


匹配空格


^


字符串以模式起始,从第一个字符开始匹配


$


字符串以模式结束,必须以此作为结束


|


选择(|)提供指定可选的子模式

 

限定符前子模式(sub-pattern),限定符即应用于子模式,并控制子模式出现在模式里面的次数。


*


限定符前的子模式必须出现0或多次


+


限定符前的子模式必须出现1次或多次


?


限定符前的子模式必须出现0或1次


{n}


限定符前的子模式必须出现恰好n次


{min,max}


限定符前的子模式必须出现至少min次,至多max次


()


集合字符,/,元字符,成为子模式

 

字符串

[CharacterClass] 字符串总是以方括号围起来。一组匹配单一字符的正则表达式规则。
需要转义的特殊字符,必须在字符前加上反斜线(\)来转义:

[、]、^、$、.、|、?、*、+、(、)。

时间: 2024-09-10 11:35:14

表单验证和正则表达式的相关文章

Javascript的表单验证-初识正则表达式_javascript技巧

推荐阅读:Javascript的表单验证长度 Javascript的表单验证-提交表单 Javascript的表单验证-揭开正则表达式的面纱 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 验证日期 日期的格式相对特别,不能光凭其长度来验证 常见的日期格式:先以两位数表示日,再以两位数表示月,最后以四位数表示年,期间以斜线分隔. MM/DD/YYYY 博主:怎样设计出验证日期是否符合格式的代码呢? 先来看一下验证日期格式的逻辑吧 将表单域中的值取出,

Javascript的表单验证-揭开正则表达式的面纱_javascript技巧

推荐阅读:Javascript的表单验证长度 Javascript的表单验证-提交表单 Javascript的表单验证-初识正则表达式 在上篇文章给大家介绍了javascript的表单验证-初识正则表达式,本文给大家介绍Javascript的表单验证-揭开正则表达式的面纱,具体详情请看全文. 用元字符匹配相应的字符类型 创建正则表达式有点像创建字符串字面量,只不过正则表达式出现在一对"/"里 正则表达式中会用到一级元字符,用于连接字母与数字 "." 匹配任何字符,除

最常用的15个前端表单验证JS正则表达式

在表单验证中,使用正则表达式来验证正确与否是一个很频繁的操作,本文收集整理了15个常用的JavaScript正则表达式,其中包括用户名.密码强度.整数.数字.电子邮件地址(Email).手机号码.身份证号.URL地址. IPv4地址. 十六进制颜色. 日期. QQ号码. 微信号.车牌号.中文正则. 1 用户名正则 //用户名正则,4到16位(字母,数字,下划线,减号) var uPattern = /^[a-zA-Z0-9_-]{4,16}$/; //输出 true console.log(uP

常用正则表达式范例 方便表单验证_正则表达式

复制代码 代码如下: 验证数字:^[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]*$ 验证非负整数(正整数 + 0) ^\d+

php下常用表单验证的正则表达式_正则表达式

function is_email($str){ //检验email return preg_match("/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/", $str); } function is_url($str){ //检验网址 return preg_match("/^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\&

php下常用表单验证的正则表达式

function is_email($str){ //检验email return preg_match("/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/", $str); } function is_url($str){ //检验网址 return preg_match("/^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\&

详解表单验证正则表达式实例(推荐)_正则表达式

验证:!reg.test(value) 邮箱: 复制代码 代码如下: reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/i; 不包含中文: 复制代码 代码如下: reg = /.*[\u4e00-\u9fa5]+.*$/i; 身份证号: // 验证身份证号码 var city = {11:'北京',12:'天津',13:'河北',14:'山西',15:'内蒙古',21:'辽宁',22:'吉

详解正则表达式表单验证实例_正则表达式

先看看效果图: 首先给大家解释一些符号相关的意义 * 匹配前面的子表达式零次或多次: ^ 匹配输入字符串的开始位置:$匹配输入字符串的结束位置 1. /^$/ 这个是个通用的格式. 2. 里面输入需要实现的功能. \d 匹配一个数字字符,等价于[0-9] + 匹配前面的子表达式一次或多次: ?匹配前面的子表达式零次或一次: 下面通过一段代码给大家分析表单验证正则表达式,具体代码如下: <!DOCTYPE html> <html lang="en"> <he

Javascript的表单验证-提交表单_javascript技巧

推荐阅读:Javascript的表单验证长度 Javascript的表单验证-初识正则表达式 Javascript的表单验证-揭开正则表达式的面纱 JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 坏数据不该抵达服务器:提交表单时的验证 表单域对象里有个form特性,它使用数组表示了整份表单的域 假如这里只有一个简单的信息文本框和一个邮政编码框,还有一个提交按钮 <form> <input id="message" name