• 操作表单（验证）

    目录

    1、获得和设置表单的值

    表单是什么？ from DOM树

    获得要提交的信息

    2、表单提交验证及前端密码MD5加密

    未加密：

    提交表单 MD5加密密码 表单优化

     

    1、获得和设置表单的值

    表单是什么？ from DOM树

    • 文本框 text

    • 下拉框 select

    • 单选框 radio

    • 多选框 checkbox

    • 隐藏域 hidden

    • 密码框 password

    表单的目的：提交信息

    获得要提交的信息

    代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8.  
    10. <form action="post">
    11.  
    12.     <p>
    13.         <span>用户名：span>
    14.         <input type="text" id="username">
    15.     p>
    16.  
    17.     
    18.     <p>
    19.         <span>性别：span>
    20.         <input type="radio" name="sex" value="man" id="boy">男
    21.         <input type="radio" name="sex" value="woman" id="girl">女
    22.     p>
    23.  
    24. form>
    25.  
    26. <script>
    27.     // 获取文本框的信息
    28.     let input_text = document.getElementById('username');
    29.     //    得到输入框的值
    30.     input_text.value
    31.  
    32.     //    修改输入框的值
    33.     input_text.value = '请输入内容'
    34.  
    35.     //    获取boy和girl的值
    36.     let boy_radio = document.getElementById('boy');
    37.     let girl_radio = document.getElementById('girl');
    38.  
    39.  
    40.     //对于单选框，多选框等等固定的值，boy_radio.value   girl_radio.value只能取到当前的值
    41.     boy_radio.value;
    42.     girl_radio.value;
    43.  
    44.     //查看返回的结果是否为true，如果是true，则被选中~
    45.     boy_radio.checked;
    46.     girl_radio.checked;
    47.     //   如果想要女孩被选中则： girl_radio.checked = true;
    48.     //   如果想要男孩被选中则： boy_radio.checked = ture;
    49.  
    50.  
    51. script>
    52.  
    53. body>
    54. html>

     

     输出效果：

    创建表单，获取文本框的数值

    修改文本框的值  

     

     

    获取单选框的值（后面可以使用checked去判断是否被选中！）

     

    2、表单提交验证及前端密码MD5加密

    未加密：

     

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8.  
    9. <form action="post">
    10.  
    11.     <p>
    12.         <span>用户名：span>
    13.         <input type="text" id="username">
    14.     p>
    15.     <p>
    16.         <span>密码：span>
    17.         <input type="text" id="password">
    18.     p>
    19.  
    20.     
    21.     <button type="button" onclick="aaa()">提交button>
    22.  
    23. form>
    24.  
    25. <script>
    26.  
    27.     function aaa() {
    28.         //获取用户名和密码
    29.         let uname = document.getElementById('username');
    30.         let pwd = document.getElementById('password');
    31.         //将用户名和密码的值打印出来
    32.         console.log(uname.value);
    33.         console.log(pwd.value);
    34.     }
    35. script>
    36.  
    37.  
    38. body>
    39. html>

     

    输出效果：

     

     

    提交表单 MD5加密密码 表单优化

    代码：

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6. head>
    7. <body>
    8.  
    10. <form action="post">
    11.  
    12.     <p>
    13.         <span>用户名：span>
    14.         <input type="text" id="username">
    15.     p>
    16.  
    17.     
    18.     <p>
    19.         <span>性别：span>
    20.         <input type="radio" name="sex" value="man" id="boy">男
    21.         <input type="radio" name="sex" value="woman" id="girl">女
    22.     p>
    23.  
    24. form>
    25.  
    26. <script>
    27.     // 获取文本框的信息
    28.     let input_text = document.getElementById('username');
    29.     //    得到输入框的值
    30.     input_text.value
    31.  
    32.     //    修改输入框的值
    33.     input_text.value = '请输入内容'
    34.  
    35.     //    获取boy和girl的值
    36.     let boy_radio = document.getElementById('boy');
    37.     let girl_radio = document.getElementById('girl');
    38.  
    39.  
    40.     //对于单选框，多选框等等固定的值，boy_radio.value   girl_radio.value只能取到当前的值
    41.     boy_radio.value;
    42.     girl_radio.value;
    43.  
    44.     //查看返回的结果是否为true，如果是true，则被选中~
    45.     boy_radio.checked;
    46.     girl_radio.checked;
    47.     //   如果想要女孩被选中则： girl_radio.checked = true;
    48.     //   如果想要男孩被选中则： boy_radio.checked = ture;
    49.  
    50.  
    51. script>
    52.  
    53. body>
    54. html>

     

    也可以参考这个代码：

    1. html>
    2. <html lang="en">
    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">script>
    8. head>
    9. <body>
    11. <form action="https://www.baidu.com" method="post" onsubmit="return f()">
    12.     <p>
    13.         <span>用户名：span><input type="text" id="username" name="username">
    14.     p>
    15.  
    16.     <p>
    17.         <span>密码：span><input type="password" id="input-password">
    18.     p>
    19.     
    20.     <input type="hidden" id="md5-pwd" name="password">
    21.     
    22.     
    23.     <button type="submit">提交button>
    24. form>
    25.  
    26. <script>
    27.     function f() {
    28.         let username = document.getElementById('username');
    29.         let pwd = document.getElementById('input-password');
    30.         let md5PWD = document.getElementById('md5-pwd');
    31.         console.log(username.value);
    32.         //md5算法
    33.         md5PWD.value = md5(pwd.value);
    34.         //可以校验判断表单内容，true就是可以提交，false就是阻止提交
    35.         return true;
    36.     }
    37. script>
    38. body>
    39. html>

  • 相关阅读:
    Tomcat相关概述和部署
    JavaScript 中类的使用(笔记)
    中级xss绕过【xss Game】
    线性代数的学习和整理18：什么是维度，什么是秩？秩的各种定理&&秩的计算 (计算部分未完成)
    微服务3 Eureka注册中心
    初学UE5，UE4的教程适用UE5吗？
    初学J2V8
    RocketMQ的3种消息发送模式是什么？如何确保消息不丢失？
    面试让我手写红黑树？！
    【ODX介绍】-5-用于Flash刷写的ODX-F文件概述
  • 原文地址：https://blog.csdn.net/qq_46423017/article/details/127096223