禁用表单默认提交和登录验证

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <link rel="stylesheet" href="/1109/form.css">
</head>
<body>
    <!-- <form action="login.php" method="post" id="login" onsubmit="return false"> -->
 <form action="login.php" method="post" id="login">
    <label class="title">用户登录</label>
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email" value="" autofocus />
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" />
    <!-- <button name="submit" type="button">登录</button> -->
    <button name="submit" >登录</button>
   </form>
    <!-- 
        1.form.onsubmit = 'return false';
        2.button默认的type属性是submit,此时让type的属性是button时也会禁用
        3.
     -->
     <script>
         document.forms.login.submit.onclick = function (ev) {
            console.log(ev);
            ev.preventDefault();
            ev.stopPropagation();
            console.log(ev.target)
            console.log(this);
            console.log(ev.currentTarget);
            console.log(ev.target === ev.currentTarget);
            console.log(this === ev.target);
            /**
         * * 当前事件主体的3种形式
         * * 1. ev.target
         * * 2. ev.currentTarget
         * * 3. this
         *  三者是完全一致的
         */ 
        console.log(this.form);
        let email = this.form.email
        let password   = this.form.password
        if (email.value.length===0 ||  password.value.length ===0) {
            alert("必填项不可为空")
        }else if(email.value.indexOf("@") === -1 || password.value.length<=8){  
                               alert(`请检查你的必填项是否正确,可能有以下几种情况:\n1.邮箱需要是正确的邮箱\n2.密码需要最少8位`)
        }
        }
     </script>
</body>
</html>
相关文章
