注册表单验证

已于 2023-01-17 23:10:04 修改
阅读量457 收藏 1
点赞数
文章标签： javascript 前端 html
于 2023-01-17 22:28:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74348480/article/details/128721386
版权

1.表单需包含昵称、姓名、QQ、手机号、邮箱、密码、确认密码以及提交和重置按钮;
⒉.点击表单里的输入框，隐藏提示文字;
3.点击提交和重置按钮时，都需要有相应的提示;
4.在表单提交是，需要进行验证验证填写内容是否合理:昵称不超过10个字、姓名不超过4个字、QQ号为长度小于等于10大于5位的数字、手机号为长度11位的数字、密码由字母和数字组成且大于8位小于16位、密码和确认密码需相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="css/register.css" rel="stylesheet">
</head>
<body>
 
<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
  
    </div>
    <form id="reg-form" action="#" method="get">
        <table>
            <tr>
                <td>姓名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username" placeholder="请输入您的姓名">
                    <br>
                      <!-- 这里是被隐藏的提示信息<input type="text" name="name" placeholder="请输入您的姓名"> -->
                    <!-- <span id="username_err" class="err_msg" style="display:none">姓名名不合乎规则</span> -->
                </td>
            </tr>
            <tr>
                <td>QQ</td>
                <td class="inputs">
                    <input name="QQ" type="text" id="QQ" placeholder="请输入您的QQ">
                    <br>
                      <!--这里是被隐藏的提示信息-->
                    <!-- <span id="QQ_err" class="err_msg" style="display:none">QQ不合乎规则</span> -->
                </td>
            </tr>
            <tr>
                <td>邮箱</td>
                <td class="inputs">
                    <input name="email" type="email" id="email" placeholder="请输入您的邮箱">
                    <br>
                    <!--这里是被隐藏的提示信息-->
                    <!-- <span id="email_err" class="err_msg" style="display: none">邮箱格式有误</span> -->
                </td>
            </tr>
            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel" placeholder="请输入您的手机号">
                    <br>
                    <!--这里是被隐藏的提示信息-->
                    <!-- <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span> -->
                </td>
            </tr>
            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password" placeholder="请输入您的密码">
                    <br>
                    <!--这里是被隐藏的提示信息-->
                    <!-- <span id="password_err" class="err_msg" style="display: none">密码格式有误</span> -->
                </td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td class="inputs">
                    <input name="password2" type="password" id="password2" placeholder="请确认您的密码">
                    <br>
                    <!--这里是被隐藏的提示信息-->
                    <!-- <span id="password2_err" class="err_msg" style="display: none">密码确认有误</span> -->
                </td>
            </tr>
        </table>
        <div class="buttons">
            <input value="提 交" type="submit" id="reg_btn" onclick="yanzheng1()" >
            <input value="重 置" type="submit" id="reg_btn2" onclick="reset()">
        </div>
        <br class="clear">
    </form>
 
</div>
<script>
    function yanzheng1(){
        var xingming = document.getElementById("username").value;
        console.log(xingming);
        if (xingming.length <= 0)
    {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
        alert("请输入姓名！");
    }
    else if( xingming.length > 4)
    {
        alert("姓名不合规！");
    }
   
        var qq = document.getElementById("QQ").value;
        console.log(qq);
        if (qq.length <= 0)
    {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
        alert("请输入QQ！");
    }
    else if( qq.length >= 10)
    {
        alert("QQ不合规！");
    }
    else if( qq.length <= 5)
    {
        alert("QQ不合规！");
    }
    
    var shouji = document.getElementById("tel").value;
        console.log(shouji);
        if (shouji.length <= 0)
    {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
        alert("请输入手机号！");
    }
    else if( shouji.length != 11)
    {
        alert("手机号不合规！");
    }
    var mima = document.getElementById("password").value;
        console.log(mima);
        if (mima.length <= 0)
    {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
        alert("请输入密码！");
    }
    else if( mima.length < 8 || mima.length > 16)
    {
        alert("密码不合规！");
    }
    var yanzheng = document.getElementById("password2").value;
        console.log(yanzheng);
        if (mima != yanzheng)
    {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
        alert("密码不一致！");
    }
    }
function reset(){
    document.getElementById("username","QQ","email","tel","password","password2").reset();
}
</script>
</body>
</html>
<!-- function validateCode()
{
    //获取输入的验证码
    var inputCode = document.getElementById("number").value;
    console.log(inputCode);
    if (inputCode.length <= 0)
    {                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
        alert("请输入验证码！");
    }
    else if (inputCode.toUpperCase() != "0505")
    {
        alert("验证码输入有误！");
    }
    else
    {
        alert("验证码正确！");
    }       
}     -->

将获取到的信息在JS中进行比较，通过比较即为合规

欢迎注册

mttp02
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS 注册表单验证
weixin_57156683的博客
07-27 906
JS 注册表单验证
html用户注册表单验证码,简易版用户注册表单验证功能
weixin_39689428的博客
06-17 1460
HTML、CSS、JavaScript实现简易版用户注册表单验证功能以下代码使用原生HTML、CSS、JS编写完成，可以直接在浏览器中解析运行查看效果，由于代码只完成了简单的验证功能，所以仅作为练手与参考的作用。功能要求：1.用户名不能为空2.用户名必须在6-14位之间3.用户名只能有数字和字母组成，不能含有其他符号(正则表达式)4.密码和确认密码一致，邮箱地址合法5.统一是去焦点验证6...
JavaScript 登录注册表单验证
阿博的博客
07-24 4464
JavaScript 表单验证
JQuery用户注册表单验证
Sirius小鑫的博客
11-22 2870
使用jquery编写代码实现用户注册表单的验证功能：代码地址。
用户注册表单验证
Java学习笔记
06-26 2529
用户注册表单验证 <%@page contentType="text/html;charset=utf-8" isELIgnored="false" pageEncoding="UTF-8" %> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@taglib uri="/struts...
jquery实现注册表单验证
weixin_42148897的博客
05-06 1187
$(function () { var sPwd = null; // 用来存储用户第一次输入的密码 var result = true; // 用来存储each循环判断后的结果 // 元素获取焦点的时候，将span内容清空，并显示 $('input').focus(function () { $(this).siblings('span').html('').show() });
模拟百度注册表单验证
qq_44687727的博客
11-07 1292
模拟百度注册表单验证 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...
JavaWeb前端开发注册表单验证
我不想读研的博客
08-05 1828
注册表单验证 最近在尝试学习开发一个网站，现将登录页面的表单验证总结如下 表单校验分析 1.用户名：单词字符，8到20位 2.密码：单词字符，8到20位 3.email：邮箱格式 4.姓名：汉字非空 5.手机号：手机号格式 6.出生日期：非空 7.验证码：4个字符非空 表单验证的JS代码 如果输入内容不符合要求，边框则会变为红色，输入正确则边框颜色恢复。 <script> /* 表单校验 1.用户名：单词字符，8到20位 2.密码：单词字符，8到20位 3.ema
HTML简单的注册表单验证
xxyez的博客
05-08 1046
*密码长度在6- 18
js实现注册表单验证
zhangvalue的博客
09-10 5866
js实现注册表单验证 验证用户名必须为：要求6-20位，只能有大小写字母和数字，并且大小写字母和数字都要有 var name_re=/[0-9a-zA-Z]{3,8}/; var pwd_re=/^\S{6,20}$/; <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>js实现注册表单验证</title> </head> <b
AngularJS实现注册表单验证功能
10-19
### AngularJS实现注册表单验证功能 #### 一、引言 在Web开发中，表单验证是一项重要的功能，它确保用户输入的数据符合预期的格式和规则，从而提高用户体验并减少后端处理负担。AngularJS作为一款流行且强大的前端...
jquery会员注册表单验证实例演示
10-29
在这个“jquery会员注册表单验证实例演示”中，我们将深入探讨如何利用jQuery来实现用户友好的表单验证，从而提高用户体验并确保数据的准确性。 一、jQuery基础知识 jQuery的核心理念是“Write Less, Do More”，它...
jquery注册验证实例会员注册表单验证代码
11-11
在会员注册表单验证中，通常涉及以下几类验证： 1. **非空验证**：确保所有必填字段不为空。使用`.val()`检查字段是否为空，如果为空，则显示错误提示。 ```javascript if ($("#username").val() === "") { alert...
jQuery橙色注册表单验证代码
06-24
"jQuery橙色注册表单验证代码"是一个示例项目，用于演示如何利用jQuery实现具有商户名称、手机号码、验证码、邮箱和密码验证功能的注册表单。 首先，我们需要理解jQuery的基本用法。jQuery的核心在于它的选择器，...
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
最新发布
m0_74283290的博客
08-03 616
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
Function Call & ReACT，Agent应用落地的加速器--function calling和react有什么不同
Dove_1234的博客
08-03 660
探索智能体Agent的未来之路：Function Call与ReACT框架的较量，谁能引领未来？
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 910
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 235
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
html登录注册表单验证
06-23
HTML登录注册表单验证是网站前端用户体验的关键部分，它确保用户输入的数据格式正确且安全。在HTML中，验证通常是通过JavaScript或HTML5内置的属性来实现的。这里是一个简单的例子： 1. **HTML结构**: ```html <form id="loginForm"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required pattern="[a-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"><br> <label for="password">密码:</label> <input type="password" id="password" name="password" required minlength="6"><br> <button type="submit">登录</button> </form> ``` - `required` 属性确保字段不可为空。 - `pattern` 属性用于设置邮箱格式的正则表达式，对于密码，`minlength` 属性确保其长度不少于6位。 2. **JavaScript验证** (可选，更复杂的验证可能使用框架如jQuery Validation或第三方库): ```javascript document.getElementById('loginForm').addEventListener('submit', function(event) { event.preventDefault(); // 获取输入值 const username = document.getElementById('username').value; const password = document.getElementById('password').value; // 自定义验证规则，例如检查密码是否包含数字和字母 if (!/^(?=.*[A-Za-z])(?=.*\d).+$/.test(password)) { alert('密码必须包含至少一个字母和一个数字'); return; } // 如果验证通过，提交表单或发送到服务器 // 这里仅做示例，实际操作应处理服务器请求 this.submit(); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值