获取＜form＞表单的数据、阻止默认行为

郑建零零发

已于 2023-03-28 17:55:42 修改

阅读量107

点赞数

分类专栏： js 文章标签： html 前端 servlet

于 2023-03-28 16:58:30 首次发布

本文链接：https://blog.csdn.net/qq_52421092/article/details/129819835

版权

js 专栏收录该内容

86 篇文章 3 订阅

订阅专栏

index.html

<form id="loginform">
    <div class="mb-3">
        <label for="username" class="form-label">用户名</label>
        <input type="text" class="form-control" id="username" aria-describedby="emailHelp" required>
    </div>
    <div class="mb-3">
        <label for="password" class="form-label">密码</label>
        <input type="password" class="form-control" id="password" required>
    </div>
    <button type="submit" class="btn btn-primary">登录</button>
    <!-- <div id="emailHelp" class="form-text">用户名密码不匹配</div> -->
</form>

表单中的required是一个验证属性当表单为空的时候就会提示当前表单为空就点击不了submit按钮

index.js

const loginform = document.querySelector("#loginform")
loginform.onsubmit = function(evt) {
    evt.preventDefault()  // 阻止默认行为  不然点击submit按钮会默认跳转到当前页
    console.log(username.value, password.value)
}

效果：