JavaScript表单验证【正则表达式RegExp】

最新推荐文章于 2024-07-26 20:46:33 发布

酷尔。

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量825

点赞数 5

分类专栏：网页前端高级编程从入门到精通文章标签： javascript 正则表达式前端

本文链接：https://blog.csdn.net/apple_51931783/article/details/122758196

版权

网页前端高级编程从入门到精通专栏收录该内容

59 篇文章 21 订阅

订阅专栏

文章目录

前言
一、什么是表单验证？o(*￣︶￣*)o
二、常见的表单验证：o(*￣︶￣*)o
三、实现原理【正则表达式RegExp】：o(*￣︶￣*)o
- 1.语法：
- 2.使用方法：
总结

前言

表单验证是数据安全的一个前提,在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:用于改变正则表达式，或增删匹配模式。