• JavaScript-操作表单和前端加密

    1.获得和设置表单的值

    表单是什么？form-----DOM树

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

    表单的目的：提交信息
    我们获得要提交的信息

    写个表单

    1）得到输入框的值

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <form action="post">
    9.     <span>用户名：span><input type="text"id="username">
    10. form>
    11. <script>
    12.     var input_text = document.getElementById('username');
    13.  
    14. script>
    15. body>
    16. html>

    2）修改输入框的值

    3）对于单选框和多选框，查看返回结果:

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <form action="post">
    9.     <p>
    10.         <span>用户名：span><input type="text"id="username">
    11.     p>
    12.     <p>
    13.         <span>性别：span>
    14.         <input type="radio" name="sex" value="man" id="boy">男
    15.         <input type="radio" name="sex" value="woman" id="girl">女
    16.     p>
    17.  
    18. form>
    19. <script>
    20.     var input_text = document.getElementById('username');
    21.     var boy_radio = document.getElementById('boy');
    22.     var girl_radio = document.getElementById('girl');
    23.  
    24.     //对于单选框，多选框等固定的值，用value只能取到当前的值
    25.  
    26. script>
    27. body>
    28. html>

    2.表单的提交验证

    简单测试表单的提交:

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8. <form action="post">
    9.     <p>
    10.         <span>用户名：span><input type="text" id="username">
    11.     p>
    12.     <p>
    13.         <span>密码：span><input type="password" id="password">
    14.     p>
    16.     <button type="button" onclick="aaa()">提交button>
    17. form>
    18. <script>
    19.     function aaa() {
    20.         var uname = document.getElementById('username');
    21.         var pwd = document.getElementById('password');
    22.         console.log(uname.value);
    23.         console.log(pwd.value);
    24.     }
    25. script>
    26. body>
    27. html>

    3.MD5加密算法

    md5为计算机安全领域广泛使用的一种散列函数，用以提供消息的完整性保护。md5将整个文件当作一个大文本信息，通过其不可逆的字符串变换算法，产生了这个唯一的md5信息摘要。

    MD5加密工具类：https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     
    7.     <script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">
    8.  
    9.     script>
    10. head>
    11. <body>
    12. <form action="#" method="post">
    13.     <p>
    14.         <span>用户名：span><input type="text" id="username">
    15.     p>
    16.     <p>
    17.         <span>密码：span><input type="password" id="password">
    18.     p>
    20.     <button type="button" onclick="aaa()">提交button>
    21. form>
    22. <script>
    23.     function aaa() {
    24.         var uname = document.getElementById('username');
    25.         var pwd = document.getElementById('password');
    26.         console.log(uname.value);
    27.         //MD5加密
    28.         pwd.value=md5(pwd);
    29.         console.log(pwd.value);
    30.     }
    31. script>
    32. body>
    33. html>

    按钮绑定提交事件：

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     
    7.     <script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">
    8.  
    9.     script>
    10. head>
    11. <body>
    12. <form action="#" method="post">
    13.     <p>
    14.         <span>用户名：span><input type="text" id="username" name="username">
    15.     p>
    16.     <p>
    17.         <span>密码：span><input type="password" id="input-password">
    18.     p>
    19.     <input type="hidden" id="md5-password" name="password">
    21.     <button type="submit" onclick="aaa()">提交button>
    22. form>
    23. <script>
    24.     function aaa() {
    25.         var uname = document.getElementById('username');
    26.         var pwd = document.getElementById('input-password');
    27.         var md5pwd = document.getElementById('md5-password');
    28.  
    29.         md5pwd.value=md5(pwd.value);
    30.         return false;
    31.     }
    32. script>
    33. body>
    34. html>

    表单绑定提交事件

    需要通过οnsubmit= 绑定一个提交检测的函数 ：true false

    再将这个结果返回给表单，使用onsubmit接收

    1. html>
    2. <html lang="en" xmlns:th="http://www.thymeleaf.org">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     
    7.     <script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">
    8.  
    9.     script>
    10. head>
    11. <body>
    12. <form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
    13.     <p>
    14.         <span>用户名：span><input type="text" id="username" name="username">
    15.     p>
    16.     <p>
    17.         <span>密码：span><input type="password" id="input-password">
    18.     p>
    19.     <input type="hidden" id="md5-password" name="password">
    21.     <button type="submit">提交button>
    22. form>
    23. <script>
    24.     function aaa() {
    25.         alert(1);
    26.         var uname = document.getElementById('username');
    27.         var pwd = document.getElementById('input-password');
    28.         var md5pwd = document.getElementById('md5-password');
    29.  
    30.         md5pwd.value=md5(pwd.value);
    31.         return false;
    32.     }
    33. script>
    34. body>
    35. html>
  • 相关阅读:
    面试网络-0x01 http中的GET和POST区别？
    pytorch nn.Embedding 读取gensim训练好的词/字向量（有例子）
    基于eNSP的校园网设计的仿真模拟
    微信小程序关键词排名优化：提升你的小程序可见性
    使用香橙派学习 Linux的守护进程
    【无标题】
    机械学习—零基础学习日志（数学基础汇总1）
    C语言指针操作（三）*通过指针引用多维数组
    easyExcel生成动态表头
    第 45 届ICPC亚洲区域赛（济南）C Stone Game【题解】
  • 原文地址：https://blog.csdn.net/qq_61727355/article/details/126673889