js基础（表单操作）

MIMO. mimo

已于 2023-03-11 20:10:08 修改

阅读量454

点赞数

文章标签： javascript 前端 html

于 2023-03-11 18:34:12 首次发布

本文链接：https://blog.csdn.net/mimo_mimo/article/details/129465599

版权

js表单操作（验证）

表单是什么

https://www.runoob.com/html/html-forms.html

表单是用来提交信息的
如下通过js获取表单内的内容

①获取文本框内容

<body>
    <form action="post">
        <span>用户名: </span><input type="text" id="username">
    </form>


</body>

<script>

    var input_text = document.getElementById('username');
 </script>

输入kkk后获取

获取用户表单内容
给文本框中赋值，修改内容

②获取radio内容

<body>
    <form action="post">
        <p>
        <span>用户名: </span><input type="text" id="username">
        </p>

        <!-- 多选框指就是定义好的value -->
        <p>
            <span>sex</span>
            <input type="radio" name="sex" value="man" id="man">man
            <input type="radio" name="sex" value="woman" id="woman">woman
        </p>


    </form>


</body>

<script>

    var input_text = document.getElementById('username');
    var boy = document.getElementById('man');
    var girl = document.getElementById('woman');


 </script>

在这里插入图片描述
对于单选框，多选框，每一个选项的value都是被写死的故没办法通过value值来改变或者获取表单内容。

在这里插入图片描述我们通过查看 girl.checked 这一值是否为ture来判断表单内容
也可以用girl.checked = ture来改写表单。

③提交表单验证

通过按钮出发js代码

 <button type="button" onclick="aaa()">提交</button>

<body>
    <form action="post">
        <p>
            <span>用户名: </span><input type="text" id="username">
        </p>
        <p>
            <span>密码: </span><input type="password" id="password">
        </p>
        <!-- 给提交绑定事件onclick 被点击 -->
        <button type="button" onclick="aaa()">提交</button>

    </form>


</body>

<script>

    function aaa(){
        var unanme = document.getElementById("username");
        var pwd = document.getElementById("password");
        console.log(unanme.value);
    }

 </script>

点击提交按钮后（onclick），console.log了姓名的value

在这里插入图片描述也就是说输入密码时也可以被显示出来

input标签需要增加name属性，抓包可以抓到

明文展现密码

使用MD5算法

MD5工具类
首先，将如下代码放在表头

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

然后，运用MD5的方法更改pwd的value

    function aaa(){
        var unanme = document.getElementById("username");
        var pwd = document.getElementById("password");
        pwd.value = md5(pwd.value);
    }

可以看到点击按钮后传输密码改变

在这里插入图片描述
完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
    <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>
        <!-- 给提交绑定事件onclick 被点击 -->
        <button type="submit" onclick="aaa()">提交</button>

    </form>


</body>

<script>

    function aaa(){
        var unanme = document.getElementById("username");
        var pwd = document.getElementById("password");
        pwd.value = md5(pwd.value);
    }

 </script>
</html>