表单验证

最新推荐文章于 2024-04-16 11:57:14 发布

木易一

最新推荐文章于 2024-04-16 11:57:14 发布

阅读量150

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43684713/article/details/88972028

版权

JavaScript 专栏收录该内容

43 篇文章 1 订阅

订阅专栏

form标签

作用是用于将其他表单标签"包"起来，以便作为一个整体，可以提交数据到服务器。

写法：<form name="表单名称" action="目标地址" method="数据提交方式" ></form>

name：只是给该表单命名，用于js技术使用。

action：设定表单数据提交给哪个文件，用于后端技术（比如php）来接受并处理数据

method: 设定数据提交方式，用于根据不同的数据需求来选择合适的提交（传送）方式

数据提交方式有post和get两种方式，它们的区别：

GET请求在URL中传送的参数是有长度限制的，而POST没有。

GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

GET参数通过URL传递，POST放在Request body中。

GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

GET请求只能进行url编码，而POST支持多种编码方式。

GET请求会被浏览器主动cache，而POST不会，除非手动设置。

GET产生的URL地址可以被Bookmark，而POST不可以。

GET在浏览器回退时是无害的，而POST会再次提交请求。

深入:

GET和POST本质上没有区别

GET和POST是HTTP协议中的两种发送请求的方法。

HTTP是基于TCP/IP的关于数据如何在万维网中如何通信的协议。

HTTP的底层是TCP/IP。所以GET和POST的底层也是TCP/IP，也就是说，GET/POST都是TCP链接。

GET和POST能做的事情是一样的。你要给GET加上request body，给POST带上url参数，技术上是完全行的通的。

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；

而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

注意：

1. GET与POST都有自己的语义，不能随便混用。

2. 据研究，在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。

3. 并不是所有浏览器都会在POST中发送两次包，Firefox就只发送一次。

HTML DOM Form 对象

Form 对象代表一个 HTML 表单。

在 HTML 文档中 <form> 每出现一次，Form 对象就会被创建。

Form 对象属性

属性	描述
acceptCharset	服务器可接受的字符集。
action	设置或返回表单的 action 属性。
enctype	设置或返回表单用来编码内容的 MIME 类型。
id	设置或返回表单的 id。
length	返回表单中的元素数目。
method	设置或返回将数据发送到服务器的 HTTP 方法。
name	设置或返回表单的名称。
target	设置或返回表单提交结果的 Frame 或 Window 名。

Form 对象方法

方法	描述
reset()	把表单的所有输入元素重置为它们的默认值。
submit()	提交表单。

Form 对象事件句柄

事件句柄	描述
onreset	在重置表单元素之前调用。
onsubmit	在提交表单之前调用。

表单验证案例

模仿QQ注册的表单验证案例。。。


<!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;
        }

        .telnumber {
            display: none;
            position: absolute;
            border-radius: 5px;
            z-index: 9;
            top: 52px;
            width: 398px;
            height: 250px;
            border: 1px solid silver;
            background-color: white;
            overflow-y: scroll;
        }

        .telnumber > ul {
            margin: 0;
            padding: 0;
        }

        .telnumber li {
            list-style: none;
            height: 40px;
            line-height: 40px;
            padding-left: 20px;
            font-size: 20px;
            color: black;
        }

        .telnumber li:hover {
            background-color: #e4e4e4;
        }

        .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;
            left: 0;
            background-image: url("./img/error@2x.png");
            background-repeat: no-repeat;
            background-size: 20px;
            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 id="telnum" type="text" value="+86"/>
                <i id="icon" class=" iconfont">&#xf01a6;</i>
            </div>
            <input class="ph" placeholder="手机号码" type="text"/>

            <div class="telnumber">
                <ul>
                    <li>中国 +86</li>
                    <li>中国香港特别行政区 +852</li>
                    <li>中国澳门特别行政区 +853</li>
                    <li>中国台湾地区 +886</li>
                    <li>阿尔巴尼亚 +355</li>
                    <li>阿尔及利亚 +213</li>
                    <li>阿富汗 +93</li>
                    <li>阿根廷 +54</li>
                    <li>爱尔兰 +353</li>
                    <li>埃及 +20</li>
                    <li>埃塞俄比亚 +251</li>
                </ul>
            </div>
            <span class="telerror">可通过该手机号找回密码</span>
        </li>
        <li class="btn"><input type="submit" value="立即注册"/></li>
    </ul>
</form>
<script>
    var liuser = document.getElementsByClassName("litxt");
    var emailshow = document.getElementsByClassName("emailshow")[0];
    var telnumber = document.getElementsByClassName("telnumber")[0];
    var formuser = document.getElementById("formuser");
    var telnum = document.getElementById("telnum");
    //用户点击单个验证
    var txt = document.getElementsByClassName("userData");
    var success = document.getElementsByClassName("success");
    var nameinfo = ["邮箱", "昵称", "密码"];
    //网页加载完成的时候去给input文本框添加  focus  blur事件  进行数据的判断
    window.onload = addEvent();

    //效果事件
    telnum.onclick = function () {
        telnumber.style.display = "block";
    }
    telnum.onblur = function () {
        telnumber.style.display = "none";
    }
    //表单的提交事件
    formuser.onsubmit = function () {
        //submethods()  根据方法的返回值  错误的个数  来判断是否提交验证
        if (submethods()) {
            return false;
        }
        return false;
    }
    function addEvent() {
        for (var i = 0; i < txt.length; i++) {
            txt[i].index = i;
            txt[i].onfocus = function () {
                emailshow.style.display = "none";
                this.parentNode.style.borderColor = "#2e7fff";
                if (this.parentNode.lastChild.nodeName.toLowerCase() == "span" && this.parentNode.lastChild.className == "error") {
                    this.parentNode.lastChild.remove();
                }
                success[this.index].style.display = "none";
            };
            txt[i].onblur = function () {
                this.parentNode.style.borderColor = "silver";
                if (this.value == "") {
                    /*创建为dom元素之后  就可以处理事件的丢失*/
                    var span = document.createElement("span");
                    span.className = "error";
                    span.innerHTML = nameinfo[this.index] + "不能为空！";
                    this.parentNode.appendChild(span);
                    this.parentNode.style.borderColor = "red";
                }
                else {
                    //不为空的情况下  判断格式的问题
                    /*js 代码代码*/
                    if (this.index == 0) {
                        //邮箱
                        if (liuser[this.index].children[0].value.indexOf("@") != -1 && liuser[this.index].children[0].value.indexOf("@") + 1 != liuser[this.index].children[0].value.length) {
                            success[this.index].style.display = "block";
                        }
                        else {
                            var span = document.createElement("span");
                            span.className = "error";
                            span.innerHTML = nameinfo[this.index] + "格式不正确！";
                            liuser[this.index].appendChild(span);
                        }
                    }
                    if (this.index == 1) {
                        success[this.index].style.display = "block";
                    }
                    if (this.index == 2) {
                        //判断位数
                        if (liuser[this.index].children[0].value.length >= 6 && liuser[this.index].children[0].value.length <= 8) {
                            if (!isNaN(liuser[this.index].children[0].value)) {
                                var span = document.createElement("span");
                                span.className = "error";
                                span.innerHTML = nameinfo[this.index] + "必须有字母有符号！";
                                liuser[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位之间！";
                            liuser[this.index].appendChild(span);
                        }
                    }
                }
            }
        }
    }
    //自动验证的
    function submethods() {
        emailshow.style.display = "none";
        //处理用户直接点击注册   直接提交的bug
        for (var i = 0; i < liuser.length; i++) {
            if (liuser[i].children[0].value == "") {
                liuser[i].style.borderColor = "red";
                if (liuser[i].lastElementChild.className != "error") {
                    var span = document.createElement("span");
                    span.className = "error";
                    span.innerHTML = nameinfo[i] + "不能为空！";
                    liuser[i].appendChild(span);
                }
            }
        }
        var length = document.getElementsByClassName("error").length;
        return length;
    }
</script>
</body>
</html>

木易一

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单验证

form标签作用是用于将其他表单标签"包"起来，以便作为一个整体，可以提交数据到服务器。写法：<form name="表单名称" action="目标地址" method="数据提交方式" ></form>name：只是给该表单命名，用于js技术使用。action：设定表单数据提交给哪个文件，用于后端技术（比如php）来接受并处理数据method:...
复制链接

扫一扫