JavaScript-表单对象

最新推荐文章于 2023-02-04 16:12:40 发布

小墨Sang

最新推荐文章于 2023-02-04 16:12:40 发布

阅读量751

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/xmosang/article/details/122707541

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

form标签本质上也是一个DOM对象

9.1、获取表单元素

表单的主要目的是提交信息

<form>
    用户名：<input type="text" id="username"><br/>
    性别：<input type="radio" name="sex" value="男" id="boy">男<input type="radio" name ="sex" value="女" id="girl">女
</form>

</body>
<script>
    var input=document.getElementById('username');
    console.log(input.value);//得到文本框的值
    input.value='123'//修改文本框的值
    var radio,
        radio_boy,
        radio_girl;
    radio_boy=document.getElementById('boy');
    radio_girl=document.getElementById('girl');
function check(){
    if(radio_girl.checked) {
        radio = radio_girl.value;
    }
    else if(radio_boy.checked) {
        radio = radio_boy.value;
    }
}
</script>

如果要获取单选框的选择，只能通过if语句来判断哪一个被选中，然后在赋值

9.2、表单绑定提交事件

在表单被提交时，我们可能会需要进行一些判断，比如判断不为空的情况

判断不为空我们可以直接在input标签内使用required属性即可自动判断不能为空

<input type="text" required>

若要进行更进一步的判断，我们需要自定义一个函数，这里以判断是否为空为例

按钮级别绑定事件

我们可以将我们写的判断功能绑定在submit按钮上，当点击submit按钮时，可以之心那个判段功能

<body>
<form action="#" method="post">
    用户名：<input type="text" id="username" name="username"><br>
    密码：<input type="password" id="pwd" name="password"><br>
    <input type="submit" onclick="name_check()">
</form>
</body>
<script>
    function name_check(){
        var name=document.getElementById('username'),
            pws=document.getElementById('pwd');
        if(name.value==='') alert('用户名不能为空');
        if(pws.value==='') alert('密码不能为空');
    }
</script>

表单级别绑定事件

还有一种方法是绑定在表单上，使用onsubmit属性

<body>
<form action="#" method="post" onsubmit="return name_check()">
    用户名：<input type="text" id="username" name="username"><br>
    密码：<input type="password" id="pwd" name="password"><br>
    <input type="submit">
</form>
</body>
<script>
    function name_check(){
        var name=document.getElementById('username'),
            pws=document.getElementById('pwd');
        if(name.value==='') {
            alert('用户名不能为空');
            return false;
        }
        if(pws.value==='') {
            alert('密码不能为空');
            return false;
        }
        pws.value=md5(pws.value);
    }
</script>

注意：绑定表单提交时，需要函数有一个返回值，返回值为true时，允许跳转，返回值为false时，则不允许跳转。

9.3、MD5加密

对于一个普通的表单，当我们提交时，可以在控制台抓到提交的信息

在这里插入图片描述

这样是十分不安全的

因此我们需要对密码进行加密操作

md5加密算法

导入md5的方法

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

使用时需要把密码通过md5加密一下：

pws.value=md5(pws.value);

在这里插入图片描述

使用md5算法后，在提交的一瞬间，会发现密码文本框的值变得特别长，可能会影响使用体验，我们使用加入一个隐藏文本框

<body>
<form action="#" method="post" onsubmit="return name_check()">
    用户名：<input type="text" id="username" name="username"><br>
    密码：<input type="password" id="userpwd"><br>
    <input type="submit">
    <input type="hidden" id="md5password" name="password">
</form>
</body>
<script>
    function name_check(){
        var name=document.getElementById('username'),
            userpwd=document.getElementById('userpwd'),
          md5password=document.getElementById('md5password');

        md5password.value=md5(userpwd.value);
    }
</script>

将加密后的值放在隐藏文本框内，这样就不会影响原密码文本框的样式，更加的安全

小墨Sang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-表单对象

form标签本质上也是一个DOM对象9.1、获取表单元素表单的主要目的是提交信息<form> 用户名：<input type="text" id="username"><br/> 性别：<input type="radio" name="sex" value="男" id="boy">男<input type="radio" name ="sex" value="女" id="girl">女</form>&l
复制链接

扫一扫