js用户登录页面（使用正则表达式）

最新推荐文章于 2024-04-25 23:56:41 发布
最新推荐文章于 2024-04-25 23:56:41 发布
阅读量2.2k 收藏 14
点赞数 2
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45747808/article/details/102575096
版权

HTML代码

	<!DOCTYPE html>
	<html>
	<head lang="en">
		<meta charset="UTF-8">
		<title></title>
		<script src="verify.js"></script>
		<style type="text/css">
			#div{
   
				margin-top: 40px;
				margin-left: 1800px;
				font-size: 50px;
				height: 40px;
			}
			#btn{
   
				width: 500px;
				height:120px;
				font-size: 40px;
				margin-left:2000px ;
				background-color: #E9E9E9;
				border-radius: 15px;
				border:1px solid #000
			}
			.input{
   
				font-size: 50px;
				width: 500px;
				height: 60px;
				border-radius: 15px;
				border:1px solid #000;
				background: #FCFBF9;
			}
			#body{
   
				background-image: url(timg.jpg);
				background-repeat: no-repeat;
				background-size: cover;
				background-attachment: fixed;
				}
		</style>
	</head>
	<body id="body">
		<br /><br /><br /><br /><br /><br /><br /><br />
		<div id="div">用&nbsp;
最低0.47元/天 解锁文章
白大仙儿
关注
  • 2
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
正则表达式+JS效果
hyt_123456的博客
10-15 253
标题 正则表达式 在这里插入代码片 ```<script src="verify.js"></script> <style type="text/css"> #div{ margin-top: 40px; margin-left: 1800px; font-size: 50px; height: 40px; ...
js登陆表单正则表达式
weixin_45756606的博客
10-27 256
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> </head> &...
JS实现对用户名、密码进行正则表达式判断，按钮绑定多个事件，网页跳转
最新发布
weixin_51621120的博客
04-25 530
目标：使用JS实现对用户名和密码进行正则表达式判断，用户名和密码正确时，进行网页跳转。
js正则表达式，登录验证
weixin_50821119的博客
01-20 828
正则表达式概念 1. 用来验证字符串是否符合规则 2. 从字符串中获取一部分符合规则的内容 创建正则对象 通过new关键字来声明一个正则对象 第一个参数：正则的主体， 字符串 第二个参数 ：修饰符 字符串 i 不区分大小写 g 全局匹配 m 换行匹配 var str = new RegExp("hello","ig"); 2. 字面量创建 var str = /are/i; 正则常用方法 test（） 返回值：布尔值 功能：校验字符串是否复合规则 var str .
JS正则表达式-登陆注册
匿名丶OC
05-15 2473
要求：用户名只能是字母或者数字或者下划线，不能以数字开头，用户名长度在6到20之间 密码两次验证必须一致，用户名密码不能为空。<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" > <title>模拟注册</title>
失去焦点后验证
weixin_45747700的博客
10-15 2025
1…失去焦点后验证 首先设计文本框 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="verify.js"></script> <s...
javascript使用正则表达式实现注册登入校验
10-14
主要为大家详细介绍了javascript使用正则表达式实现注册登入校验，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
如何用javascript正则表达式验证身份证号码是否合法
10-23
在用户注册页面有些需求要求的比较严格，需要对身份证验证是否合法，通过此功能严格此系统软件，从而过滤到很多水客。此篇文章主要是讲解如何用javascript正则表达式验证身份证号码是否合法,需要的朋友可以参考下
使用AJAX（包含正则表达式）验证用户登录的步骤
10-16
本篇文章将详细阐述如何使用AJAX结合正则表达式来实现用户登录验证的步骤。首先，我们需要理解AJAX（Asynchronous JavaScript and XML）的基本原理，它允许我们在不刷新整个页面的情况下与服务器进行异步通信，从而...
js正则实现用户登录注册
赵佳敏的博客
10-11 3395
js正则实现用户登录注册一、效果图二、实现思路三、核心代码 一、效果图 二、实现思路 第一步：分别对帐号、密码、验证码进行验证，先判断账号、密码、验证码的值是否存在，不存在则引出对应error信息。 第二步：如果值存在，使用正则判断值是否符合要求，正确输出信息，不正确输出error的信息。 第三步：设置表单失焦出现对应的error信息，获焦移除当前的error。 第四步：表单提交的时候，按钮进行获焦，如果没有错误信息就进行提交，并且清除所有信息。 三、核心代码 &lt.
使用javascript以及正则表达式实现表单注册登入界面
Forever_Hopeful的博客
07-21 209
JavaScript实现正则表达式验证表单注册登录提交功能 详细步骤注释和效果链接
js登陆验证与注册验证，正则表达式
01-13
基本的一些登陆注册验证，如：长度验证、数字验证、非空、字母等
JavaScript正则表达式验证登录实例
10-15
主要为大家详细介绍了JavaScript正则表达式验证登录实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript 正则表达式验证登录实例
ByRisonBoy
10-07 1609
代码片段： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;qq登录模拟测试&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;form name="f
js项目实战（一）登录界面正则表达式信息验证
qq_45868384的博客
06-09 961
效果展示： 当中使用了鼠标移入移出效果： 正则验证： index.html编写 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/index.css" /> ...
JS正则表达式页面登录校验效果
weixin_45746054的博客
10-15 431
**JS正则表达式页面登录校验效果 代码效果图 校验错误提示 HTML代码展示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </style> </head> <body> ...
JavaScript正则表达式实现注册信息校验
zhansan的博客
05-28 6328
Java和JavaScript正则表达式的对比 Java中也有正则表达式,默认情况下必须要精确匹配 ;而在JS中默认是模糊匹配，只要字符串包含了正则表达式的内容就返回true 正则表达式 匹配字符串 Java中匹配结果 JavaScript中匹配结果 \d{3} a123b false true ^\d{3} 123b false true \d{3}$ a123 false true ^\d{3}$ 123 true true 注册信息校验 需求 在JS中使用正则表达
html正则表达式登录验证,JavaScript正则表达式验证登录实例
weixin_39968852的博客
05-30 270
本文实例为大家分享了js正则表达式验证登录的具体代码，供大家参考，具体内容如下代码片段：qq登录模拟测试function check(){/*非空*/if(form1.username.value==""){alert("账号不能为空");form1.username.focus();return false;}/*含非数字、首字母为0 /^[0-9]*$/*/var number=/^(0|[1...
通过 JavaScript 获取和设置光标在输入框中的位置（兼容 IE 及 Firefox）
orain的专栏
04-19 4245
function getLocation(elm) { if(elm.createTextRange) { // IE var range = document.selection.createRange(); range.setEndPoint('StartToStart', elm.createTextRange()); return range.text
使用js的正则表达式写出登录页面
05-27
以下是一个简单的登录页面，使用了JavaScript的正则表达式来验证用户输入的用户名和密码格式是否符合要求。如果符合要求，则可以提交表单并登录，否则提示用户重新输入。 ```html <!DOCTYPE html> <html> <head> <title>登录页面</title> <script> function validateForm() { var username = document.forms["loginForm"]["username"].value; var password = document.forms["loginForm"]["password"].value; var usernameRegex = /^[a-zA-Z0-9_-]{3,16}$/; var passwordRegex = /^[a-zA-Z0-9_-]{6,18}$/; if (!usernameRegex.test(username)) { alert("用户名格式不正确！请重新输入。"); return false; } if (!passwordRegex.test(password)) { alert("密码格式不正确！请重新输入。"); return false; } } </script> </head> <body> <h2>登录页面</h2> <form name="loginForm" onsubmit="return validateForm()" method="post"> <label>用户名:</label> <input type="text" name="username" required><br><br> <label>密码:</label> <input type="password" name="password" required><br><br> <input type="submit" value="登录"> </form> </body> </html> ``` 在上述代码中，正则表达式`/^[a-zA-Z0-9_-]{3,16}$/`用于验证用户名。该正则表达式表示用户名必须由3-16位的字母、数字、下划线或短横线组成。 正则表达式`/^[a-zA-Z0-9_-]{6,18}$/`用于验证密码。该正则表达式表示密码必须由6-18位的字母、数字、下划线或短横线组成。 在`validateForm`函数中，获取了用户输入的用户名和密码，并使用`test`方法对其进行正则表达式匹配。如果匹配成功，则返回`true`，表示表单可以提交；否则返回`false`，并通过`alert`方法提示用户重新输入。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值