信息填充功能e.preventDefault();和oForm.submit();

<!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>
        div{
            width: 500px;
            height: 200px;
            position: absolute;
            left: 50%;
            margin-left: -250px;
            /* background-color: pink; */
            text-align: center;
        }
    </style>
    <script type="module">
        import { set, get, remove } from"./cookie.js"
        window.onload=function(){
            var oLogin=document.getElementById("login");
            var oDelete=document.getElementById("delete");
            var oUsername=document.getElementById("username");
            var beforeUserName;
            var oForm=document.getElementById("form");
            // 检查cookie有没有已经保存的用户名,如果有则自动填充
            function checkBeforeUserName(){
                if(document.cookie){
                    // console.log(get('userName'));
                    beforeUserName=get('userName');
                    oUsername.value=beforeUserName;
                }
            }
            checkBeforeUserName();
            
            // 点击登录自动保存用户名到cookie
            oLogin.addEventListener('click',function(e){
                e.preventDefault();
                if(oLogin.value){
                    set('userName',oUsername.value,{maxAge:1000})
                    // document.cookie=`userName=${oUsername.value}; max-age=1000`;
                }
                oForm.submit();
            })

            // 点击删除自动从cookie删除用户名记录
            oDelete.addEventListener('click',function(e){
                    e.preventDefault();
                    // document.cookie=`userName=${oUsername.value}; max-age=-1`;
                    remove('userName')
                    oForm.submit();

            })
        }
    </script>
</head>
<body>
    <div>
        <form id="form" action="">
            用户名：<input id="username" type="text" placeholder="请输入用户名"><br>
            密码：<input type="password" ><br>
            <input id="login" type="submit" value="登录">
            <input id="delete" type="submit" value="删除">

        </form>
    </div>

</body>
</html>

cookie.js

// 写入 Cookie
const set = (name, value, { maxAge, domain, path, secure } = {}) => {
    let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
    if (typeof maxAge === 'number') {
      cookieText += `; max-age=${maxAge}`;
    }
    if (domain) {
      cookieText += `; domain=${domain}`;
    }
    if (path) {
      cookieText += `; path=${path}`;
    }
    if (secure) {
      cookieText += `; secure`;
    }
    document.cookie = cookieText;
    // document.cookie='username=alex; max-age=5; domain='
  };
  // 通过 name 获取 cookie 的值
  const get = name => {
    name = `${encodeURIComponent(name)}`;
    const cookies = document.cookie.split('; ');
    for (const item of cookies) {
      const [cookieName, cookieValue] = item.split('=');
      if (cookieName === name) {
        return decodeURIComponent(cookieValue);
      }
    }
    return;
  };
  // 'username=alex; age=18; sex=male'
  // ["username=alex", "age=18", "sex=male"]
  // ["username","alex"]
  // get('用户名');
  // 根据 name、domain 和 path 删除 Cookie
  const remove = (name, { domain, path } = {}) => {
    set(name, '', { domain, path, maxAge: -1 });
  };
  export { set, get, remove };

老师，代码中的这两个是否是本功能必须的？我试了不添加也可以成功实现，为啥？

e.preventDefault();

oForm.submit();

localhost999 2021-11-16

源自：本地存储 2-12 自由编程

收起

1回答

好帮手慕然然回答被采纳获得+3积分 2021-11-17 09:54:30

同学你好，不是必须的，需要看实际需求使用，首先，e.preventDefault()是用于阻止事件默认行为的，oForm.submit()是用于提交表单的。

其次，在这段代码中点击form表单中的提交按钮（<input id="login" type="submit" value="登录">），会有默认提交表单的行为，此时如果要阻止其默认提交表单，在提交表单之前还有其它操作（比如：验证表单），那么就要添加e.preventDefault()，等其它操作完成之后，再执行oForm.submit()提交表单数据。

如果想要在点击form表单中的提交按钮时，直接提交表单数据，没有其它操作的话，就可以不使用e.preventDefault()和oForm.submit()。所以，没有这两句代码也可以提交表单，这两句代码其实就是实现手动提交表单。

祝学习愉快！

收起回答

localhost999 提问者 #1

老师那丹丹从我本代码功能来看（保存用户名自动填充），是否需要这两句呢？

2021-11-17 10:46:10
localhost999 提问者 #2

老师那单单从我本代码功能来看（保存用户名自动填充），是否需要这两句呢？

2021-11-17 10:46:42
好帮手慕然然回复提问者 localhost999 #3

同学你好，这道编程题其实没有涉及到提交表单的功能（即把表单数据提交到后台服务器），只是实现将用户名保存到cookie中或在cookie中删除，所以oForm.submit()是不需要的。
但是由于同学在form表单中使用的是submit提交按钮，带有默认提交功能，会默认刷新页面，如果同学想阻止默认提交功能的话，就要使用e.preventDefault()，如果不想的话就不使用，其实这里使不使用都不会影响代码效果（不使用的话，手动刷新一下页面就可以了）。
祝学习愉快！

2021-11-17 11:12:09