form表单请求数据

最新推荐文章于 2024-06-18 02:30:35 发布

Asunny5

最新推荐文章于 2024-06-18 02:30:35 发布

阅读量957

点赞数

文章标签：前端 css javascript

本文链接：https://blog.csdn.net/m0_60979337/article/details/128652703

版权

form表单主要收集用户数据并且可以发送给后端。

form属性：

1.method:是请求方式。默认为get(从服务器上获取数据)、post(向服务器上传数据)

2.action:是请求后段服务的地址。可以是一个url地址或e-mail地址

3.onsubmit: 只能表单上使用,提交表单前会触发。true 则触发 false 则不触发

4.entype:把表单提交给服务器时(当method值为”post”)的互联网媒体形式。

4.1 application/x-www-form-urlencoded （在发送前编码所有字符）--默认

4.2 multipart/form-part （使用包含文件上传控件的表单时，必须使用该值。不对字符编码）

4.3 text/plain （空格转换为“+” ，但不对特殊字符编码）

缺点：form 表单发送数据后网页会跳转到发送数据的地址。

<!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>Document</title>
    <style>
        .box {
            width: 400px;
            margin: 0 auto;
            border: 1px solid gray;
        }

        .box>form:first-child {
            display: none;
        }
    </style>
</head>

<body>

    <div class="box">
        <!-- 1. 创建注册表单 -->
        <form class="form" method="post" onsubmit="return handSubmit(0)" action="http://8i98.com/dapi/vapi/register">
            <h1>用户注册</h1>
            <p>邮箱：<input name="email"></p>
            <p>密码：<input name="password" type="password"></p>
            <p>确认密码：<input name="password" type="password"></p>
            <button type="submit">提交注册</button>
            <p id="regbtn">已有账号？</p>
        </form>
        <!-- 2.创建登陆表单 -->
        <form class="form" method="post" onsubmit="return handSubmit(1)" action="http://8i98.com/dapi/vapi/login">
            <h1>用户登陆</h1>
            <p>邮箱：<input name="email"></p>
            <p>密码：<input name="password" type="password"></p>
            <button type="submit">确认登录</button>
            <p id="loginbtn">没有账号</p>
        </form>
        <!-- 3.上传文件的表单 -->
        <form method="post" onsubmit="return handSubmitFile()" enctype="multipart/form-data"
            action="http://www.8i98.com/dapi/vapi/adddetailimg">
            <input type="file" name="file">
            <button type="submit">确认上传</button>
        </form>
    </div>
    <script>
        var forms = document.querySelectorAll("form");
        var regbtn = document.querySelector("#regbtn");
        var loginbtn = document.querySelector("#loginbtn");
        //点击regbtn/loginbtn  则隐藏/显示
        regbtn.onclick = function () {
            forms[0].style.display = "none";
            forms[1].style.display = "block";
        }
        loginbtn.onclick = function () {
            forms[1].style.display = "none";
            forms[0].style.display = "block";
        }
        //3.写一个handSubmit 方法 1）判断邮箱命名的格式 2）密码设置的格式 3）密码和确认密码是否一致
        //上传索引 利用form onsubmit属性，如果判断为true onsubmit为true 表单则执行
        function handSubmit(index) {
            //获取input 中email 和 password 
            var input = document.querySelectorAll("input");
            //邮箱名称的值
            var email = input[0].value;
            //邮箱密码的值
            var password = input[1].value;
            //3.1 先判断邮箱的名称是否符合正则表达式 如果不符合则提示邮箱名不符合
            if (!emailReg(email)) {
                alert("邮箱格式不正确");
                return false;
            }
            //3.2 判断邮箱密码是否符合正则表达式，如果不符合则提示
            if (!passwordReg(password)) {
                alert("至少包含一个小写字母，大写字母和数字,数字，字母下线的组合的4-8位");
                return false;
            }
            //3.3 判断是否存在input[2] 如果有则判断是否与input[1]是否一样
            if (input[2]) {
                var repassword = input[2].value;
                if (password !== repassword) {
                    alert("两次密码输入不一致")
                    return false;
                }
            }
            return true;
        }
        //检验邮箱格式的方法
        function emailReg(str) {
            var reg = /^\w+(-?\w*)|(\.?\w*)@[A-z0-9]+[\.A-z0-9]+[A-z0-9]$/g
            return reg.test[str];
        }
        //检验邮箱密码的方法
        function passwordReg(str) {
            var pwdReg = /^(?=.*\d)(?=.*[A-Z])(?=.*[a-z])\w{4,8}$/
            return pwdReg.test(str);
        }
        //检验文件上传的图片大小和图片格式
        function handSubmitFile() {
            //获取上传的文件
            var dom = document.querySelector("input[name='image']");
            //由于可以上传多个文件，所有files 是一个类似数组对象。file是文件对象，包含上传文件的信息
            var file = dom.files[0];
            //限制上传文件的大小，file.size是上传文件的大小
            var max = 1024 * 1024 // 1M 
            //1.限制上传文件的大小
            if (file.size > max) {
                alert("只能上传1M以内的文件");
                return false;
            }
            // 限制上传文件的格式。file.name 是文件名称
            var name = file.name;
            //把图片格式放入一个数组
            var fileType = ["png", "jpg", "jpeg", "bmp"];
            //把图片名称的后缀名提出来
            var arr = name.split(".");//按.分割
            //提出数组中的最后一位，则是后缀名
            var type = arr[arr.length - 1];
            //判断后缀名是否在图片格式数组中 
            if (fileType.indexOf(type) === -1) {
                alert("只能上传png,jpg,jpeg,bmp");
                return false;
            }
            return true;
        }
        //文件上传成功以后，可以通过 http://8i98.com/apidoc/+服务器返回的url地址访问上传的文件
    </script>

</body>

</html>