设计一个用户注册页面，对用户输入的内容进行有效性验证，如用户名和密码不能为空，两次输入的密码必须相同，邮箱地址必须包含“@”符号等。

最新推荐文章于 2024-05-31 19:51:27 发布
最新推荐文章于 2024-05-31 19:51:27 发布
阅读量2.5k 收藏 30
点赞数 3
分类专栏： JavaScript HTML 文章标签： javascript 编程实例 HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54158068/article/details/124700610
版权

代码实现（代码中已注释）

<html>
<head>
    <script language="javascript">
        function checkform() {
            if (document.login.userid.value == "") {
                alert("请输入用户名");
                document.login.userid.focus();
                return;
            }
            if (document.login.userkey1.value == "") {
                alert("请输入密码");
                document.login.userkey1.focus();
                return;
            }
            if (document.login.userkey1.value != document.login.userkey2.value) {
                alert("两个密码不一致");
                document.login.userkey1.focus();
                return;
            }
            if (email_str = document.login.email.value.indexOf("@") == -1) {
                alert("电子邮件格式不正确");
                document.login.email.focus();
                return;
            }
            alert("验证都已通过");
        }

    </script>
</head>
<body>
    <form id="login" name="login">
        <table border="1" cellspacing="0" cellpadding="3" width="380">
            <tr><td colspan="2" class="td1"><center>用户注册</center></td></tr>
            <tr><td width="289" class="td2">用户名：</td>
                <td width="295" class="td2"><input type="text" id="userid" /></td>
            </tr>
            <tr><td class="td2">密码：</td>
                <td class="td2"><input type="password" id="userkey1" /></td>
            </tr>
            <tr><td class="td2">重复密码：</td>
                <td class="td2"><input type="password" id="userkey2" /></td>
            </tr>
            <tr><td class="td2">性别：</td>
                <td class="td2"><input type="radio" id="sex" value="radiobutton"/>男
                <input type="radio" id="Radio1" value="radiobutton"/>女</td>
            </tr>
            <tr><td class="td2">电子邮箱：</td>
                <td class="td2"><input type="text" id="email" /></td>
            </tr>
            <tr><td colspan="2" class="td3"><div align="center">
            <input id="Button1" type="button" value="提交" onclick="javascript:checkform()" /><input type="reset" id="Sumbit2" value="全部重填" />
            </div></td>
            </tr>
        </table>
    </form>
</body>
</html>

运行结果

 

等日出看彩虹
关注
  • 3
    点赞
  • 踩
  • 30
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
用户登陆界面设计，包括用户名及密码的输入
03-01
用户登录界面设计是任何应用程序或网站的核心组成部分，它为用户提供了一个安全的身份验证入口。这个界面通常包含两个主要元素：用户名/邮箱字段和密码输入框，有时还会包括记住我选项、忘记密码链接以及注册新账户...
jquery表单验证代码百度注册页面表单验证
11-11
4. 一致性验证：当有确认密码字段时，确保两次输入的密码一致。 ```javascript if (password !== confirmPassword) { // 显示错误信息 } ``` 5. 唯一性验证：通常通过Ajax异步请求服务器，检查用户名或邮箱...
JavaScript7——表单基本验证技术
m0_47887988的博客
03-26 1812
10.1 验证休闲网登录页面 <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>休闲网登录页面</title> <link href="login.css" rel="stylesheet" style="text/css"> <script type="texxt/jav...
制作一个登录页面，运用正则表达式编写校验功能：要求输入的用户名和密码不能为空，用户名8位以上的字母组成，密码6位数字。
aigo_2021的博客
05-05 4145
制作一个登录页面，运用正则表达式编写校验功能：要求输入的用户名和密码不能为空，用户名8位以上的字母组成，密码6位数字。 代码展示： <!doctype html> <html lang="en"> <head> <title>Document</title> <script> function loginOnclick(){ var username=document.getElementById("userna.
软件测试复习题带答案
最新发布
Meteors.的博客
05-31 1142
一些搜索的比较好的的软件测试复习资源
注册页面及验证
dunyanan1的专栏
10-17 707
用户名：  只能输入英文、数字、空格 口令: 确认口令 : 性别 :男 女 邮箱 : 照片 : 电话 : 生日 : 爱好 : 自我爱好 :   function check_fr
表单校验。
weixin_44637905的博客
03-30 272
1、表单选择器 :text案例 当加了下面代码以后 <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ // $(":input").css("background-color","#D32C47"); $(":te
编程实现该功能，程序运行时输入注册的用户名、密码、确认密码和邮箱，如果输入信息符合要求，则提示注册成功，否则显示相应的错误提示信息
qczfbb的博客
05-28 8276
题目要求： 新浪微博在用户注册时，要求用户名不得少于5个字符，密码不得少于6个字符，且两次输入的密码必须一致，注册邮箱有效。 请编程实现该功能，程序运行时输入注册的用户名、密码、确认密码和邮箱，如果输入信息符合要求，则提示注册成功，否则显示相应的错误提示信息（如用户名少于5个字符、输入的两次密码不一致等等）。 注：注册邮箱是否有效，可以通过发送激活邮件来完成，目前我们还做不到这一点，暂时先检查邮箱名是否正确。 简单的判断规则：（1）至少包含符号‘@’和‘.’，（2）‘@’在‘.’之前，（3）‘@’不是第一个
蓝色大气账号密码登录和手机号码验证登录切换页面模板
07-12
用户输入手机号后，系统通过短信或验证码应用发送一次性密码（OTP），用户需在规定时间内输入此密码以完成验证。这种方式可以有效防止恶意攻击，因为攻击者需要获取用户的手机才能登录。在设计时，要考虑验证码的...
原生JS静态企业官网(登入注册对输入内容进行判断）
06-14
在这个过程中，对用户输入内容进行判断是至关重要的，它确保了数据的有效性和安全性。以下是对这个主题的详细探讨。 首先，我们来理解JavaScript的基础。JavaScript是一种广泛使用的客户端脚本语言，它在浏览器端...
Python模拟用户登录验证
09-21
这一过程涉及到用户信息的存储、验证以及安全性措施，如密码重试限制和黑名单机制。以下是对这一主题的详细阐述： 1. **功能简介**： - 用户名输入：程序首先要求用户输入他们的用户名。 - 黑名单检测：在用户...
Java开发一个登陆窗体,包括用户名,密码以及提交按钮和重置按钮,当用户输入amy,密码123456,弹出登陆成功提示对话框
丶遇见
11-18 2万+
java开发用户登陆窗体 package javagame; /** 本次项目采用网格布局管理器实现 */ import java.awt.Container; import java.awt.GridLayout; import java.awt.event.ActionListener; import java.awt.event.ActionEvent; import javax.swi...
编写一个JSP页面，将用户名和密码存放到会话中（假设用户名为“孤独求败”，密码为“123456”），再重新定向到另一个JSP页面，将会话中存放的用户名和密码显示出来。
m0_62404144的博客
05-20 3309
实战内容： 编写一个JSP页面，将用户名和密码存放到会话中（假设用户名为“孤独求败”，密码为“123456”），再重新定向到另一个JSP页面，将会话中存放的用户名和密码显示出来。（提示：使用response对象的sendRedirect()方法进行重定向） <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title<
c语言注册登录程序字符串,C语言实现注册
weixin_39896617的博客
05-17 308
得分:25 #include#include#include#include#define N 100struct user{int user_id;char user_name[19];//最大18位char password[13];//最大13位char like[255];char sign[255];};/** 验证用户名长度是否合法*/int length_user_name(c...
用户注册页面的设计与实现
YQEMMMM的博客
10-21 2万+
用户注册页面的设计与实现 功能介绍： 1.使用HTML5表单技术实现用户注册页面，要求用户可以输入用户名、密码、真实姓名和电子邮箱等信息进行注册。 2.验证要求：每个输入栏目的文本框均需要显示提示信息。用户在点击按钮提交注册信息时可以验证所有栏目均为必填项以及电子邮箱的有效性。 实现效果图： 一、界面设计 1.使用<div>划分区域 2.使用CSS外部样式表定义样式 1）reg.css 2）关键属性：box-shadow: 10px 10px 15px black; 二、表单设计 1.使用&l
c语言完成： 已知电子邮件地址的合法格式为“用户名@邮件系统服务器域名”，如zhangsan@cqupt.edu.cn，zhangsan是用户名，cqup.edu.cn是重庆邮电大学电子邮件服务系统的...
weixin_35757531的博客
01-05 943
在 C 语言中，你可以使用 strchr 函数来查找在一个字符串中某个字符的位置。可以使用这个函数来查找电子邮件地址中的 '@' 字符。然后，你可以使用 strrchr 函数来查找在这个字符串中最后一个 '.' 字符的位置。 下面是一个示例代码： #include <stdio.h> #include <string.h> int check_email(const ch...
c语言编写邮箱注册登录的程序,c语言实现邮箱地址验证
weixin_36473056的博客
05-18 1249
rfc中是这样定义邮箱格式的：address = mailbox ; one addressee/ group ; named listgroup = phrase ":" [#mailbox] ";"mailbox = addr-spec ...
C语言（C&C++程序设计基础， 电子科技大学MOOC）
金色的省略号
10-07 1672
一、编程作业 1、在屏幕上输出“hello! welcome to computer world!” 提示： 注意所有符号都是英文，最后没有回车。 将要求输出字符串之外的所有printf或者cout的输出全部删除 将return 0;之前的getchar();或者system("pause");等暂停程序运行的输出都删除。 提交之前先在自己的开发环境下运行成功再拷贝到作业区提...
jsp页面判断登入输入的用户名和密码不能为空
热门推荐
blue_yun的专栏
12-13 3万+
在body里面插入javascript脚本，编写一个判断函数，在需要的地方调用此函数 function check(){ var flag = true; var admin = document.getElementById("adminname").value; var password = document.getElementById("p
设计完成一个简单的用户注册页面，并使用 JavaScript 脚本对用户的各项输入进行有效性验 证。当出现错误时在输入项的右边标签内用红色加粗方式显示错误信息。
03-25
A： 以下是一个简单的用户注册页面的HTML代码： ``` <!DOCTYPE HTML> <html> <head> <title>用户注册页面</title> <meta charset="UTF-8"> <script type="text/javascript"> function validateForm(){ var username = document.forms["myForm"]["username"].value; var email = document.forms["myForm"]["email"].value; var password = document.forms["myForm"]["password"].value; var confirm_password = document.forms["myForm"]["confirm_password"].value; // 用户名不能为空 if (username == "") { document.getElementById("username_error").innerHTML = "* 用户名不能为空"; return false; } // 邮箱格式验证 var email_regex = /\S+@\S+\.\S+/; if (!email_regex.test(email)) { document.getElementById("email_error").innerHTML = "* 请输入有效的电子邮箱地址"; return false; } // 密码不能为空并且长度必须在6至20之间 if (password == "") { document.getElementById("password_error").innerHTML = "* 密码不能为空"; return false; } else if (password.length < 6 || password.length > 20) { document.getElementById("password_error").innerHTML = "* 密码长度必须在6至20之间"; return false; } // 确认密码必须与密码相同 if (confirm_password == "") { document.getElementById("confirm_password_error").innerHTML = "* 请确认密码"; return false; } else if (confirm_password != password) { document.getElementById("confirm_password_error").innerHTML = "* 两次输入的密码不一致"; return false; } } </script> </head> <body> <h1>用户注册页面</h1> <form name="myForm" onsubmit="return validateForm()" method="post"> <label for="username">用户名：</label><br> <input type="text" id="username" name="username"><br> <span id="username_error" style="color:red;font-weight:bold;"></span><br> <label for="email">电子邮箱：</label><br> <input type="email" id="email" name="email"><br> <span id="email_error" style="color:red;font-weight:bold;"></span><br> <label for="password">密码：</label><br> <input type="password" id="password" name="password"><br> <span id="password_error" style="color:red;font-weight:bold;"></span><br> <label for="confirm_password">确认密码：</label><br> <input type="password" id="confirm_password" name="confirm_password"><br> <span id="confirm_password_error" style="color:red;font-weight:bold;"></span><br> <input type="submit" value="提交"> </form> </body> </html> ``` 上述HTML代码中，使用了JavaScript函数`validateForm()`对用户输入的各项数据进行验证。当用户输入不符合规则时，通过修改相应标签的`innerHTML`属性，在标签右边用红色加粗字体显示错误信息。 其中，验证逻辑如下： - 用户名不能为空 - 邮箱格式验证 - 密码不能为空并且长度必须在6至20之间 - 确认密码必须与密码相同 当任意一项验证不通过时，即可停止提交表单，防止非法数据被提交到后台。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

等日出看彩虹

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值