JavaScript+CSS+html【练习题】JS正则表达式验证表单

最新推荐文章于 2023-05-26 19:47:32 发布

辣辣写代码_nanaProgrammer

最新推荐文章于 2023-05-26 19:47:32 发布

阅读量1.5k

点赞数 3

文章标签：正则表达式 js html css javascript

本文链接：https://blog.csdn.net/qq_39455275/article/details/108690209

版权

本文介绍了如何使用JavaScript正则表达式进行表单验证，包括正则表达式的创建方式、修饰符、元字符和量词等知识点，并提供了具体的代码实现和效果展示，帮助开发者实现信息录入页面的格式检查和错误提示。

摘要由CSDN通过智能技术生成

题目

程序猿小明需要为公司员工的个人信息录入编写前端代码,效果如下图。
需求:要保证信息录入格式正确无遗漏(输入有误要给到对应提示)。
使用 HTML+CSS 布局出如上图所示页面效果；
嵌入 JS 代码，添加表单提交和表单项失去焦点等事件处理；
在事件处理中按照表单项后面提示的信息完成对应表单验证操作。
注意：单选和下拉框无须添加失去焦点事件（因为只有输入框需要）。
在这里插入图片描述

JS正则表达式

使用正则的3种方式

向String对象的方法（search,match,replace,split）传入参数：/正则表达式/。
先new一个正则表达式对象RegExp，再将其传入String对象的方法（search,match,replace,split）。
先new一个正则表达式对象RegExp，使用RegExp自身的方法。

    //正则的使用
    var str = "wert45678yuiytrew";
    //使用正则匹配子串str中的数字
    console.log(str.match(/[0-9]+/));

    //使用RegExp创建一个正则对象
    var pat = new RegExp("[0-9]+");
    console.log(str.match(pat));
    console.log(pat.exec(str));
    //以上三个返回结果一致：["45678", index: 4, input: "wert45678yuiytrew", groups: undefined]

修饰符

在这里插入图片描述

方括号

方括号用于查找某个范围内的字符：
在这里插入图片描述

元字符

元字符（Metacharacter）是拥有特殊含义的字符：
\w :匹配单词字符，等价于 [a-zA-Z0-9_] 共63个字符（字母数字下划线）。
在这里插入图片描述

量词

在这里插入图片描述

RegExp 对象属性

在这里插入图片描述

RegExp 对象方法

在这里插入图片描述

支持正则表达式的 String 对象的方法

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息登记表</title>
    <style>
        #board{
    
            width: 700px;
            height: 500px;
            border: 1px solid blueviolet;
            background-color:lightblue;

            overflow: hidden;
            position: relative;
        }

        form{
    
            position: absolute;
            left:50px;
            bottom: 30px;
        }

        h1{
    
            position: absolute;
            left:50px;
            top:0px;
        }

        #require{
    
            width: 300px;
            height: 500px;
            
            position: absolute;
            top