前言
表单验证是数据安全的一个前提,在web网站中应用广泛。
一、什么是表单验证？o(￣︶￣)o
表单验证就是进行表单提交的时候,先获取文本框中的内容，然后对输入的内容 进行规范化处理，验证输入的内容是否符合规范。 例如： 验证邮箱文本框需要的条件如下 字符串中包含@qq.com、@163.com等等。 字符串@前不为空 还可以加数位验证【满足多少位数才给通过】 满足条件就通过,否则给出提示。
二、常见的表单验证：o(￣︶￣)o
1.数值型文本框验证：
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> function f1(){ var x=document.getElementById("demo").value; if(x==""||isNaN(x)){ alert("不合规范"); } } </script> <input type="text" id="demo"> <button type="button" onclick="f1()">点击提交</button> </body> </html>
2.邮箱文本框验证：
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action=""> 输入：<input type="text" name="emile" id="myemile" placeholder="请输 入邮箱"> <input type="button" value="验证" onclick="checkemile();"> </form> <script> function checkemile(){ var reg = new RegExp("^[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("输入不能为空!"); return false; }else if(!reg.test(obj.value)){ alert("验证不通过!"); return false; }else{ alert("通过！"); return true; } } </script> </body> </html>
3.密码文本框验证【大写、小写、数值、特殊字符】：
代码如下（示例）：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action=""> 密码：<input type="text" id="passwd"> <input type="button" value="提交" onclick="testps()"> </form> <script> function testps(){ var pwdRegex = new RegExp('(?=.*[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:用于改变正则表达式，或增删匹配模式。
总结
介绍了几种简单的表单验证与正则表达式基本概念。后续还会出一个单独的博客对正则表达式进行详解,欢迎大家关注博主。更多内容持续更新。正则化表达式不仅仅表单验证需要,爬虫、人工智能、数据分析等新兴技术也会用到,大家好好掌握。
