文章目录
前言
表单验证是数据安全的一个前提,在web网站中应用广泛。
一、什么是表单验证？o(￣︶￣)o
表单验证就是进行表单提交的时候,先获取文本框中的内容，然后对输入的内容
进行规范化处理，验证输入的内容是否符合规范。
例如：
验证邮箱文本框需要的条件如下
字符串中包含@qq.com、@163.com等等。
字符串@前不为空
还可以加数位验证【满足多少位数才给通过】
满足条件就通过,否则给出提示。
二、常见的表单验证：o(￣︶￣)o
1.数值型文本框验证：
代码如下：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><script>functionf1(){var x=document.getElementById("demo").value;if(x==""||isNaN(x)){alert("不合规范");}}</script><inputtype="text"id="demo"><buttontype="button"onclick="f1()">点击提交</button></body></html>
2.邮箱文本框验证：
代码如下：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><formaction="">
输入：<inputtype="text"name="emile"id="myemile"placeholder="请输
入邮箱"><inputtype="button"value="验证"onclick="checkemile();"></form><script>functioncheckemile(){var reg =newRegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");var obj = document.getElementById("myemile");if(obj.value ===""){alert("输入不能为空!");returnfalse;}elseif(!reg.test(obj.value)){alert("验证不通过!");returnfalse;}else{alert("通过！");returntrue;}}</script></body></html>
3.密码文本框验证【大写、小写、数值、特殊字符】：
代码如下（示例）：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><formaction="">
密码：<inputtype="text"id="passwd"><inputtype="button"value="提交"onclick="testps()"></form><script>functiontestps(){var pwdRegex =newRegExp('(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{8,30}');var obj=document.getElementById("passwd")if(!pwdRegex.test(obj.value)){alert("您的密码复杂度太低（密码中必须包含大小写字母、数字、特殊字符），请及时修改密码！");}else{alert("通过!")}}</script></body></html>
三、实现原理【正则表达式RegExp】：o(￣︶￣)o
RegExp中文意思是正规化,在进行表单验证的时候,先创建RegExp对象,创造
字符串匹配规则，然后拿RegExp对象的方法验证输入的字符串可以是对主
串进行验证也可以是对特定位置的字符进行验证。
1.语法：
以上功能的实现均依赖于正则表达式
正则表达式的使用语法如下：
^$ :表示匹配值的开始和结尾。
+ :1+，一个或更多。
* :0+，零个或更多。
? :0/1，零个或一个。
{1,2} :1<=length<=2,长度。
() :表示一个表达式的组。
[] :匹配的字符范围，可以与主串进行匹配。
eg:
语法搭配：
[ABC] ：将主串中的所有在此[]内的字母都找出来
[^ABC]：与上一句相反,找出所有不在[]内的元素
[A-Z]：[A-Z] 表示一个区间，匹配所有大写字母，[a-z] 表示所有小写字母。
. :匹配除换行符（\n、\r）之外的任何单个字符，相等于 [^\n\r]
.* :任意个字符
? :任一个字符
2.使用方法：
创建RegExp对象【创造规则】
new RegExp("必选,正则表达式","可选,匹配模式g,i,m")
i ignore - 不区分大小写
g global - 全局匹配
m multi line - 多行匹配
s 特殊字符圆点 . 中包含换行符 \n
RegExp对象的方法
test:检索字符串中的指定值，返回True或False。
exec:检索字符串中的指定值，返回找到的值，没有则null。
complie:用于改变正则表达式，或增删匹配模式。
总结
介绍了几种简单的表单验证与正则表达式基本概念。后续还会出一个单独的博客对正则表达式进行详解,欢迎大家关注博主。更多内容持续更新。正则化表达式不仅仅表单验证需要,爬虫、人工智能、数据分析等新兴技术也会用到,大家好好掌握。
本文转载自: https://blog.csdn.net/apple_51931783/article/details/122758196
版权归原作者 酷尔。 所有， 如有侵权，请联系我们删除。
版权归原作者 酷尔。 所有， 如有侵权，请联系我们删除。