JavaScript操作表单（验证）

表单是什么 form DOM树

•  文本框 text
• 下拉框 <select>
• 单选框 radio
• 多选框 checkbox
• 隐藏域 hidden
• 密码框 password
• .......

表单的目的：提交信息

获得要提交的信息

<script>
    let input_text = document.getElementById('username');
    let boy_radio = document.getElementById('boy');
    let girl_radio = document.getElementById('girl');
    //得到输入框的值
    input_text.value
    //修改输入框的值
    input_text.value = '123'

    //对于单选框，多选框等等固定的值，用.value只能取到当前的值
    boy_radio.checked;  //查看返回的结果，是否为true,如果为true,则被选中
    boy_radio.checked = true;   //赋值
</script>

 

提交表单     md5加密密码

<form action="#" method="post">
    <p>
        <span>用户名：</span>
        <input type="text" id="username" name="username">
    </p>

    <p>
        <span>密码：</span>
        <input type="password" id="password" name="password">
    </p>

    <!--绑定事件-->
    <button type="submit" onclick="check()">提交</button>
</form>

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script>
    function check() {
        let uname = document.getElementById('username');
        let pwd = document.getElementById('password');
        console.log(uname.value);
        //MD5算法
        pwd.value = md5(pwd.value)
        console.log(pwd.value);
    }
</script>