操作表单（验证；提交）

最新推荐文章于 2022-08-17 14:57:49 发布

大吖么大白菜

最新推荐文章于 2022-08-17 14:57:49 发布

阅读量118

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_45964083/article/details/117261029

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

操作表单

在这里做完验证就会避免在服务器端处理了

表单 form 也属于DOM里的节点

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

获取要提交的信息 input_text.value

<body>
<form method="post">
    <p>
        <span> 用户名:</span> <input type="text" id="username">
    </p>
<!--多选框的值就是定义好的value-->
    <p>
        <span>性别：</span> 
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="man" id="girl">女
    </p>
</form>

</body>
<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还是false
    girl_radio.checked = true; //赋值
</script>

提交表单

表单绑定提交事件
onsubmit = 绑定一个提交时需要检测的函数，true时提交，false时不提交
将这个结果返回给表单，使用onsubmit 接收
οnsubmit=“return aa（）”

在input中name的作用：
name 属性用于对提交到服务器后的表单数据进行标识
只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

<form method="post" action="#" onsubmit="return aa()">
    <p>
        <span> 用户名:</span> <input type="text" id="username" name="username">
    </p>

    <p>
        <span>密码：</span> <input type="password" id="password" >
    </p>

    <button type="submit" > 提交 </button>

    <input type="hidden" id="md5-password" name="password">
</form>

 
 <script>
     function aa() {
        var  uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');
        
//这里是下载的一个加密方法，使用该方法之后在页面审查的时候 显示密码的地方会是乱码，
//上面给隐藏的input项设置name，真正的密码项不设置name，而用md5这个下载的方法
        md5pwd.value = md5(pwd.value);

        //这里可以填写校验判断表单内容，true时通过，false是阻止提交
        return true;
     }
 </script>