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

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

前言


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


总结


介绍了几种简单的表单验证与正则表达式基本概念。后续还会出一个单独的博客对正则表达式进行详解,欢迎大家关注博主。更多内容持续更新。正则化表达式不仅仅表单验证需要,爬虫、人工智能、数据分析等新兴技术也会用到,大家好好掌握。


目录
相关文章
|
12天前
|
移动开发 JavaScript 前端开发
JavaScript的正则表达式实现邮箱校验
JavaScript的正则表达式实现邮箱校验
60 1
|
12天前
|
JavaScript 前端开发
用JavaScript正则表达式匹配对应字符串高亮显示,并过滤掉空格、<、>等HTML节点符号
用JavaScript正则表达式匹配对应字符串高亮显示,并过滤掉空格、<、>等HTML节点符号
|
10天前
|
前端开发 JavaScript
前端 js 经典:正则表达式
前端 js 经典:正则表达式
16 2
|
11天前
|
JavaScript 前端开发 测试技术
学会JavaScript正则表达式(二)
学会JavaScript正则表达式(二)
|
11天前
|
机器学习/深度学习 JavaScript 前端开发
学会JavaScript正则表达式(一)
学会JavaScript正则表达式(一)
|
12天前
|
XML JavaScript 前端开发
【JavaScript | RegExp】正则表达式
【JavaScript | RegExp】正则表达式
14 4
|
12天前
|
机器学习/深度学习 Python
正则表达式(Regular Expression,常简写为regex或regexp)是一种强大的文本处理工具
【5月更文挑战第12天】正则表达式是文本处理工具,Python的re模块支持其使用。元字符如.、*、+、?等在正则表达式中具有特殊含义,用于指定匹配规则。示例中,通过正则表达式模式匹配字符串中的电子邮件地址,并使用re.findall()找出所有匹配项。
27 4
|
12天前
|
JavaScript 索引
记录_js正则表达式
记录_js正则表达式
8 0
|
12天前
|
JavaScript 前端开发 索引
JavaScript中的正则表达式:使用与模式匹配
【4月更文挑战第22天】本文介绍了JavaScript中的正则表达式及其模式匹配,包括字面量和构造函数定义方式,以及`test()`、`match()`、`search()`和`replace()`等匹配方法。正则表达式由元字符(如`.`、`*`、`[]`)和标志(如`g`、`i`)组成,用于定义搜索模式。文中还分享了正则使用的技巧,如模式分解、非捕获分组和注释。掌握正则表达式能提升文本处理的效率和代码质量。
|
12天前
|
JavaScript 前端开发 开发者
ChatGPT 回答一道 JavaScript 正则表达式的题目
ChatGPT 回答一道 JavaScript 正则表达式的题目
9 0