JavaScript操作表单

最新推荐文章于 2023-03-11 18:34:12 发布

Remote_Li

最新推荐文章于 2023-03-11 18:34:12 发布

阅读量76

点赞数

分类专栏：前端基础文章标签： javascript js md5 前端 web

本文链接：https://blog.csdn.net/TvTToT/article/details/116054438

版权

前端基础专栏收录该内容

16 篇文章 0 订阅

订阅专栏

获得和设置表单的值

<form method="post" action="#">
    <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="woman" id="girl">女
    </p>
    <input type="submit">
</form>

<script>
	var input_text = document.getElementById('username');
    input_text.value; //得到输入框的值
    input_text.value = '123'; //修改输入框的值
    
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');
    //对于单选框，多选框等的固定的值，.value只能取得当前的值
    boy_radio.value; //当前的值，并非选中的值
    
	//通过.checked返回的值来判断是否被选中
    girl_radio.checked = true; //让girl被选中，赋值
</script>

提交表单（MD5加密密码）

<head>
    ......
    <!--MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form method="post" action="#">
    <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="a()">提交</button>
</form>

<script>
	function a(){
        var uname = document.getElementById('username');
        var pwd = document.getElementById('password');
        console.log(uname.value);
        console.log(pwd.value);
        //MD5算法加密密码
        pwd.value = md5(pwd.value);
        console.log(pwd.value);
    }
</script>
</body>

MD5加密密码优化，表单优化（推荐）

<head>
    ......
    <!--MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form method="post" action="#" onsubmit="return a()">
    <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 a(){
        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>

Remote_Li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript操作表单

获得和设置表单的值<form method="post" action="#"> <p> <span>用户名：</span><input type="text" id="username"> </p>  <p> <span>性别：</span> <inp..
复制链接

扫一扫