JS学习 七、操作表单（验证）

七、操作表单（验证）

表单是什么 from

• 文本框 <input type="text">，用于输入文本；
• 下拉框 <select>，用于选择一项
• 单选框 <input type="checkbox">，用于选择一项；
• 多选课 <input type="radio">，用于选择一项；
• 隐藏域 <input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到服务器。
• 密码框 <input type="password">，用于输入口令
• …….

表单的目的：提交信息

获得要提交的信息

<form action="post">
    <p>
        <span>用户名:</span><input id="username" type="text">
    </p>
    <!--多选框的值是固定的  就是定义好的value-->
    <p>
        <span>性别:</span>
        <input type="radio" id="boy" name="sex" value="man">男
        <input type="radio" id="girl" name="sex" value="woman">女
    </p>
</form>

<script>
    'use strict'
    var input_text = document.getElementById("username");
    //得到输入框的值
    input_text.value
    //修改输入框的值
    input_text.value = "153"
     //对于单选框，多选框等固定的值。boy_radio.value只能取得当前的值
    boy_radio.checked;//查看返回的结果，是否为true，为true则为选中
    boy_radio.checked = true;//赋值

</script>

提交表单

JavaScript可以以两种方式来处理表单的提交

md5加密

<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.18.0/js/md5.js"></script>

方式一是通过<form>元素的submit()方法提交一个表单，

//表单绑定提交事件
<form action="post">
    <p>
        <span>用户名:</span><input id="username" name="username" type="text">
    </p>
    <p>
        <span>密码:</span><input id="password" name="password" type="password">
    </p>

    <button type="submit" onclick="fun()">提交</button>
</form>

<script>
    'use strict'

    function  fun() {
        var username = document.getElementById("username");
        var password = document.getElementById("password");
        console.log(username.value);
        //密码进行MD5加密
        password.value = md5(password.value);
        console.log(password.value);

    }

</script>

这种方式的缺点是扰乱了浏览器对form的正常提交。浏览器默认点击<button type="submit">时提交表单，或者用户在最后一个输入框按回车键。

第二种方式是响应<form>本身的onsubmit事件，在提交form时作修改

<form action="post" onsubmit="return fun()">
    <p>
        <span>用户名:</span><input id="username" name="username" type="text">
    </p>
    <p>
        <span>密码:</span><input id="password" name="password" type="password">
    </p>

    <button type="submit" onclick="fun()">提交</button>
</form>

<script>
    'use strict'

    function  fun() {
        var username = document.getElementById("username");
        var password = document.getElementById("password");
        console.log(username.value);
        //密码进行MD5加密
        password.value = md5(password.value);
        console.log(password.value);
        return true;

    }

</script>

**注意：**要return true来告诉浏览器继续提交，如果return false，浏览器将不会继续提交form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。