禁用表单的三种方式 - PHP学习

首页 > 博客列表 > 禁用表单的三种方式

博主信息

博文 27

粉丝 1

访问量 96424

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

禁用表单的三种方式

原创

1044人浏览过

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1109作业</title>
<!--    作业内容：-->
<!--    1. 实例演示禁用表单默认提交的三种方式-->
<!--    2. 实例演示this.target,currentTarget的区别与联系-->
<!--    3. (选做) 用JS实现表单中的邮箱和密码的验证(除了非空验证)-->
    <style>
        .a1,button {margin-left: 100px}
        form{
            margin: 15px 15px
        }
        div{padding: 8px}
        p{color: #55a532}
    </style>
</head>
<body>
<!--禁用：onsubmit=" return false"-->
<form action="a.php" method="post" id="login1"  >
    <label class="a1">用户登陆</label><br>
    <label for="phone" >手机号: <input type="text" id="phone"></label>
    <div><label for="pwd" >密码：<input type="text" id="pwd"></label></div>
    <button name="submit">提交</button>
</form>
<h4>1. 禁用表单默认提交的三种方式</h4>
<ul>
    <li>form处加 onsubmit=" return false"</li>
    <li>通过JS事件event.preventDefault()禁用</li>
    <li>修改button提交按钮的type属性，默认为type="submit"，改为type="button"</li>
</ul>
<hr>
<h4>2. 实例演示this.target,currentTarget的区别与联系</h4>
<p>如果不存在事件委托,不需要利用事件冒泡的话：</p><p>事件主体和事件绑定是二合一的状态：ev.target === ev.currentTarget</p>
<p>事件绑定主体：ev.currentTarge</p>
<p>事件"触发"主体: 用户实际点击的元素：ev.target</p>
<script>
    // 通过js禁用表单默认提交
    // submit 是button name的值
    document.forms.login1.submit.onclick = function (ev) {
        console.log(ev);
        ev.preventDefault()
        console.log('已禁用表单默认提交！')
    }
</script>
</body>
</html>