js登陆表单正则表达式

最新推荐文章于 2021-06-09 19:17:30 发布
最新推荐文章于 2021-06-09 19:17:30 发布
阅读量255 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45756606/article/details/102773179
版权

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
</head>

<body>
<table border="1" cellspacing="0" cellpadding="0" align="center">
    <tr>
        <td>用户名:</td>
        <td><input type="text" id="username" onblur="fun(this.id)"><span></span></td>
    </tr>
    <tr>
        <td>密码:</td>
        <td><input type="password" id="pwd" onblur="fun(this.id)"><span></span></td>
    </tr>
    <tr>
        <td>确认密码:</td>
        <td><input type="password" id="pwds" onblur="fun(this.id)"><span></span></td>
    </tr>
    <tr>
        <td>邮箱:</td>
        <td><input type="text" id="mailbox" onblur="fun(this.id)"><span></span></td>
    </tr>
    <tr>
        <td>手机号:</td>
        <td><input type="text" id="cpn" onblur="fun(this.id)"><span></span></td>
    </tr>
    <tr>
        <td>身份证号:</td>
        <td><input type="text" id="IDnumber" onblur="fun(this.id)"><span></span></td>
    </tr>
    <tr>
        <td>地址:</td>
        <td><input type="text" id="site" onblur="fun(this.id)"><span></span></td>
    </tr>
    <tr>
        <td colspan="2" align="center"><input type="button" value="登录" id="btn"></td>
    </tr>
</table>
<script>
    // 获取 span 元素
    var s = document.getElementsByTagName("span");

    // 定义正则表达式
    var rs0 = /^[A-Z][A-z]{5,19}$/;					// 大写字母开头不能有数字,符号只能出现下划线最少6位最多20位
    var rs1 = /^[A-Z][A-z0-9\.]{7,14}$/;			// 大写字母开头最少8位做多15位
    var rs2 = /^[A-Z][A-z0-9\.]{7,14}$/;			// 大写字母开头最少8位做多15位	并且要与上面的密码一致
    var rs3 = /^[A-z0-9]+@[A-z0-9]+\.[a-z]{1,3}$/;	// 邮箱格式 2027206634@qq.com   wang13754545.@163.cn
    var rs4 = /^1[345678]{2}[0-9]{8}$/;				// 第一位只能是1后两位只能是345678剩下的是数字	共可输入11位数字
    var rs5 = /^[1-9][0-9]{16}[A-Z0-9]$/;			// 第一位不能为0最后一位只能是数字和大写字母  共可输入 18位
    var rs6 = /^[\u4e00-\u9fa5]+$/;					// 只能是中文

    // 当输入框失去焦点时调用该方法验证用户输入格式是否正确
    function fun(name) {
        switch (name){
            case "username":
                // 1.用户名
                span(name,rs0,s[0]);
                break;
            case "pwd":
                // 2.密码
                span(name,rs1,s[1]);
                break;
            case "pwds":
                // 3.确认密码
                // 先判断格式是否正确   在判断是否与密码相同
                span(name,rs2,s[2]);
                if (document.getElementById("pwd").value == document.getElementById("pwds").value && document.getElementById("pwds").value != "") {
                    s[2].style.color = "green";
                    s[2].innerHTML = " ✔";
                } else {
                    s[2].style.color = "red";
                    s[2].innerHTML = " ✘";
                }
                break;
            case "mailbox":
                // 4.邮箱
                // 2027206634@qq.com   wang13754545.@163.cn
                span(name,rs3,s[3]);
                break;
            case "cpn":
                // 5.手机号
                span(name,rs4,s[4]);
                break;
            case "IDnumber":
                // 6.身份证号
                span(name,rs5,s[5]);
                break;
            case "site":
                // 7.地址
                span(name,rs6,s[6]);
                break;
        }

        /**
         * 判断提交
         * 当所有输入框符合格式后才能提交
         * @param {Object} name
         * @param {Object} rs
         * @param {Object} span
         */
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function(){
            if(s[0].innerHTML == " ✔" && s[1].innerHTML == " ✔" && s[2].innerHTML == " ✔" &&
                s[3].innerHTML == " ✔" && s[4].innerHTML == " ✔" && s[5].innerHTML == " ✔" && s[6].innerHTML == " ✔"){
                var name = document.getElementById("username").value;
                document.write(name + "欢迎您！");
            }else{
                alert("格式输入有误或未输入,请再次确认!");
            }
        }

        /**
         * 定义一个方法 通过传入每个输入框对应的id名 和对应的正则表达式 来设置span加内容
         * @param obj
         */
        function span(name,rs,span) {
            var id = document.getElementById(name).value;
            if (rs.test(id)) {
                span.style.color = "green";
                span.innerHTML = " ✔";
            } else {
                span.style.color = "red";
                span.innerHTML = " ✘";
            }
        }
    }
</script>
</body>
</html>

在这里插入图片描述

今晚月亮也睡了
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
正则表达式+JS效果
hyt_123456的博客
10-15 252
标题 正则表达式 在这里插入代码片 ```<script src="verify.js"></script> <style type="text/css"> #div{ margin-top: 40px; margin-left: 1800px; font-size: 50px; height: 40px; ...
失去焦点后验证
weixin_45747700的博客
10-15 2022
1…失去焦点后验证 首先设计文本框 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="verify.js"></script> <s...
JavaScript中登录名的正则表达式及解析(0基础)
weixin_34060741的博客
03-09 103
简言 在JavaScript中，经常会用到正则表达式来进行模式匹配。例如，登录名验证，密码强度验证，字符串查找或替换等操作。现在就开始吧，零基础写出你的第一个正则表达式！ 在做用户注册时，都会用到登录名正则校验。要写出正确的正则表达式，先要定义表达式规则。假设登录名做如下规则定义： 最短4位，最长16位 {4,16} 可以包含小写大母...
js正则表达式，登录验证
weixin_50821119的博客
01-20 800
正则表达式概念 1. 用来验证字符串是否符合规则 2. 从字符串中获取一部分符合规则的内容 创建正则对象 通过new关键字来声明一个正则对象 第一个参数：正则的主体， 字符串 第二个参数 ：修饰符 字符串 i 不区分大小写 g 全局匹配 m 换行匹配 var str = new RegExp("hello","ig"); 2. 字面量创建 var str = /are/i; 正则常用方法 test（） 返回值：布尔值 功能：校验字符串是否复合规则 var str .
js登陆验证与注册验证，正则表达式
01-13
基本的一些登陆注册验证，如：长度验证、数字验证、非空、字母等
JavaScript 表单验证正则表达式大全[推荐]
12-12
具体和函数结合的使用方法，还请查看下篇文章 JavaScript 使用正则表达式进行表单验证的示例代码 代码如下:匹配中文字符的正则表达式： [u4e00-u9fa5] 评注：匹配中文还真是个头疼的事，有了这个表达式就好办了 匹配...
js动态拼接正则表达式的两种方法
12-02
方法一： 做项目的时候可能会遇到用js验证表单输入正确性的需求，这时候就需要用到js的正则表达式。举个例子：比如说要验证月份，格式为：’yyyy-MM’，这个正则表达式写起来很简单，实在写不出，也可以Google、百度...
JavaScript通过正则表达式实现表单验证电话号码
12-01
JavaScript表单验证电话号码，判断一个输入量是否为电话号码，通过正则表达式实现。 代码如下: //检查电话号码 function isTel(str){ var reg=/^([0-9]|[\-])+$/g ; if(str.length18){ return false; } else{ return...
js正则表达式表单验证小案例
12-24
js正则表达式表单验证小案例
登录表单验证用到正则表达式
weixin_47847184的博客
06-06 64
登录表单验证用到正则表达式 表单验证
JavaScript正则表达式验证登录实例
10-15
主要为大家详细介绍了JavaScript正则表达式验证登录实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用户名、密码等15个常用的js正则表达式
10-19
给大家收集整理了用户名和密码等15个常用的js正则表达式，需要的朋友参考下吧
JS正则表达式验证登录表单
Mr_hanghang的博客
10-24 1197
使用正则表达式判断登录是否符合格式 效果图如下： 如图，使用正确的格式会报正确，格式不符合则报错误 下面是代码 HMTL代码 <div>用户名：<input type="text" id="userName"/><span id="userNameReg"></span></div> <div>密码：<input t...
JS正则表达式页面登录校验效果
weixin_45746054的博客
10-15 429
**JS正则表达式页面登录校验效果 代码效果图 校验错误提示 HTML代码展示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </style> </head> <body> ...
js正则表达式登录验证，并添加表单
key1haha_的博客
10-16 301
1.当每个输入框失去焦点后就做校验 2.只有所有正则表达式都通过验证才可以提交表单 话不多说 上图 <form action=ke; onsubmit="return (trueName()+truePwd()+trueConfirmPwd()+trueEmail()+truePhone()+trueEID()+trueAddress())==7"> <table alig...
前端学习之JS+正则表达式（写一个简单的注册页面）
前端水獭的博客
06-18 3977
注册页面 在日常生活中我们常常需要在各种软件中注册账号信息。包括社交软件，游戏等等。他们对于账号密码的需求也大不一样。有的较为官方的软件机构网址等需要比较复杂的账号密码，而有的则比较宽松。我们知道注册页面其实就是一个表单，用户填写完表单后提交然后注册。 正则表达式 那么如何让用户按照程序猿规定的规则进行注册呢？一般会用到正则表达式，正则表达式在百度百科上是这样介绍：正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概
自学web前端练手——js正则表达式实现表单验证
lvshaoshishang的博客
03-14 421
利用正则表达式来判断用户名是否“由字母、数字、下划线组成，字母开头，限制在4-16位”；判断密码是否“由4-16位字符组成”。 为了保护密码隐私性故令密码input的type=“password”，使输入的密码不可见。 效果如下： 若成功验证则向123.php发送数据。 代码如下： <!DOCTYPE html> <html lang="en"> <head&gt...
js项目实战（一）登录界面正则表达式信息验证
qq_45868384的博客
06-09 943
效果展示： 当中使用了鼠标移入移出效果： 正则验证： index.html编写 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/index.css" /> ...
表单提交后台正则表达式验证
Murphy的博客
10-09 775
package com.smartdot.dcu;import java.util.regex.Matcher; import java.util.regex.Pattern;public class ValidUtil { /** * 验证字符串的长度 * * @param str * @param l * @return */
js表单验证正则表达式
最新发布
06-10
好的，下面是一些常见的 JavaScript 正则表达式示例，可用于表单验证： 1. 验证手机号码： ``` /^(13|14|15|16|17|18|19)[0-9]{9}$/ ``` 2. 验证邮箱地址： ``` /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ ``` 3. 验证身份证号码： ``` /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/ ``` 4. 验证密码强度（包含大小写字母、数字和特殊字符，长度在8-16位之间）： ``` /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#@$!%*?&])[A-Za-z\d@$!%*?&]{8,16}$/ ``` 以上仅是一些常见的示例，具体的正则表达式根据需求而定。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值