原生js —— 表单验证

最新推荐文章于 2024-05-29 09:35:11 发布
最新推荐文章于 2024-05-29 09:35:11 发布
阅读量1.6k 收藏 5
点赞数 2
分类专栏： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43314846/article/details/100313363
版权
表单验证示例

知识点：
① form标签的action属性为提交地址，method属性为提交方式，取值有get和post。若想禁止点击type=submit//button按钮后提交表单内容，可通过form对象.onsubmit=function（）{return false}/对象.onsubmit="return false;""来禁止。默认是return true的。故默认是直接提交的。
② 显示禁止图标：cursor:not-allowed。
③ 去掉button按钮的点击后边框变蓝样式：outline:none
④ vertical-align:middle可实现父元素的子元素垂直对齐。
⑤ click、blur、focus事件可直接调用，无论是否写该事件对应的函数。eg:对象.focus()。若写了该事件对应的函数，则会执行该函数内的内容。
⑥ 当要将输入的密码显现出来时可将type="password"变成type="text"
⑦ 在验证一个字符串内是否有数字、字母和字符时，可进行三次match匹配，每次只匹配一样（例如：第一次匹配数字，第二次匹配字母，第三次匹配字符），若都匹配上，则字符串中是符合标准的，否则，是不符合标准的。
⑧ 函数名.call(this)会将自定义对象中的函数中的this变换成其他对象，而不是该自定义对象。（默认情况下，在自定义对象中的函数中的this为该自定义对象）

思想：在点击提交按钮后，让页面全部必填元素元素先得到焦点，再失去焦点，因此会触发每个元素对应的失焦事件。在每个元素的失焦事件对应的函数中判断对应内容是否都符合规则，若不符合，则显示错误提示信息，否则不显示。当所有元素中的内容都符合规范时才可提交。

完整代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
            font-size:14px;
        }
        ul,li{
            list-style: none;
            position: relative;
        }
        button{
            border:none;
        }
        .addConfirm{
            background: #2c75ff;
            color:white;
        }
        input{
            border:1px solid silver;
            outline:none;
        }
        input[type=text],input[type=password]{
            width:300px;
            height: 40px;
            margin-bottom:24px;
            padding-left:30px
        }
        .all{
            width: 420px;
            margin:50px auto;
        }
        .code{
            height: 40px;
            width: 100px;
            margin-left:10px
        }
        .confirm{
            width:300px;
            height: 40px;
            margin:20px auto;

        }
        .confirm:hover{
            cursor:not-allowed;
        }
        input[type=checkbox]{
            vertical-align:middle;
        }
        label{
            vertical-align:middle;
            padding-left:2px;
        }
        .icon{
            position: absolute;
            top:10px;
            left: 10px;
            font-size:17px !important;
        }
        ul>li:nth-of-type(4)>input[type=text]{
            padding-left: 60px;
        }
        input[type=text]:hover,input[type=password]:hover{
            border-color: #2dbee6;
        }
        .before{
            position: absolute;;
            left:25px;
            top:9px;
            font-size: 16px;
        }
        .prompt{
            display: none;
            position: absolute;
            top:42px;
            left:0;
            color:red;
        }
        .prompt>span{
            display: block;
        }
        .beSee{
            position:absolute;
            right:125px;
            top:10px;
            height: 20px;
            width: 20px;
        }
    </style>
    <link href="css/iconfont.css" rel="stylesheet">
</head>
<body>
<div class="all">
    <form action="" method="get" class="formuser" onsubmit="false">
        <ul>
            <li>
                <input type="text" placeholder="输入账号名" id="userId"/>
                <span class="iconfont icon">&#xf00ec;</span>
                <div class="prompt">
                    <span>*账号名长度要在4-20位之间</span>
                </div>
            </li>
            <li>
                <input type="password" placeholder="输入密码" id="userPsw"/>
                <span class="iconfont icon">&#xf00c9;</span>
                <div class="prompt">
                    <span>*密码长度要在7-20位之间</span>
                    <span>*密码中要包含数字、字母、字符</span>
                </div>
                <img src="img/eye1.png" class="beSee" id="psw"/>
            </li>
            <li>
                <input type="password" placeholder="再次输入密码" id="confirmPsw"/>
                <span class="iconfont icon">&#xf00c9;</span>
                <div class="prompt">
                    <span>*确认密码不能为空！</span>
                    <span>两次密码不一致！</span>
                </div>
                <img src="img/eye1.png" class="beSee" id="repeatPsw"/>
            </li>
            <li>
                <span class="before">+86</span>
                <input type="text" placeholder="输入常用手机号" id="tel"/>
                <span class="iconfont icon">&#xf00e5;</span>
                <div class="prompt">
                    <span>*手机号不能为空！</span>
                </div>
            </li>
            <li>
                <span class="iconfont icon">&#xf0102;</span>
                <input type="text" placeholder="收入6位验证码" id="code"/>
                <button class="code">发送验证码</button>
                <div class="prompt">
                    <span>*验证码不能为空！</span>
                </div>
            </li>
            <li>
                <input type="checkbox" id="confirm" class="choose"/>
                <label for="confirm" class="read">我已阅读并同意
                    <a href="#">《隐私政策》</a>
                    <a href="#">《京东服务协议》</a>
                </label>
            </li>
        </ul>
        <input type="submit" class="confirm" value="同意协议并注册"/>
    </form>
</div>
<script>
    var choose = document.getElementsByClassName("choose")[0];
    var prompt = document.getElementsByClassName("prompt");
    var confirm = document.getElementsByClassName("confirm")[0];
    var inputList = document.getElementsByTagName("input");
    var beSee = document.getElementsByClassName("beSee");
    var formuser = document.getElementsByClassName("formuser")[0];
    for(var j=0;j<beSee.length;j++){
        beSee[j].onclick = function () {
            var destInput = "";
            for(var i=0;i<inputList.length-2;i++){
                if(this.id=="psw"){
                    destInput="userPsw";
                }
                else{
                    destInput="confirmPsw"
                }
                if(inputList[i].id==destInput){
                    if(inputList[i].type=="password"){
                        this.src = "img/eye.png";
                        inputList[i].type="text";
                    }else{
                        this.src = "img/eye1.png";
                        inputList[i].type="password";
                    }
                    break;
                }
            }
        }
    }
    var blurAvent = {
        userId:function () {
            if(this.value.length<4){
                console.log(1)
                prompt[this.index].style.display = "block";
            }else{
                prompt[this.index].style.display = "none";
            }
        },
        userPsw:function () {
            if(this.value.length<7 || this.value.length>20){
                prompt[this.index].style.display="block";
                prompt[this.index].children[0].style.display="block";
                prompt[this.index].children[1].style.display="none";
            }else{
                var reg1=/\d+/;
                var reg2=/[a-zA-Z]+/;
                var reg3 = /[_?/>.'"!@$%^&().]+/
                if(this.value.match(reg1)==null || this.value.match(reg2)==null || this.value.match(reg3)==null){
                    prompt[this.index].style.display="block";
                    prompt[this.index].children[1].style.display="block";
                    prompt[this.index].children[0].style.display="none";
                }else{
                    prompt[this.index].style.display="none"
                }
            }
        },
        confirmPsw:function () {
            for(var i=0;i<inputList.length-2;i++){
               if(this.value.length!==0){
                   if(inputList[i].id=="userPsw"){
                       if(this.value!=inputList[i].value){
                           prompt[this.index].style.display="block";
                           prompt[this.index].children[1].style.display="block";
                           prompt[this.index].children[0].style.display="none";
                       }else{
                           prompt[this.index].style.display="none";
                       }
                       break;
                   }
               }else{
                   prompt[this.index].style.display="block";
                   prompt[this.index].children[0].style.display="block";
                   prompt[this.index].children[1].style.display="none";
                   break;
               }
            }
        },
        tel:function () {
            var reg = /^1[35789]{1}\d{9}$/;
            if(this.value.match(reg)!=null){
                prompt[this.index].style.display="none";
            }else{
                prompt[this.index].style.display="block";
            }
        },
        code:function () {
            if(!this.value.length){
                prompt[this.index].style.display="block";
            }else{
                prompt[this.index].style.display="none";
            }
        }
    };
    choose.onclick=function () {
        if(this.checked){
            confirm.className="addConfirm confirm";
            confirm.style.cursor="pointer"
        }else{
            confirm.className="confirm";
            confirm.style.cursor="not-allowed"
        }
    };
    formuser.onsubmit=function () {

       if(inputList[inputList.length-2].checked){
           for(var i=0;i<inputList.length-2;i++){
               inputList[i].focus();
           }
           confirm.focus();
           for(var j=0;j<prompt.length;j++){
               if(prompt[j].style.display=="block"){
                   return false;
               }
           }
           return true;
       }else{
           return false;
       }
    };
    for(var i=0;i<inputList.length-2;i++){
        inputList[i].index = i;
        inputList[i].onblur = function () {
        /*在 blurAvent[this.id]中使用this时为将当前input对象*/
            blurAvent[this.id].call(this);
        }
    }
</script>
</body>
</html>
Lemon
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js实现用户登陆验证
行大于言
12-20 2786
目的：我们要想实现利用正则实现用户登陆验证，正确则跳转到个人主页，错误则提示输入错误 我们会想到用form表单来实现页面的跳转，但使用form表单就无法利用正则来判断输入的数据的正错，无论输入对错，都会跳转到action的页面 所以我们选择利用原生js来实现我们想要的效果 首先我们需要获取输入框的值： 我们还是用到了from表单???? 先给form加个name属性，再给input加个name属性 &l...
使用原生javascript创建通用表单验证——更锋利的使用dom对象
10-28
使用原生javascript创建通用表单验证——更锋利的使用dom对象，学习js的朋友可以参考下。
JavaScript、Html5——表单验证相关
Corn___的博客
09-13 1570
前端表单验证相关
原生html form 表单提交小案例
m0_56590688的博客
05-22 169
【代码】原生html form 表单提交小案例。
原生js的表单认证
weixin_57219176的博客
09-16 269
原生js的表单验证
HTML简单注册界面——含表单验证
热门推荐
荷塘月色
10-28 7万+
最近学习HTML表单，感慨万千。虽然看起来好像不难学，但要是真自己实践起来问题却多多。这里是我写的一个简单的注册页面，只有“注册账号、密码、重输密码”三个文本框，还包含了原生JavaScript验证。（记一下，也希望能给有需要的人一点帮助。）
原生JS项目练习——验证码的生成及教验
周百万的博客
10-06 1356
主要功能介绍： 1、通过for循环生成生成六位随机验证码 2、通过for循环随机生成验证码颜色 3、窗口加载事件，窗口一加载就调用函数，重置验证码 4、按钮点击事件，一点击就调用函数，重置验证码 5、input输入框已失去焦点就进行验证 6、正则表达式验证输入内容是否符合条件 7、如果输入验证码和随机生成的验证码相同，在后方显示绿色正确标签
form 表单提交前验证 onsubmit 原生javascript
Guoye的专栏
04-22 2264
form 表单提交前验证 onsubmit 使用form表单的onsubmit方法，在提交表单之前，对表单或者网页中的数据进行检验。 onsubmit指定的方法返回true，则提交数据；返回false不提交数据。 在不使用JQuery的情况下（js原生），是提交表单前拦截的较好方法。 js验证form表单，示例代码： <!DOCTYPE html> <html> <...
javascript学习笔记——表单
ass_ace
08-13 597
表单的基础知识 在HTML中表单是由&lt;form&gt;元素来表示的，而在js中表单对应的就是HTMLFormElement； HTMLFormElement的属性和方法： ① acceptCharset：服务器能够处理的字符集； ② action：接收请求的URL； ③ elements：表单中所有的控件的集合； ④enctype：请求的编码类型； ⑤length：表单中控件...
推荐开源项目：Validate.js —— 简洁高效表单验证工具
最新发布
gitblog_00022的博客
05-29 854
推荐开源项目：Validate.js —— 简洁高效表单验证工具 项目地址:https://gitcode.com/cferdinandi/validate 在现代Web开发中，良好的表单验证体验是提升用户体验的关键一环。今天，我们要介绍的是一个曾经广受好评但现已步入维护期的开源项目——Validate.js。虽然它已由作者更新为更先进的Bouncer，但Validate.js因其简洁的设计和对H...
Bootstrap组件——表单
xun__xing的博客
07-30 1211
表单一、表单1.基础表单2.大小规格3.只读属性4.表单栅格排列5.表单表格式的排列6.水平排列表单7.内联表单二、验证1.验证2.自定义表单样式 一、表单 1.基础表单 使用.form-check 可以格式化复选框和单选框按钮，用以改进它们的默认布局和动作呈现，复选框用于在列表中选择一个或多个选项，单选框则用于多许多选项中选择一个。 <div class="row"> <div class="col mt-5"> <form action="#"> <
JQ,JS表单验证大全
07-16
本文将深入探讨如何使用jQuery（JQ）和纯JavaScript（JS）进行表单验证，并结合"JQ表单验证大全"这个资源，提供一些实用的验证方法和策略。 ### jQuery表单验证 jQuery提供了丰富的API，使得表单验证变得简单易行...
JS中artdialog弹出框控件之提交表单思路详解
01-19
它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。 完善的接口 它的接口完善，可以轻易与外部程序配合使用。如异步写入消息、控制位置、尺寸、显示与隐藏、关闭等。 细致的体验 ...
js代码-正则表达式验证
07-15
正则表达式在JavaScript中扮演着重要角色，尤其在数据验证方面，如表单验证、URL检查、邮箱格式校验等。在本资料中，我们主要关注如何使用JavaScript编写正则表达式进行数据验证。 `main.js`文件很可能是包含实际的...
HTTP状态码304详解
我的博客
04-07 2万+
图和代码来源理解HTTP缓存和304状态码 下图是使用express启动了一个服务，启动之后浏览器访问两次localhost:8080所得请求、响应头 var express = require('express'); var app = express(); app.get('/', function(req, res) { res.send('hello world'); }); a...
原生js写简单三级联动以及复杂三级联动
我的博客
08-23 1万+
1. 简单三级联动 效果图： 思想：当选择省时，创建对应的市子对象，并将其加入父元素中。当选择某一个市时，创建对应的区子对象，并将其加入父元素中。当选择其他省/市时，对应的市、区/区的选项都变为请选择。要注意：在每次重新选择时，需要将其余select标签的options元素的长度为1，即做一次清空。 知识点：① 在创建<select></select>标签的子元素&...
js 购物车基本功能的实现
我的博客
08-14 9597
先上一个效果图 步骤： ① 用js语句画页面（for循环创建四个元素） ② 实现全选功能：当全选的checked为true时，所有元素被选中（包括checked为true和被背景变为粉色）。当全选的checked为flase时，所有元素不被选中。当点击全选按钮时，反选按钮取消选中 ③ 实现反选功能：当反选按钮被选中时，选中点击前未被选中的元素，并且全选按钮取消选中 ④ 实现单选功能：当有一个元...
弹性盒子
我的博客
07-24 8511
flex布局 介绍 1. 容器默认存在两根轴：横轴和纵轴 2. 采用flex布局的元素，称为flex容器，简称”容器”。它的所有子元素称为flex项目 3. 要设为flex布局，必须先设置display:flex 容器的属性 注意！！important!! :) 当将flex-direction设为column值时，align-items作用于横轴，justify-content作用于纵轴 ...
注册 原生js验证 博客园
05-16
注册原生js验证博客园可以通过以下步骤实现： 1. 首先需要在博客园注册页面添加表单元素，用于用户输入信息，包括用户名、密码等。 2. 接下来需要编写JavaScript代码来验证用户输入的信息。可以通过正则表达式等方式对输入数据进行格式验证，确保数据合法性。例如，可以使用手机号码正则表达式验证手机号码的格式是否正确。 3. 在表单提交前，需要使用JavaScript代码阻止表单提交，并通过Ajax方式将用户输入的数据发送到后端进行验证。后端可以通过验证用户名和密码的正确性来确定用户是否可以注册账户。 4. 如果用户输入的信息格式正确且后端验证通过，则可以让表单提交，否则需要给出相应的提示信息，告知用户哪些信息格式不正确或者已经被注册过。 5. 在用户注册成功后，需要将用户的信息保存到数据库，并让用户跳转到登录页面，进行登录操作。 总之，注册原生js验证博客园需要前端开发人员编写JavaScript代码来验证用户输入数据，并结合后端进行账户验证和保存。通过以上步骤可以实现一个基本的注册系统。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值