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

最新推荐文章于 2023-06-09 23:15:10 发布

辣辣写代码_nanaProgrammer

最新推荐文章于 2023-06-09 23:15:10 发布

阅读量1.4k

点赞数 3

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

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

版权

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

题目
JS正则表达式
代码实现
效果展示

题目

程序猿小明需要为公司员工的个人信息录入编写前端代码,效果如下图。
需求:要保证信息录入格式正确无遗漏(输入有误要给到对应提示)。
使用 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

最低0.47元/天解锁文章

辣辣写代码_nanaProgrammer

关注

3
点赞
踩
30

收藏

觉得还不错? 一键收藏
2
评论
JavaScript+CSS+html【练习题】JS正则表达式验证表单

JavaScript+CSS+html【练习题】JS正则表达式验证表单题目JS正则表达式使用正则的3种方式修饰符方括号元字符量词RegExp 对象属性RegExp 对象方法支持正则表达式的 String 对象的方法代码实现效果展示题目程序猿小明需要为公司员工的个人信息录入编写前端代码,效果如下图。需求:要保证信息录入格式正确无遗漏(输入有误要给到对应提示)。使用 HTML+CSS 布局出如上图所示页面效果；嵌入 JS 代码，添加表单提交和表单项失去焦点等事件处理；在事件处理中按照表单项后面提示的
复制链接

扫一扫