JavaScript（三十三）表单验证demo2

最新推荐文章于 2021-02-25 10:59:39 发布
最新推荐文章于 2021-02-25 10:59:39 发布
阅读量195 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/We_jia/article/details/87892537
版权

表单验证

填完每一项内容就进行判断，不符合要求就会报错

效果展示

全部代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表单验证</title>
    <link rel="stylesheet" href="css/iconfont.css"/>
    <style>
        #formuser {
            display: block;
            margin: 0 auto;
            width: 400px;
        }

        .form_user > li {
            list-style: none;
            height: 50px;
            width: 400px;
            border: 1px solid silver;
            border-radius: 5px;
            position: relative;
            margin: 40px 0;
        }

        .form_user > li.litxt > input {
            margin-left: 1px;
            width: 378px;
            height: 48px;
            border-style: none;
            outline: none;
            font-size: 20px;
            color: black;
            padding-left: 20px;

        }

        .tel {
            position: relative;
            border-style: none !important;
        }

        .usertelno {
            width: 150px;
            height: 50px;
            border: 1px solid silver;
            border-radius: 5px;
            line-height: 50px;
            position: relative;
            float: left;
        }

        .usertelno > input {
            position: absolute;
            top: 0;
            left: 1px;
            width: 120px;
            height: 48px;
            padding-left: 20px;
            border-style: none;
            font-size: 20px;
            outline: none;
        }

        #icon {
            position: absolute;
            right: 10px;
            top: 0;
            z-index: 2;
            color: gray;
        }

        .ph {
            float: right;
            width: 210px;
            height: 50px;
            border-radius: 5px;
            border: 1px solid silver;
            font-size: 20px;
            padding-left: 20px;
            outline: none;
        }


        .btn > input {
            width: 400px;
            height: 50px;
            outline: none;
            border-style: none;
            background-color: transparent;
            color: white;
            font-size: 22px;
        }

        .btn {
            background-color: #2e7fff;
        }

        .btn:hover {
            background-color: #40a6ff;
        }

        .telerror {
            clear: left;
            display: block;
            font-size: 14px;
            color: gray;
            position: relative;
            top: 5px;
        }

        .emailshow {
            display: block;
            font-size: 14px;
            color: gray !important;
            position: absolute;
            top: 53px;
        }

        .error {
            font-size: 14px;
            color: red;
            position: absolute;
            top: 53px;
            background-image: url("img/error@2x.png");
            background-repeat: no-repeat;
            background-size: 18px;
            padding-left: 25px;
        }

        .success {
            display: none;
            position: absolute;
            top: 15px;
            right: 10px;
        }

    </style>
</head>
<body>
<form id="formuser" action="" method="get">
    <ul class="form_user">
        <li class="litxt">
            <input type="text" class="userData" name="email" placeholder="邮箱" value=""/>
            <span class="emailshow">请输入你常用的邮箱（非qq/foxmail邮箱）</span>
            <img class="success" src="./img/tick.png" alt=""/>
        </li>
        <li class="litxt">
            <input type="text" class="userData" name="nickname" placeholder="昵称" value=""/>
            <img class="success" src="./img/tick.png" alt=""/>
        </li>
        <li class="litxt">
            <input type="text" class="userData" name="password" placeholder="密码" value=""/>
            <img class="success" src="./img/tick.png" alt=""/>
        </li>
        <li class="tel">
            <div class="usertelno">
                <input type="text" id="telnum" value="+86"/>
                <i id="icon" class=" iconfont">&#xf01a6;</i>
            </div>
            <input class="ph" placeholder="手机号码" type="text"/>
            <span class="telerror">可通过该手机号找回密码</span>
        </li>
        <li class="btn"><input type="submit" value="立即注册"/></li>
    </ul>
</form>

<script>
    var btnChild = document.getElementsByClassName("btn")[0].children;  //获取到立即注册按钮
    var emailshow = document.getElementsByClassName("emailshow")[0];   //获取到  请输入你常用的邮箱
    var litxt = document.getElementsByClassName("litxt");   //获取三个框的父元素
    var formuser = document.getElementById("formuser");   //获取的表单id
    var nameinfo = ["邮箱", "昵称", "密码"];
    var success = document.getElementsByClassName("success");
    var userData = document.getElementsByClassName("userData");  //获取三个框 input

    var telnum = document.getElementById("telnum");//获取电话号码的文本框
    var telnumber = document.getElementsByClassName("telnumber")[0];  //获取各个地方的电话号码

    //效果事件
    telnum.onfocus = function () {
        telnumber.style.display = "block";
    };

    telnum.onblur = function () {
        telnumber.style.display = "none";
    };
    //用户点击单个注册
    /*    window.onload =*/
    addEvent();
    function addEvent() {
        for (var i = 0; i < userData.length; i++) {
            userData[i].index = i;
            // input获焦
            userData[i].onfocus = function () {
                emailshow.style.display = "none";
                this.parentNode.style.borderColor = "#2e7fff";  //显示边框蓝色
                //单独点击文本框   下面的报错移除，不能隐藏掉（隐藏表示一直存在）
                //两个条件，防止事件冒泡 将span标签都删除
                if (this.parentNode.lastChild.nodeName.toLowerCase() == "span" && this.parentNode.lastChild.className == "error") {
                    this.parentNode.lastChild.remove();
                }
            };

            // input失焦   俩种情况  为空或格式不正确
            userData[i].onblur = function () {
                /* this.parentNode.style.borderColor = "silver";*/
                if (this.value == "") {
                    litxt[this.index].style.borderColor = "red";
                    //创建一个类名称为error的元素 追加给litxt，每一个框
                    var span = document.createElement("span");
                    span.className = "error";
                    span.innerHTML = nameinfo[this.index] + "不能为空！";
                    litxt[this.index].appendChild(span);
                }
                //不为空的时候判断格式
                else {
                    if (this.index == 0) {
                        if (userData[this.index].value.indexOf("@") != -1 && userData[this.index].value.indexOf("@") + 1 != userData[this.index].value.length) {
                            success[this.index].style.display = "block";

                        }
                        else {
                            var span = document.createElement("span");
                            span.className = "error";
                            span.innerHTML = nameinfo[this.index] + "格式不正确！";
                            litxt[this.index].appendChild(span);
                        }
                    }
                    if (this.index == 1) {
                        success[this.index].style.display = "block";

                    }
                    if (this.index == 2) {
                        /*6-8位*/
                        if (userData[this.index].value.length >= 6 && userData[this.index].value.length<= 8) {
                            if (!isNaN(userData[this.index].value)) {
                                var span = document.createElement("span");
                                span.className = "error";
                                span.innerHTML = nameinfo[this.index] + "必须有字母或者是字符！";
                                litxt[this.index].appendChild(span);
                            }
                            else {
                                success[this.index].style.display = "block";

                            }
                        }
                        else {
                            var span = document.createElement("span");
                            span.className = "error";
                            span.innerHTML = nameinfo[this.index] + "必须是6-8位！";
                            litxt[this.index].appendChild(span);
                        }
                    }
                }
            }

        }

    }

    //自动验证   处理用户直接点击注册   直接提交的bug
    function submethods() {
        emailshow.style.display = "none";
        for (var i = 0; i < litxt.length; i++) {
            if (litxt[i].children[0].value == "") {
                litxt[i].style.borderColor = "red";
                //创建一个类名称为error的元素 追加给litxt，每一个框
                /*创建为dom元素之后  就可以处理事件的丢失*/
               if(litxt[i].lastElementChild.className!="error"){
                    var span = document.createElement("span");
                    span.className = "error";
                    span.innerHTML = nameinfo[i] + "不能为空！";
                    litxt[i].appendChild(span);
                }

            }
        }
        var length = document.getElementsByClassName("error").length;
        return length;
    }

    //点击立即注册
    formuser.onsubmit = function () {
        if (submethods()) {
            return false;
            /*event.preventDefault();
             event.stopPropagation();*/
        }
        return true;
    };
</script>
</body>
</html>

 

We_jia
关注
专栏目录
AngularJs demo 例子（表单验证) form
08-31
漂亮大气的bootstrap表单,angularJs表单验证 ，是angularJs入门很好的例子
“偷懒”的表单验证Demo
happmaoo的专栏
05-21 88
我们在做开发时，经常要做表单验证，比如验证文本框必须填内容时，而文本框又很多时，传统的做法是逐个判断: if (form1.name.value == "") { alert("Sorry,please input your name!") form1.focus(); } 这样一来要写的代码太多了,有没有“偷懒”的方法呢，答案是肯定的，请看下面的代码：代码如下: &lt;!DOCTYPE htm...
demo1表单验证
正在无风时
08-17 319
学了两周的js，做了一个表单验证的demo… HTML样式： 用户名要求：1-6位英数命名,不以数字开头，不能包含非法符号； 密码要求：6-12位数字、字母组合；单一数字，小写字母，或大写字母，提示密码强度为弱；数字+小写字母、数字+大写字母或小写字母+大写字母，提示密码强度为中；数字、小写字母、大写字母全都包含，提示密码强度为强，不能包含非法符号； 确认密码要求:两次密码输出一致，否则提示密码...
表单正则验证Demo
不是七七子的博客
02-25 355
先目睹下页面吧ヾ(๑╹◡╹)ﾉ" 主要技术点： 输入框为空时提示该项为空； 输入框错误时提示该项错误； 只有各项都符合要求，才能提交，否则提示； 重置后各项都为空，相应的提示也消失。 HTML代码： <body> <div id="div-id"> <h1>个人信息登记表</h1> <!-- 各项放到表格里，看着整齐 --> <!-- 提交和重置按钮不能直接加事件，可以在f.
JavaScript表单小Demo
MixedSignals的博客
03-31 145
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
常用javascript表单验证汇总
01-19
实例讲解：验证输入的是否是数字，是否满足数字位数，如果错误，并进行友情提醒。 效果图： <!DOCTYPE html> <html> <body> 我的第一段 JavaScript 请输入数字。如果输入值不是数字，浏览器会弹出...
AJAX验证表单demo
05-23
总之，"AJAX验证表单demo"是一个学习前端交互和AJAX技术的好资源，它演示了如何利用JavaScript和ECMAScript实现动态表单验证，从而提供更好的用户体验。通过研究源码和按照readme.md的指示运行示例，开发者可以深入...
jquery 表单进行客户端验证demo
10-29
综上所述，此jQuery客户端验证DEMO展示了如何利用jQuery Validate插件对表单数据进行有效性检查，包括必填项检查和最小长度验证。这对于任何需要用户输入数据的网页都是至关重要的，能够防止无效或不完整数据的提交...
jQuery三级城市联动带手机验证码表单验证
04-27
在这个“jQuery三级城市联动带手机验证码表单验证”的示例中，我们将深入探讨如何利用jQuery实现一系列功能，包括三级城市选择的联动效果、手机验证码的验证以及整个表单的验证流程。 首先，`jQuery`是一个广泛使用...
jQuery表单验证例子(demo)
10-19
jquery.validate校验的例子，解压文件夹，demo.html可以直接运行
Jquery validate表单验证Demo下载
09-23
jquery validate表单验证插件制作用户注册页面表单提交验证，用户名、手机、密码、邮箱等表单验证。通过这款validate表单验证插件能制作多种表单提交验证。
jQuery插件集之(表单验证)各种input等验证+Demo
02-24
插件+Demo+源码 亲测可用！ 插件及其方便，封装的很好，各种验证方法可自由定义，支持ajax异步验证等功能。表单验证佳品！
原生js实现表单验证（提交后验证）
08-29
在平常的页面当中，我们经常用到表单和表单验证，表单验证是数据进入数据库前一次在客户机利用脚本检查数据类型的行为。作为一个初学者，在这里贴下我的菜鸟代码。
网站注册页面Demo及表单验证功能源码
半亩方塘
07-09 6467
页面的构建简单地应用了bootstrap，通过js代码实现了注册表单的验证功能。代码如下：<!DOCTYPE html> <html> <head> <title>用户注册</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <!-- 用于适应不
jquery-validate验证框架（来自菜鸟编程）
x_Fledgling的博客
01-13 808
菜鸟教程(runoob.com) $.validator.setDefaults({     submitHandler: function() {       alert("提交事件!");     } }); $().ready(function() { // 在键盘按下并释放及提交后验证提交表单   $("#signupForm").validate({  
JavaScript - 表单验证实例
热门推荐
陆讯
04-26 1万+
表单验证1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>表单验证
from表单讲解+js表单验证和提交（非常好的一篇文章）
07-26 7738
https://www.cnblogs.com/woshimrf/p/4904222.html
JS表单验证-12个常用的JS表单验证
yoyoosyy的博客
03-17 4433
最近有个项目用到了表单验证，小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下，和大家一起分享~~~ 1. 长度限制 1. 长度限制 function test() { if(document.a.b.value.length>50) { alert("不能超过50个字符！"); document.a.b.focus();
JavaScript表单验证实例与在线demo
本文主要介绍了JavaScript表单验证开发的实战指南，包括如何在网页上实现各种类型的表单验证功能。作者通过实例代码分享了如何使用JavaScript对用户的输入进行有效验证，以确保数据的准确性和完整性。提供的验证类型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值