JS表单效验

时间:2022-12-29 19:56:26
什么需要表单验证?

1.减轻服务器的压力

2.保证数据的完整性、有效性

表单效验的步骤:

1.获取表单元素输入的值

2.对表单数据进行判断处理

3.使用事件对数据进行提交

表单选择器:

$(":input") 选中所有input元素

$(":text") 选中所有的文本框

$(":paassword") 选中所有的密码框

$(":radio") 选中所有的单选按钮

$(":checkbook") 选中所有的复选框

$(":file") 选中所有的文件域

$(":image") 选中所有的图片按钮

$(":button") 选中所有的普通按钮

$(":submit") 选中所有的提交按钮

$(":bidden") 选中所有的隐藏元素

$(":email") 选中所有的邮箱

$(":reset") 选中所有的重置按钮

表单属性过滤选择器:

$(":enabled") 选中所有可用元素

$(":disabled") 选中所有的不可用元素

$(":checked") 选中所有单选、复选中被选中的元素

$(":selected") 选中下拉列表选中的元素

获取和失去焦点事件

事件: onfocus 获取焦点

onblur 失去焦点

方法(jQuery):

focus() 获取焦点方法

blur() 失去焦点的方法

select() 选中列表时的方法

正则表达式:

1、代码简洁

2、对输入的格式验证更严谨,更加安全

语法 : /表达式/附加参数 列如:var reg=/java/g;

表达式指的是需要匹配的内容 验证的内容

附加参数指的是匹配的方式

g:全局匹配 匹配一次后继续匹配

i:大小写匹配 忽略大小写匹配

m:换行模式下匹配

正则验证方法:

exec() 验证字符串中是否含有字符,得到字符串 否则得到null

test() 验证字符串中是否含有字符,得到true 否则得到false

字符串验证方法:

正则表达式:

1、代码简洁

2、对输入的格式验证更严谨,更加安全

语法 : /表达式/附加参数 列如:var reg=/java/g;

表达式指的是需要匹配的内容 验证的内容

附加参数指的是匹配的方式

g:全局匹配 匹配一次后继续匹配

i:大小写匹配 忽略大小写匹配

m:换行模式下匹配

var str="1张三2张三3张三1张三2张三3";

var reg1=/张三/g;

匹配到了返回字符数组,保存所有匹配当前的值 否则返回null

var test = str.match(reg1);

匹配到了返回当前值的下标 匹配不到得到 -1

var arr = str.search(reg1);

将正则表达式匹配到的值给替换掉

var str1 = str.replace(reg1,"李四");

将字符串分割为字符串数组

var arr = str.split("");

/......./ 规则的开始和结束

^ 表达式的开始

$ 表达式的结束

\s 匹配空白字符(换行、空格)

\S 匹配非空白字符

\d 匹配一个数字 [0-9]之间

\D 匹配一个非数字

\w 匹配数字字母下划线[A-Za-z0-9_]

\W 匹配除了数字字母下划线[A-Za-z0-9_]

. 匹配除了换行符其他的符号

{n} 匹配几次 规定写几个

{n,} 至少匹配n次 多次(上不封顶)

{n,m} 至少匹配n次,不超过m次 数量在n到m之间

* 至少匹配0次 多次(上不封顶)

+ 至少匹配1次 多次(上不封顶)

至少匹配0次 至多1次

[] 可选项

HTML5新验证属性

required 非空验证

placeholder 表单提示性文字

pattern 正则表达式 例如:pattern="\d"

判断验证结果

元素.validity.valueMissing 接收非空验证结果 注意:只能判断设置了required属性

元素.validity.typeMismatch 接收新元素验证结果 只能验证类型:url number email等

元素.validity.patternMismatch 接收正则表达式验证结果 注意:设置了pattern=""属性

元素.validity.tooLong 长度不规范时验证结果 注意:设置了maxlength=""属性

元素.validity.rangeOverflow 不符合最小值验证结果 注意:设置了min=""属性

元素.validity.rangeUnderflow 不符合验最大证结果 设置了max=""属性

设置提示信息

元素.setCustomValidity("提示信息")

元素.setCustomValidity("") 清空信息