javascript获取form表单内input值的方法

在js中，可以通过多种方式来获取form内输入框的值，下面就简单的说几种，各位可以参考一下。

js获取form内输入框的值

1、通过定位表单元素获取输入值

例：

<form action="" id="login">
    <input type="text" name="username" value="mochu" >
    <input type="text" name="userpass" value="mochupass">
</form>
<script>
    form = document.forms.login;
    console.log(form.username.value);
    console.log(form.userpass.value);
</script>

2、通过form中的ID获取输入框的值

<form action="" id="login">
    <input type="text" name="username" value="mochu" >
    <input type="text" name="userpass" value="mochupass">
</form>
<script>
    form = document.querySelector('#login');
    console.log(form.username.value);
</script>

3、直接获取form内控件的值

<form action="" id="login">
    <input type="text" id="username" name="username" value="mochu" >
</form>
<script>
   // let email = document.getElementById('username').value;
    let email = document.querySelector('#username').value;
    console.log(email);
</script>

4、使用FormData对象，将表单内的内容序列化为一个对象

<form action="" id="login">
    <input type="text" name="username" value="mochu" >
    <input type="text" name="useremail" value="mochu@qq.com" >
</form>
<script>
    let formData = new FormData(document.getElementById('login'));
    for (let [name, value] of formData.entries()) {
        console.log(name + ': ' + value);
    }
</script>

以上就是几种获取form表内数据的方法，各位可以挑选自己合适的用即可。