javascript学习笔记五(操作表单,md5加密)

最新推荐文章于 2024-05-17 10:07:15 发布

頂不住了

最新推荐文章于 2024-05-17 10:07:15 发布

阅读量141

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43706131/article/details/119240743

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

操作表单

文本框
下拉框
单选框
多选框
隐藏框
密码框 passwd

1.获取表单信息

<body>
<form action='#' method="post">
    //文本框
    <p>
    <span>用户名：</span>
    <input type="text" id="username">
    </p>
    //单选框
    <p>
    <span>性别</span>
    <input type="radio" name="sex" value="man" id="boy">男
    <input type="radio" name="sex" value="women" id="girl">女
    </p>
</form>
</body>
<script>
    var input_text = document.getElementById('username';)
    //得到文本框的值
    input_text.value
    //修改文本框的值
    input_text.value='123'
    var boy_radio = document.getElementById('boy';)
    var girl_radio = document.getElementById('girl')
    //对于单选框、多选课等固定的value，boy_radio.value只能去到当前的值  
    boy_radio.checked; //看返回的结果，是否为true，如果为true则被选中
    boy_radio.checked=true; //赋值
</script>

2.提交表单，MD5加密

文本框的密码在控制台上加密，即后台的密码是如何加密的？

<head>
    <!-- 首先要导入MD5这个工具包 -->
    <script src="https://cdn . bootcss . com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
    <!-- action属性是提交完表单后调整的网页 -->
    <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被点击。按钮提交事件aaa()--> .
    <button type="submit" onclick="aaa()">提交</button>
</form>
</body>
<script>
    function aaa() {
        var uname = document.getElementById( 'username ' );
        var pwd = document.getElementById('password' );
        console.1og(uname.value);
        //MD5算法把pwd变成乱码，用这个方法会在前端把密码加长 用户体验感不好
        pwd.value = md5(pwd.value);
        console.1og(pwd.value);
    }
</script>

表单提交，md5加密优化版：

<!-- 使用form提交事件aaa()
    onsubmit=绑定一个检测的函数，返回true或false
    将这个结果返回给表单，使用onsubmit接收
    onsubmit="return aaa()"
 -->
 <form action="https ://www. baidu. com/" method="post" 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" >
    </form>
<script>
    function aaa() {
        alert(1);
        var uname = document.getElementById( 'username' );
        var pwd = document.getElementById(" input-password" );
        //通过隐藏去提交
        var md5pwd = document.getElementById('md5-password' );
        md5pwd.value = md5(pwd.value);
        //可以校验判断表中内容，true就是通过提交，false, 阻止提交
        return true;
        }
</script>

頂不住了

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript学习笔记五(操作表单,md5加密)

操作表单文本框下拉框单选框多选框隐藏框密码框 passwd1.获取表单信息<body><form action='#' method="post"> //文本框 <p> <span>用户名：</span> <input type="text" id="username"> </p> //单选框 <p> <span&g
复制链接

扫一扫