JS-操作表单

Posted 2021-05-29 Si人

操作表单

表单本身也是一个DOM树，使用表单的目的就是为了提交信息

1. 获得表单

<form action="post">
    <p>
        <span>用户名:</span>
        <input type="text" id="username">
    </p>
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="boy" id="men">男
        <input type="radio" name="sex" value="girl" id="women">女
    </p>
</form>

let input_text=document.getElementById(\'username\');
let radio_boy=document.getElementById(\'men\');
let radio_girl=document.getElementById(\'women\');
​
//获取输入框的值
input_text.value;
//修改输入框内的数值
input_text.value=\'***\';
//对于单选框，复选框这类非固定数值的无法用**.value获取具体的值，需要使用**.checked查看是否呗选中
radio_boy.checked;
//修改这类数值也是用**.checked=\'true\';
radio_boy.checked=\'true\';

2. 提交表单

直接提交表单，缺点非常明显可以在网页Network中直接查看到密码

<div>
  <form action="#" method="post">
    <p>
      <span>用户名:</span>
      <input type="text" id="username" name="username">
    </p>
    <p>
      <span>密码:</span>
      <input type="password" id="psd" name="password">
    </p>
​
    <p>
      <button type="button" onclick="aaa()">提交</button>
    </p>
  </form>
</div>

​
        function aaa(){
          let users = document.getElementById(\'username\');
          let pwd = document.getElementById(\'psd\');
          console.log(users.value);
          console.log(pwd.value);
    };
​

 

对密码进行加密,依然存在缺点，再提交的一瞬间密码框里的字符会变长。可以直接看出实在哪里进行的加密

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js/"> 
     function aaa(){
          let users = document.getElementById(\'username\');
          let pwd = document.getElementById(\'psd\');
          console.log(users.value);
          console.log(pwd.value);
          pwd.value=md5(pwd.value);
    };
</script>

 

优化方案,密码框的显示里不会突变，增加了用户的体验，也难以发现实在哪里进行了加密

取消了密码框原有的name属性，添加一个hidden的属性，把真正的密码存放在这里提交

表单和标签里的onclick只需要选择其中之一即可

<div>
  <form action="#" method="post" /*onclick="renturn aaa()"*/>
    <p>
      <span>用户名:</span>
      <input type="text" id="username" name="username">
    </p>
    <p>
      <span>密码:</span>
      <input type="password" id="input_pwd" >
    </p>
       <input type="hidden" id="md5_pwd" name-"password" >
​
    <p>
      <button type="button" onclick="aaa()">提交</button>
    </p>
  </form>
</div>
​
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js/"> 
     function aaa(){
          let users = document.getElementById(\'username\');
          let pwd = document.getElementById(\'input_pwd\');
          let md5pwd = document.getElementById(\'md5_pwd\');
          
          md5pwd.value=md5(pwd.value);
         //这里的return可以校验表单的内容，true就是通过提交，false就是阻止（使用这种方法需要在onclick里面添加返回值return）
         return true;
    };
</script>