测试有效的js作业之正则

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量76 收藏
点赞数
分类专栏： js作业 文章标签： javascript 正则表达式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k2460761639/article/details/107576012
版权
  1. 表单
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {

            color: red;
        }
    </style>
</head>

<body>
    <form action="">
        用户名<input type="text">
        <span></span><br />
        邮箱<input type="text">
        <span></span><br />
        密码<input type="text">
        <span></span><br />
        确认密码 <input type="text">
        <span></span><br />
        手机号<input type="text">
        <span></span>
        <br>
        身份证<input type="text">
        <span></span>
        <br>
        邮政编码<input type="text">
        <span></span>
        <br>
        <!-- 文件格式监测<input type="text">
        <span></span>
        <br> -->
        字符串首尾去空格。<input type="text">
        <span></span>
        <br>
        汉字<input type="text">
        <span></span>
        <br>
        最大，最小值<input type="text">
        <span></span>
        <br>
        最短，最长值<input type="text">
        <span></span>
        <br>

        <input type="button" value="提交" id="btn">
        <span></span>
        <br>

    </form>
    <script>
        /*  思路：1.先在body里建几个input表单
         2.先设定一开始未输入是不合法的
         let isUserName = false;
                 let isMail = false;
                 let isPassword = false;
                 let isConfirmPassword = false; 
         3.获取提交按钮和和输入框的选择器
         4.获取输入框的值，用正则去判断
           let str = ipts[0].value;
                     console.log(str)
                     let userNameReg = /^[a-z0-9]{1,18}$/
         5.判断测试是否通过并显示对应结果
         6.循环第四五步
         7.判断按钮能否被点击*/

        // 先设定一开始未输入是不合法的

        let isUserName = false;
        let isMail = false;
        let isPassword = false;
        let isConfirmPassword = false;
        let isTel = false;
        let isId = false;
        let isPostalcode = false;
        /* let isImg = false; */
        let isString = false;
        let isChinese = false;
        let isMin = false;
        let isLength = false;

// 获取元素
        let btn = document.querySelector('#btn');
        let ipts = document.querySelectorAll('input');


        // 用户名
        ipts[0].oninput = function () {
            //获取输入框的值 用正则去判断
            let str = this.value;
            console.log(str)
            // 只能以字母开头，6-16位数字和下划线组成
            let Reg = /^[A-z]\w{6,16}$/;
            //    判断输入框的值，假设正确，那么
            // 判断是否匹配正则的值，若配，则布尔值为true
            if (Reg.test(this.value)) {
                isUserName = true;
                //    body里的span用来显示下列的提示文字
                this.nextElementSibling.innerHTML = '&nbsp;&nbsp;*格式正确&nbsp;&nbsp;'
            } else {
                isUserName = false;
                //    不对则显示下列提示
                this.nextElementSibling.innerHTML = '&nbsp;&nbsp;*只能以字母开头，6-16位数字和下划线组成&nbsp;&nbsp;'
            }
            //设置用户名不能为空
            check()//效果等于isNull()
        }

        // 邮箱
        ipts[1].oninput = function () {
            //获取输入框的值 用正则去判断
            let str = this.value;
            console.log(str)
            let mailReg = /^\w+[-+.]*\w*@([a-z0-9A-Z\u2E80-\u9FFF]-?)+(\.\w{2,6})+/
            if (mailReg.test(str)) {
                // 测试通过
                isMail = true
                this.nextElementSibling.innerHTML = '&nbsp;&nbsp;*格式正确&nbsp;&nbsp'
            } else {
                // 测试不通过
                isMail = false
                this.nextElementSibling.innerHTML = '&nbsp;&nbsp;*请输入规则的电子邮箱&nbsp;&nbsp'
            }
            console.log(isMail)
            check()
        }

        // 密码
        ipts[2].oninput = function () {
            //获取输入框的值 用正则去判断
            let str = this.value;
            console.log(str)
            let pdReg = /^.{6,}$/
            if (pdReg.test(str)) {
                // 测试通过
                isPassword = true
                this.nextElementSibling.innerHTML = '&nbsp;&nbsp;*格式正确&nbsp;&nbsp'
            } else {
                // 测试不通过
                isPassword = false
                this.nextElementSibling.innerHTML = '&nbsp;&nbsp;*除了换行符之外的6-16位字符&nbsp;&nbsp;'
            }
            console.log(isPassword)
            check()
        }

        //  确认密码            
        ipts[3].oninput = function () {
            //获取输入框的值 用正则去判断
            let str = this.value;
            console.log(str)
            let cpdReg = /^.{6,}$/
            // 设置现在的值等于上一个密码的值
            if (cpdReg.test(str) && this.value == ipts[2].value) {
                // 测试通过
                isConfirmPassword = true
                this.nextElementSibling.innerHTML = '&nbsp;&nbsp;*格式正确&nbsp;&nbsp'
            } else {
                // 测试不通过
                isConfirmPassword = false
                this.nextElementSibling.innerHTML = '&nbsp;&nbsp;*两次密码输入不一致&nbsp;&nbsp;'
            }
            console.log(isConfirmPassword)

            check()
        }

        // 手机号
        ipts[4].oninput = function () {
            let str = this.value;
            console.log(str)
            let Reg = /^1[345789]\d{9}$/;
            if (Reg.test(this.value)) {
                isTel = true;
                this.nextElementSibling.innerHTML = '&nbsp;&nbsp;*格式正确&nbsp;&nbsp;';
            } else {
                isTel = false;
                this.nextElementSibling.innerHTML = '&nbsp;&nbsp;*请输入有效的手机号码&nbsp;&nbsp;';
            }
            // 手机号不能为空
            check();
        };
        // 身份证号
        ipts[5].oninput = function () {
            let str = this.value;
            console.log(str)
     let Reg = /^\d{17}(\d|x)$/; 
            if (Reg.test(this.value)) {
                isId = true;
                this.nextElementSibling.innerHTML = '&nbsp;&nbsp;格式正确&nbsp;&nbsp;';
            } else {
                isId = false;
                this.nextElementSibling.innerHTML = '&nbsp;&nbsp;请输入有效的身份证号&nbsp;&nbsp;';
            }

            check();
        };
        // 邮政编码检测           
        ipts[6].oninput = function () {
            let str = this.value;
            console.log(str)
            let Reg = /^\d{6}$/
            if (Reg.test(this.value)) {
                isPostalcode = true;
                this.nextElementSibling.innerHTML = '&nbsp;&nbsp;格式正确&nbsp;&nbsp;';
            } else {
                isPostalcode = false;
                this.nextElementSibling.innerHTML = '&nbsp;&nbsp;请输入有效的邮政编码号&nbsp;&nbsp;';
            }

            check();
        };
      



        // 字符串首尾去空格。
        ipts[7].oninput = function () {
            let str = this.value;
            console.log(str)
            let Reg = /^\s+|\s+$/g;

            if (Reg.test(this.value)) {
               
                isString = true;
                this.nextElementSibling.innerHTML = '&nbsp;&nbsp;*格式正确&nbsp;&nbsp;';
            } else {
                isString = false;
                this.nextElementSibling.innerHTML = '&nbsp;&nbsp;请输入有效的字符串号&nbsp;&nbsp;';
            }

            check();
        };
        /* 中文监测
unicode编码中文监测*/
        ipts[8].oninput = function () {
            let str = this.value;
            console.log(str)
            let Reg = /^[\u2E80-\u9FFF]+$/

            if (Reg.test(this.value)) {
                isChinese = true;
                this.nextElementSibling.innerHTML = '&nbsp;&nbsp;*格式正确&nbsp;&nbsp;';
            } else {
                isChinese = false;
                this.nextElementSibling.innerHTML = '&nbsp;&nbsp;请输入汉字&nbsp;&nbsp;';
            }

            check();
        };
        //  最大，最小值
        ipts[9].oninput = function () {
                // this value原来是个字符串，需要转为数字
                let str = Number(this.value);
                console.log(str)
            //    在if里判断数字大于零且小于等于15
                if (str>0 && str<=15) {
                 isMin = true;
                    this.nextElementSibling.innerHTML = '&nbsp;&nbsp;*格式正确&nbsp;&nbsp;';
                  
                } else {              
                    isMin = false;
                    this.nextElementSibling.innerHTML = '&nbsp;&nbsp;请输入1-15的值&nbsp;&nbsp;';
                }
                check();//效果等于isNull()   
            };
        //最大，最小长度
        ipts[10].oninput = function () {
            let str = this.value;
            console.log(str)
            let Reg = /^\d{1,6}$/
            if (Reg.test(this.value)) {
                isLength = true;
                this.nextElementSibling.innerHTML = '&nbsp;&nbsp;*格式正确&nbsp;&nbsp;';
            } else {
                isLength = false;
                this.nextElementSibling.innerHTML = '&nbsp;&nbsp;*请输入1-6的长度值&nbsp;&nbsp;';
            }
            check();
        };
          // 文件格式监测
        /*  ipts[11].oninput = function () {
             let str = this.value;
             console.log(str)
             let Reg = /^.+\.(jpeg|png|gif|jpg)$/
             if (Reg.test(this.value)) {
                 isimg = true;
                 this.nextElementSibling.innerHTML = '&nbsp;&nbsp;*格式正确&nbsp;&nbsp;';
             } else {
                 isimg = false;
                 this.nextElementSibling.innerHTML = '&nbsp;&nbsp;*请输入有效的文件格式证号&nbsp;&nbsp;';
             }
             check();
         }; */


        // 新建一个函数，全部输入正确可以点击提交按钮，否则不能
        function check() {
            console.log(isUserName , isMail , isPassword , isConfirmPassword ,
                isTel , isId  ,isPostalcode , isString, isChinese,isMin , isLength)
            if (isUserName && isMail && isPassword && isConfirmPassword &&
                isTel && isId && isPostalcode && isString && isChinese && isMin && isLength) {
                btn.disabled = false
                console.log(111)
            } else {
                btn.disabled = true
            }
        }
        check()



// 全部输入正确可以提交，否则不能
        /*  btn.onclick = function () {
              if (isUserName && isMail && isPassword && isConfirmPassword &&
                isTel && isId && isPostalcode && isString && isChinese && isMin && isLength)
                 {
                  console.log('可以提交注册')
               
              } else {
                  console.log('不可以提交注册')
              }
          }  */

// check（）不加他会导致对应的input文本框不填也可提交




    </script>
</body>

</html>
k2460761639
关注
专栏目录
Python 接口并发测试详解
悦分享
10-23 6971
性能测试是通过自动化测试工具模拟多种正常、峰值及异常负载条件对系统的各项性能指标进行的测试。负载测试和压力测试都属于性能测试，两者可以结合进行。通过负载测试，确定在各种工作负载下系统的性能，目标是测试当负载逐渐增加时，系统各项性能指标的变化情况。压力测试是通过确定一个系统的瓶颈或者不能接受的性能点，来获得系统能提供的最大服务级别的测试。性能测试的重点是测试在并发条件下服务或系统的瓶颈所在，从而优化相关功能，可能涉及软件及硬件的多方面改进。由此可见，性能测试对整个产品非常重要，甚至可以决定一个产品是否能长久发
用js写一个正则表达式，校验邮箱是否有效
weixin_42609225的博客
01-05 471
下面是 JavaScript 中使用正则表达式校验邮箱是否有效的代码示例： function validateEmail(email) { // 邮箱的正则表达式 const emailRegex = /^[a-zA-Z0-9.!#$%&amp;'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a...
（黑马程序员）JavaScript DOM和BOM第七天学习笔记之正则表达式
LuShanGuoQiLin的博客
08-26 149
（黑马程序员）JavaScript DOM和BOM第七天学习笔记之正则表达式
JS正则
samfung09的博客
09-14 562
创建方式 创建方式有两种 //字面量方式，两个斜杠包起来一些正则元字符 let reg = /\d+/g; //构造函数方式，注意斜杠转义 let reg = new RegExp("\\d+", "g"); 两种创建方式的区别 1、构造函数方式要特别注意反斜杠转义，因为在字符串中 \ 本来就特殊，比如你想输出"\" let str1 = '\' //会报错 let str2 ...
学习笔记 - js - 正则
ABU_ablm的博客
08-14 166
// 正则表达式在js中的使用// 1. 利用 RegExp对象来创建 正则表达式// 2. 利用字面量创建 正则表达式// 3.test 方法用来检测字符串是否符合正则表达式要求的规范// true// false// 边界符 ^ $// 正则表达式里面不需要加引号 不管是数字型还是字符串型// /abc/ 只要包含有abc这个字符串返回的都是true// true// true// true// 开头前三字符要求必须是 abc字符串才符合规范。.........
Windows编程技术博客之正则表达式
Lone奔跑者的博客
06-25 1290
由于我已经在本学期的两门课的实践中（java聊天室数据库部分和Qt）遇到了正则表达式，所以一听说Windows编程要写技术博客，我立刻想到的是正则表达式和之前提到过的责任链（另外本想如果时间充裕再写两篇的话估计就是宏以及Qt各种方面应用的深入研究，我相信我以后也会再回过头研究一下Qt的，毕竟Qt在很多领域都有应用的，就像我们的实验大作业一样），于是乎我找了一些资料加上自己的理解，力求将所写的每一个...
正则表达式(学习的好资料)
03-20
好东西 都是好东西咧 里面包括 C#中的常用正则表达式总结 javascript 验证url的正则表达式 JavaScript中的正则...JS与正则式强化训练作业 经典正则表达式 正则表达式--递归匹配与非贪婪匹配 正则式测试工具 等等等等
java作业管理系统设计(源代码+论文)
12-21
Java作业管理系统设计是一种基于Java编程语言的软件应用，旨在帮助教育机构、教师和学生更有效地管理作业流程。这个系统通常包含一系列功能，如作业发布、提交、批改、反馈以及成绩记录。以下是对该系统设计可能涉及...
测试面试之数据库
Dave0002的博客
07-19 619
测试面试之Mysql
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 869
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 575
【代码】【JavaScript】LeetCode：707设计链表。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 461
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 890
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
JavaScript基础
zhangh040629的博客
09-10 1320
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 275
动态在本地引入图片
JS的输出语句
J3259392566的博客
09-13 219
js中严格区分大小写。
八十多种证件识别接口-JavaScript身份证识别API示例-护照识别-户口页识别
weixin_41711744的博客
09-12 621
证件识别API包含了身份证识别、护照识别、户口页识别、港澳台来往通行证识别等八十多种证件识别类型，提供了快速、精准的证件信息提取功能，广泛应用于实名认证 、机场出入口等场景。身份证识别API常用于在线支付、金融服务、酒店入住等需要进行实名认证和提取身份信息的场景。在这些场景中，通过快速识别和验证身份证信息，可以有效提高处理速度，减少人为错误，增强安全性。八十多种证件识别接口提供了一种高效、精准的识别方式来读取各类证件信息，通过合理应用这些技术，可以大幅提升用户体验和企业运营效率。
《实现 HTML 图片轮播效果》
qq_69304031的博客
09-11 732
在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。
WebRegExp正则表达式测试工具实现源码
"WebRegExp是一个在线正则表达式测试工具，提供友好的用户界面，方便开发者测试和验证正则表达式。网页样式包括背景色、字体大小、元素位置和边框样式等设置，以创建一个清晰易用的工作环境。" 在正则表达式的世界...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值