JavaScript-操作表单

2020-03-21

字数统计: 708字 | 阅读时长≈ 3分钟

JavaScript-操作表单（验证）

文本框 text
下拉框 select
单选框/多选框 radio/checkbox
密码框 password
隐藏域 hidden

…………

1. 通过javascript获得表单提交的信息

<body>
<form action="post">
    <p>
        <span>用户名：</span> <input type="text" id="username">
    </p>
    <p>
        <span>性别：</span>
        <input type="radio" name="gender" value="man" id="boy"> 男
        <input type="radio" name="gender" value="women" id="girl"> 女
    </p>

</form>
<script>
    let username = document.getElementById("username");
    //得到输入框的值
    username.value

    //修改输入框的值
    username.value = "123"

    //对于单选框，多选框等等，value只能取到当前的值
    let boy = document.getElementById("boy");
    let gril = document.getElementById("girl");

    boy.checked; //查看返回的结果是否为true,true就是选中了
    girl.checked; //查看返回的结果是否为true,true就是选中了
</script>
</body>

2. 表单高级验证

未加密的情况如下：

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

    </p>
    <p>
        <span>密码：</span> <input type="password" id="password">
    </p>
<!--绑定事件-->
    <button type="button" onclick="aaa()">提交</button>

</form>


<script>
    function aaa() {
        var username = document.getElementById("username");
        var pwd      = document.getElementById("password");
        console.log(username.value)
        console.log(pwd.value)
    }
</script>

2.1 使用md5加密

引入md5依赖

1
2
3

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script>

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

总体加密如下

<body>


<form method="post" action="#">
    <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="aaa()">提交</button>

</form>


<script>
    function aaa() {
        var username = document.getElementById("username");
        var pwd      = document.getElementById("password");
        console.log(username.value);
        console.log(pwd.value);
        //MD5 算法
        pwd.value = md5(pwd.value);
        console.log(pwd.value);
    }
</script>
</body>

加密结果如下：

2.2 加密表单优化

拦截加密

<body>

<!--表单绑定提交事件
onsubmit = 绑定一个提交检测的函数 true,false
将这个结果返回给表单，使用onsubmit接收
-->
<form method="post" action="https://www.baidu.com/" onsubmit="return aaa()">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username">

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

    <input type="hidden" id="md5-password" name="password">
    <!--绑定事件-->
    <button type="submit">提交</button>

</form>

<script>
    function aaa() {
        var username = document.getElementById("username");
        var pwd      = document.getElementById("input-password");
        var md5pwd   = document.getElementById("md5-password");

        md5pwd.value = md5(pwd.value);

        // return true   //允许表单提交
        return false  //阻止表单提交
    }
</script>
</body>

打赏

版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！