JavaScript【操作表单（验证）】

最新推荐文章于 2024-10-15 09:57:04 发布

超级码猴k

最新推荐文章于 2024-10-15 09:57:04 发布

阅读量694

点赞数

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

本文链接：https://blog.csdn.net/qq_48108092/article/details/123607564

版权

Java 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了HTML表单的基本元素，包括文本框、下拉框、单选按钮、多选按钮、隐藏域和密码框，并展示了如何获取表单数据。同时，讲解了如何使用MD5进行密码加密，并在表单提交前进行校验，确保数据安全。此外，还涉及到了表单的提交事件和阻止默认提交的方法。

摘要由CSDN通过智能技术生成

操作表单（验证）

表单是什么 form DOM树

文本框text
下拉框< select >
单选框radio
多选框checkbox
隐藏域hidden
密码框password

表单的目的:提交信息

获得要提交的信息

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

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

<script>
    var input_text=document.getElementById('username');
    var boy_radio=document.getElementById('boy');
    var girl_radio=document.getElementById('girl');

    //得到输入框的值
    input_text.value;
    input_text.value='123';

    //对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
    boy_radio.checked;//查看返回的结果，是否为true，如果为true则被选中
    girl_radio.checked =true;//赋值

</script>

</body>

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--onsubmit=绑定一个提交检测的的数，true. false将这个结果返回给表单，使用onsubmit接收!
onsubmit="return aaa() "
l&ndash;&gt;-->
<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(){
    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>

</body>

摘录自遇见狂神说，仅供自己学习使用