JS19：操作表单（验证）

最新推荐文章于 2023-09-07 20:38:42 发布

一个优雅的搬砖人

最新推荐文章于 2023-09-07 20:38:42 发布

阅读量245

点赞数

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

本文链接：https://blog.csdn.net/weixin_48306950/article/details/123982306

版权

JavaScript 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

什么是表单

表单的主要作用是接收用户的输入，当用户提交表单时，浏览器将用户在表单中输入的数据打包，并发送给服务器，从而实现用户与 web 服务器的交互。

表单是控件的容器，一个表单由 form 元素、表单控件和表单按钮三部分组成：

form 元素：用来创建表单，并通过 action、method 和 enctype 三个属性，来设置表单的提交路径、提交方式、编码类型。
表单控件：主要用来收集用户数据，包括 label、input、textarea、select、datalist、progress 等，也包括对表单控件进行分组显示的 fieldset 和 legend 控件。根据功能的不同，input 控件又分为 text、password、radio、checkbox、file、submit、reset、search、tel、url、email、number、range、color、Date Pickers 等类型。
表单按钮：包括提交按钮、重置按钮和一般按钮。提交按钮和一般按钮可用于把表单数据发送到服务器，重置按钮用于重置表单，把整个表单恢复到初始状态。

任何 HTML 元素，都由 form 元素创建，用于在提交表单时，对表单数据进行识别。访问者通过提交按钮提交表单，表单提交后，填写的数据就会发送到服务器端进行处理。

获取和设置表单的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#">
  <p>
      <span>用户名：</span>
      <input type="text" id="username"/>
  </p>

    <!-- 多选框的值，就是定义好的value -->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="man"/> 男
        <input type="radio" name="sex" value="woman" id="woman"/> 女
    </p>
</form>

<script>
    const input_text = document.getElementById('username');
    const man_radio = document.getElementById('man');
    const woman_radio = document.getElementById('woman');

    // 获取输入框的值
    input_text.value;
    // 修改输入框的值
    input_text.value = '123';

    // 对于单选框、多选框等固定值的情况，man_radio.value 只能取到当前的值
    // 使用 checked 校验当前是否被选中；选中为 true，未选中为 false
    man_radio.checked;
    woman_radio.checked;

</script>
</body>
</html>

获取值

设置值

校验是否被选中

提交表单

在提交时如果密码这种字段使用明文显示，那么很容易会被“偷走”，所以需要进行一些处理，至少在前台不能明文显示出来。所以使用 md5 进行加密处理！

第一种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交表单</title>
    <!-- 引入 md5 -->
    <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>

<script>
    function aaa() {
        const username = document.getElementById('username');
        const password = document.getElementById('password');
        console.log(username.value); // 123456
        console.log(password.value); // 123456
        // 避免密码明文会被其他人看见，这里使用 MD5 算法进行转换
        password.value = md5(password.value);
        console.log(password.value); // e10adc3949ba59abbe56e057f20f883e
    }
</script>
</body>
</html>

运行结果

点击提交后

第二种方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交表单</title>
    <!-- 引入 md5 -->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
    表单绑定提交事件
    onsubmit 绑定一个提交检测的函数，函数返回 true 或 false
    将这个结果返回给表单，需要使用 return，直接给值不行。
    onsubmit="return aaa()" 有效
    onsubmit="aaa()"  无效
    如果函数结果为 false，将不会提交成功
          结果为 true，成功提交
          
    action 这里是提交成功后会跳转的网址
    添加了百度，只是为了验证提交是否成功了。
-->
<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">

    <!-- 绑定事件 onclick 被点击时触发 -->
    <button type="submit">提交</button>
</form>

<script>
    function aaa() {
        const username = document.getElementById('username');
        const password = document.getElementById('input-password');
        const md5password = document.getElementById('md5-password');
        // 避免密码明文会被其他人看见，这里使用 MD5 算法进行转换
        md5password.value = md5(password.value);

        // 可以判断表单提交的内容，返回 true 是通过提交，false 是阻止提交
        return true;
    }
</script>
</body>
</html>

区别

第一种方式可以达到密码加密显示的效果，但是操作的是同一输入框的值，所以在提交的时候密码被加密的瞬间会有一个长度变化的回显，并不完美。所以有了第二种方式，使用两个输入框，提交的是隐藏的那个 md5-password，因为 name 属性定义在 md5-password 上面，所以提交的是 md5-password 的值，并不会对显示的 password 造成影响。

另外，第二种方式中说明了从表单级别绑定提交事件。

一个优雅的搬砖人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS19：操作表单（验证）

什么是表单表单的主要作用是接收用户的输入，当用户提交表单时，浏览器将用户在表单中输入的数据打包，并发送给服务器，从而实现用户与 web 服务器的交互。表单是控件的容器，一个表单由 form 元素、表单控件和表单按钮三部分组成：form 元素：用来创建表单，并通过 action、method 和 enctype 三个属性，来设置表单的提交路径、提交方式、编码类型。表单控件：主要用来收集用户数据，包括 label、input、textarea、select、datalist、progress
复制链接

扫一扫