JavaScript 表单验证 注册页面提交数据

最新推荐文章于 2023-03-13 11:23:30 发布
最新推荐文章于 2023-03-13 11:23:30 发布
阅读量336 收藏
点赞数 1
分类专栏： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57855884/article/details/124642624
版权

HTML CSS JavaScript 表单验证 用户体验
关键词由CSDN通过智能技术生成

HTML 部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎注册</title>
    
    <link rel="stylesheet" href="css/register.css">
</head>
<body>
    <div class="form-div">
        <div class="reg-content">
            <h1>欢迎注册</h1>
            <span>已有账号?</span> <a href="#">登录</a>
        </div>
        <form id="reg-form" action="#" method="get">
            <table>
                <tr>
                    <td>用户名</td>
                    <td class="inputs">
                        <input name="username" type="text" id="username">
                        <br>
                        <span id="username_err" class="err_msg" style="display: none;">用户不太受欢迎</span>
                    </td>
                </tr>

                <tr>
                    <td>密&nbsp;&nbsp;&nbsp;&nbsp;码</td>
                    <td class="inputs">
                        <input type="password" name="password" id="password">
                        <br>
                        <span id="password_err" class="err_msg" style="display: none;">密码格式错误</span>
                    </td>
                </tr>

                <tr>
                    <td>手机号</td>
                   <td class="inputs"><input name="tel" type="text" id="tel">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none;">手机号格式有误</span>
                   </td>
                </tr>
            </table>

            <div class="buttons">
                <input  value="注册" type="submit" id="reg_btn">
            </div>
            <br class="clear">
        </form>
    </div>
    
</body>
<script>
    /* 用户名的验证 */
    // 1.验证用户名是否符合规则
    // 1.1获取用户名的输入框
    var usernameInput = document.getElementById("username");

    //1.2绑定onblur 事件 失去焦点
    usernameInput.onblur = checkUsername;

    function checkUsername(){
        //1.3获取用户输入的用户名
       var username = usernameInput.value.trim();

    //    alert(username);
    // 1.4判断用户名是否符合规则：6-12
            var flag = username.length>=6 && username.length<=12;
            if(flag){
                //符合规则
                document.getElementById("username_err").style.display= 'none';

            }else{
                //不符合规则
                document.getElementById("username_err").style.display = '';
            }
            return flag;
    }




        /* 密码的验证 */
    // 1.验证密码是否符合规则
    // 1.1获取密码的输入框
    var usernameInput = document.getElementById("password");

    //1.2绑定onblur 事件 失去焦点
    usernameInput.onblur = checkPassword;

    function checkPassword(){
        //1.3获取用户输入的密码
       var password = usernameInput.value.trim();

    //    alert(username);
    // 1.4判断密码是否符合规则：6-12
            var flag = password.length>=6 && password.length<=12;
            if(flag){
                //符合规则
                document.getElementById("password_err").style.display= 'none';
            }else{
                //不符合规则
                document.getElementById("password_err").style.display = '';
            }
            return flag;
    }


    /* 手机号的验证 */
    // 1.验证手机号是否符合规则
    // 1.1获取手机号的输入框
    var usernameInput = document.getElementById("tel");

    //1.2绑定onblur 事件 失去焦点
    usernameInput.onblur = checkTepon;

    function checkTepon() {
        //1.3获取用户输入的手机号
       var tel = usernameInput.value.trim();

    //    记录结果
       var flag =tel.length==11;
    //    alert(username);
    // 1.4判断手机号是否符合规则：6-12
            if(flag){
                //符合规则
                document.getElementById("tel_err").style.display= 'none';
            }else{
                //不符合规则
                document.getElementById("tel_err").style.display = '';
            }
            return flag;
        }


    /*-------------------------------------------------------*/

    //1.获取表单对象
    var regForm = document.getElementById("reg-form");

    //2.绑定onsubmint 事件
    regForm.onsubmit=function(){
        //3.挨个判断每一个表单项目都符合要求，如果有一个不符合，则返回 false
      
       var flag =checkUsername()&&checkPassword()&&checkTepon();
       return flag;

    }



</script>

</html>

 

css部分代码： 

/* 把我们所有标签的内外边距清零 */
*{
    margin: 0;
    padding: 0;
    /* css3盒子模型 */
    /* box-sizing: border-box; */
}
/* em 和 i 斜体文字不倾斜 */
em,i{
    font-style: normal;
}
i{
    font-style: normal;
}
/* 去掉li的小圆点 */
li{
    list-style: none;
}
img{
    /* border 0 照顾低版本浏览器 如果外面包含了连接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    /* 垂直对齐中间 */
    vertical-align: middle;
}
.buttons{
    /* 当我们经过button 按钮的时候，鼠标变成小手 */
    /* 光标指针 */
    cursor: pointer;
}
a{
    color: #666;
    /* 文本装饰 */
    text-decoration: none;
}


body{
    background-image: url("../img/R-C.jpg");
    text-align: center;
}

table{
    border-collapse: collapse;
    border-spacing: 0;
}
.reg-content{
    text-align: center;
    /* margin-bottom:10px; */
   
    
}


td{
    padding: 0;
    height: 100px;
    text-align: center;

   

}

.inputs{
    vertical-align: top;

}

.clear{
    clear: both;
}

.clear:before, .clear::after{
    content: "";
    display: table;
}

.clear:after{
    clear: both;
}

.form-div{
    background-color: rgb(255, 255, 255,0.27);
    border-radius: 10px;
    border: 1px solid #aaa;
    width: 424px;
    margin-top: 150px;
    margin-left: 1050px;
    padding: 30px 0px 20px 0px;
    font-size: 16px;
    box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5),0px 0px 15px rgba(75, 75, 75, 0.3);
    text-align: left;
    
}
.form-div input[type="text"],.form-div input[type="password"]{
    width: 168px;
    margin: 10px;
    /* height: 30px; */
    line-height: 30px;
    font-size: 16px;
    /* margin-right: 50px; */
    margin-top: 35px;
    border-radius:6px;
    /* margin-top: 30px; */
}
.form-div input[type="submit"]{
    width: 168px;
    margin: 10px;
    /* height: 30px; */
    line-height: 20px;
    font-size: 16px;
    background-color:antiquewhite;
    border-radius:9px;
  
}
.form-div input[type="checkbox"]{
    margin: 20px 0 20px 10px;
}
.form-div input[type="button"],.form-div input[type="submit"]{
    margin: 10px 0px 0 0;
}


.form-div table{
    margin: 0 auto;
    text-align: right;
    color: rgba(64, 64, 64, 1.00);
}
.buttons{
    text-align: center;
    margin-left: 30px;
}

.err_msg{
    
    color: aqua;

}

最终成果 

 

「已注销」
关注
专栏目录
原生js表单美化制作注册个人信息提交表单.zip
07-11
原生js表单美化制作注册个人信息提交表单代码
【Javascript】入门之验证注册信息
qq_37086980的博客
12-16 303
描述: html <main class="clearfix"> <div class="leftpanel fl"> <form action="#" id = "registerform"> <div> <span>手机: </span> <input type="text"
JavaScript实现注册页面的表单验证
03-10 8967
基于javaweb的学习以及为后面做项目做基础，其次参考资料做了些琢磨来实现这个登录界面的注册的验证，下面是效果图（顺便附加素材） 下面是代码展示 1.注册界面register.html 无标题文档 会员注册 会员邮箱: 请输入有效的邮箱地址 会员名:
js注册表单的验证提交
qq_45148387的博客
06-07 357
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
JavaScript 提交(Submit)页面数据
david_zl的专栏
08-05 2994
当不采用 http://xxx.xxx.xxx?xxx=xxx 方式提交页面数据时，JavaScript 还有另外一种方法客户端：function MakeConfirm(){ if ( confirm("确认以上增加/修改吗？") ) {  document.Form1.submit();  }}    width="640">        &nbsp
Javascript的表单验证-提交表单
11-23
本文主要探讨的是如何使用JavaScript进行表单验证，确保用户在提交表单时输入的数据符合预设的规则，防止无效或恶意的数据到达服务器。 在HTML中，表单是收集用户输入数据的基本元素。为了确保用户输入的有效性，...
JavaScript程序设计——页面设置与表单验证实验报告.docx
11-11
实验报告的标题“JavaScript程序设计——页面设置与表单验证实验报告.docx”涉及的核心是JavaScript编程中的两个关键领域：页面设置和表单验证。在Web开发中，JavaScript是一种常用的客户端脚本语言，用于增强用户的...
JavaScript表单验证实现代码
12-10
JavaScript 表单验证是网页开发中的重要一环，它允许开发者在用户提交数据到服务器之前进行数据的合法性检查，从而提高用户体验并减轻服务器端的压力。本文将深入探讨如何使用JavaScript来实现基本的表单验证。 ...
基于JavaScript实现带数据验证和复选框的表单提交
10-19
在本文中，我们将深入探讨如何使用JavaScript来实现一个带有数据验证和复选框的表单提交功能。这个功能主要用于确保用户在提交表单前至少选择了一项，并且输入的数据是有效的。以下是一些关键知识点： 1. **HTML ...
JS验证通过之后才提交表单
ithouse的专栏
08-11 4356
JS代码： function reg() { var v1 = document.getElementById('consumerName').value; var s = document.getElementById('sex'); var v3 = document.getElementById('consumerPasswd').value; var
JS定义网页表单提交（submit）的方法
01-21
本文实例讲述了JS定义网页表单提交（submit）的方法。分享给大家供大家参考。具体如下： 这段代码表示网页表单提交时不是提交到指定的页面，而是执行一个特定的函数 [removed] function saveInfo() { localStorage.setItem(name,$(#name).val()); } [removed] <form id=register onSubmit=return saveInfo()> <label for=name>Name:</label> <input type=text name=name id=name> <input
原生js实现表单的正则验证，所有验证都通过后提交按钮才可用
热门推荐
u010552788的专栏
03-30 2万+
实现了如下功能： 1.用户名：onfouc显示msg规则；onkeyup计算字符，其中中文为两个字符；onblur，验证是否通过 2.邮箱：onblur 正则匹配，正则是根据自己的需求写的，可以根据个人需求更改 3..密码：onkeyup时显示密码的强弱度，onblur时验证密码，是否为相同字符，是否全字符，或全数字，长度是否符合要求 4.确认密码：验证是否和
js中对提交信息的处理
weixin_45542692的博客
01-16 361
注册中用户信息的过滤处理对用户提交信息的处理页面的设计 对用户提交信息的处理 // 浪念 console.log('form发生了提交事件，携带的数据为：', e.detail.value); if (e.detail.value.rt_xm) { //是否输入姓名 if (e.detail.value.rt_ph) { //是否输入号码 if (e.detail.va...
js实现把一个页面层数据传递到另一个页面
xiaoxiaoyoumeng的博客
08-12 1万+
由于之前面试，被问到过此问题，所以今天特意整理了一下。由于自己技术水平有限，若存在错误，欢迎提出批评。 本博客整理了两种方式从一个页面层向另一个页面层传递参数。 一. 通过cookie方式 1. 传递cookie页面的html,此处命名为a.html 请输入用户名和密码： &lt;input id="userName" type="text" /&gt; &lt;input id="pa...
js实现注册验证
he626shidizai的博客
04-03 6498
为什么需要表单验证（前端）? 首先我们要保证提交的数据是正确的，但是把信息都交给服务器去做服务器压力就太大了，所以要进行表单验证。 思路分析 通过getElementById()方法获得表单元素的值 通过字符串方法（包括正则式）对数据进行判断 判断失败，利用alert()方法进行提示，返回false；判断成功，返回true进行表单提交 要点 getElementById(‘str’).val...
【JavaScript】eg：同源、未使用ajax实现页面的数据通过Node后台提交到数据库
南栀的博客
12-17 1354
前后端交互
js实现注册页面的输入验证和数据获取
最新发布
weixin_53141315的博客
03-13 988
js实现注册页面的输入验证和数据获取
使用原生js写一个简单的注册登录页面
apple_61973423的博客
08-15 2万+
使用JavaScript写的登录注册页面
JS实现前后端数据交互--简单登陆页面交互
weixin_46383743的博客
06-11 1万+
JS实现前后端数据交互--简单登陆页面交互
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

「已注销」

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

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

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

打赏作者

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

抵扣说明：

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

余额充值