表单校验的方法

最新推荐文章于 2022-09-13 16:56:27 发布

MVP1538

最新推荐文章于 2022-09-13 16:56:27 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/MVP1538/article/details/82774349

版权

表单校验

Why：减轻服务器压力保证输入的数据符合要求

常用表单验证

日期格式

表单元素是否为空

用户名和密码

mail地址

身份证号码

验证思路：

当数据不符合要求怎么编写脚本 :

获得表单元素值2.使用JavaScript的一些方法对数据进行判断3.当表单提交时，触发事件，对获取的数据进行验证

表单选择器：

:input 匹配所有input textarea select button元素 $(“#myform :input”)选取表单中所有的input，select和button元素

:text 匹配所有单行文本框 $(“#myform :text”)选取email和姓名两个input元素

:password 匹配所有密码框 $(“#myform :password”)选取所有type=“password”元素

:radio 匹配所有单选按钮 $(“#myform : radio”)选取type=“radio”元素

:checkbox 匹配所有复选框 CheckBox

:submit 匹配所有提交按钮 submit

：image 图像域 image

：reset 重置按钮 reset

：button 按钮选取button元素

：file 文件域 file

：hidden 不可见元素，或者type为hidden的元素 $() 选取<input type=”hidden”/> 或者style=“display none”等元素

属性过滤选择器

:enable 匹配所有可用元素 $(#userform :enabled)匹配form内部除编号输入框外的所有元素

:disabled 匹配所有不可用元素 $(#userform :disabled)匹配编号输入框

:checked 匹配所有被选中元素(复选框，单选按钮，select中的option) $(#userform :checked)匹配“性别”中的“男”选项和爱好中的编程选项

:selected 匹配所有选中的option元素 $(#userform :selected)匹配“家乡”中的“北京”选项

使用string对象验证邮箱

不能为空，格式正确

文本框验证：

密码不能为空，不少于6个字符，姓名不能为空，不能有数字

文本框内容的验证

校验提示特效

表单验证需要综合运用元素的事件和方法

事件： onblur 失去焦点，当光标离开某个文本框时触发

Onfocus 获得焦点，当光标进入某个文本框时触发

方法：blur() 从文本域中移开焦点

Focus() 从文本域中设置焦点，即获得鼠标光标

Select() 选取文本域中的内容，突出显示输入区域的内容

文本输入提示特效：

正则表达式

为什么使用：

简洁的代码严谨的验证文本框中的内容

定义正则表达式

普通方式 var reg=/表达式/附加参数

Var reg=/white/

Var reg=/white/g

参数g代表可以全局匹配

I代表不区分大小写

M 表示可以进行多行匹配

构造函数 var reg=new RegExp（“表达式”，“附加参数”）

Var reg=new RegExp(“white”)

Var reg=new RegExp(“white”,”g”)

表达式模式

只能表示具体的匹配

Var reg=/china/

Var reg=/abc8/

复合模式

可以使用通配符表达更为抽象的规则模式

Var reg=/^\w+$/

Var reg=/^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/

^表示已XX开头

$表示已XX结尾

\w代表英文字符，数字，下划线

+代表一次或多次

RegExp对象的方法

Exec 检索字符中是正则表达式的匹配，返回找到的值，并确定其位置

Test 检索字符串中指定的值，返回true或false

RegExp对象的属性

Global RegExp对象是否具有标志g

ignoreCase i

Multiline m

String对象的方法

Match 找到一个或多个正则表达式的匹配

Search 检索与正字表达式相匹配的值

Replace 替换与正则表达式匹配的字符串

Split 把字符串分割为字符串数组

正则表达式的符号

/.../ 代表一个模式的开始和结束

^ 匹配字符串的开始

$ 匹配字符串的结束

\s 任何空白字符

\S 任何非空白字符

\d 匹配一个数字字符，等价于[0-9]

\D 除了数字之外的任何字符，等价于[^0-9]

\w 匹配一个数字、下划线或字母字符，等价于[A-Z a-z 0-9 ]

\W 任何非单字字符，等价于[^a-zA-Z0-9]

. 除了换行之外的任意字符

{n}匹配前一项n次

{n,}匹配前一项n次，或者多次

{n,m}匹配前一项n次但是不能超过m次

* 匹配前一项0次或多次，等价于{0,}

+ 1 1

? 0 1 也就是说前一项是可选的，等价于{0,1}

对年龄进行验证，年龄必须在0-120之间

10-99这个范围都是两位数，正则表达式为[1-9]\d

0-9 这个范围是一位数，正则表达式为\d

100-119这个范围是三位数，正则表达式为1[0-1]\d

所有年龄的个位都是[0-9],当百位是1，十位是0-1，正则表达式为(1[0-9]|[1-9])?\d

年龄120是单独的一种情况，需要单独列出来

使用HTML5方式验证表单

HTML5新增属性

Placeholder 提供一种提示(hint),输入域为空时显示，获得焦点输入内容后消失

Require 规定输入域不能为空

Pattern 规定验证input域的模式(正则表达式)

Validity state属性

valueMissing 表单元素设置了require特性，则为必填。如果必填项的值为空，就无法通过表单验证，valueMissing属性会返回true，否则返回false

typeMismatch 输入值与type类型不匹配，HTML5新增的表单类型如：email、number、URL等都包含一个原始的类型验证。如果用户输入的内容与表单类型不符合，则typeMismatch属性将返回true，否则返回false

patternMismatch 输入值与pattern特性的正则表达式不匹配，如果输入的内容不符合pattern验证模式的规则，则patternMismatch属性将返回true否则返回false

tooLong 输入的内容超过了表单元素的maxLength特性限定的字符长度。虽然在输入的时候会限制表单内容的长度，但在某种情况下，如通过程序设置，还是会超出最大长度限制如果输入的内容超过了最大长度限制，则tooLong属性返回true否则返回false

rangeUnderflow 输入的值小于min特性的值，如果输入的数值小于最小值，则rangeUnderflow属性返回true否则返回false

rangeOverflow 输入的值大于max特性的值，如果输入的数值大于最大值，则rangeOverflow属性返回true否则返回false

stepMismatch 输入的值不符合step特性所推算的规则，用于填写数值的表单元素可能需要同时设置min max 和step特性，这就限制了输入的值必须是最小值与step特性值的倍数之和，例如从0到10，step特性值为2，因为合法值为该范围内的偶数，其他数值均无法通过验证，如果输入值不符合要求，则stepMismatch属性值返回true否则返回false

customError 使用自定义的验证错误提示信息，使用setCustomValidity（）方法自定义错误提示信息;setCustomValidity（message）会把错误提示信息自定义为message，此时customError属性值为true：setCustomValidity（“”）会清除自定义的错误信息，此时customError属性值为false