操作表单

操作表单

• 用JavaScript操作表单和操作DOM是类似的，因为表单本身也是DOM树

• // <input type="text" id="email">
  //这种方式可以应用于 text 、 password 、 hidden 以及 select
  var input = document.getElementById('email');
  input.value; // '用户输入的值'
  //设置值只需直接赋值即可
  input.value = 'test@example.com'; // 文本框的内容已更新
  
  

• 对于单选框和复选框， value 属性返回的永远是HTML预设的值，而我们需要获得的实际是用户是否“勾上了”选项，所以应该用 checked 判断

  //<label><inputtype="radio"name="weekday"id="monday"value="1">Monday</label>
  //<label><inputtype="radio"name="weekday"id="tuesday"value="2">Tuesday</label>
  varmon=document.getElementById('monday');
  vartue=document.getElementById('tuesday');
  mon.value;//'1' 获取的是值
  tue.value;//'2'
  mon.checked;//true或者false 检查是否被选中
  tue.checked = true;//true或者false
  //设置 checked 为 true 或 false 即可
  

• 提交表单

  <!--方式一是通过 <form> 元素的 submit() 方法提交一个表单，例如，响应一个 button 的 click 事件-->
  <!--HTML-->
  <form id="test-form" method="post">
      <input type="text" id="test" name="test">
      <input type="password" id="password" name="password">
      <button type="submit" onclick="doSubmitForm()">Submit</button>
  </form>
  <script>
      //这种方式的缺点是扰乱了浏览器对form的正常提交。
      function doSubmitForm(){
          var text=document.getElementById('test');
          var psw=document.getElementById('password');
          console.log(text.value);
          console.log(psw.value);
          psw.value = '222';
      }
  </script>
  
  <!--第二种方式是响应 <form> 本身的onsubmit 事件，在提交form时作修改-->
  <!--HTML-->
  <form id="test-form" onsubmit="return checkForm()">
      <input type="text" name="test">
      <button type="submit">Submit</button>
  </form>
  <script>
      function checkForm(){
      var form=document.getElementById('test-form');
        //可以在此修改form的input...
        //继续下一步:
        return true;
      /*注意要 return true 来告诉浏览器继续提交，如果 return false ，浏览器将不会继续提交
      form，这种情况通常对应用户输入有误，提示用户错误信息后终止提交form。*/
  }
  </script>
  

  • MD5用户信息加密

    <form id="test-form" method="post">
        <input type="text" id="test" name="test">
        <input type="password" id="password" name="password">
        <button type="submit" onclick="doSubmitForm()">Submit</button>
    </form>
    <!-- 引入MD5加密，然后会返回加密好的 -->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"> </script>
    <script>
        //这种方式的缺点是扰乱了浏览器对form的正常提交。
        function doSubmitForm(){
            var text=document.getElementById('test');
            var pwd=document.getElementById('password');
            console.log(text.value);
            //MD5算法:把用户输入的明文变为MD5:
            pwd.value = md5(pwd.value);
            console.log(psw.value);
        }
    </script>
    

    ​ **这个做法看上去没啥问题，但用户输入了口令提交时，口令框的显示会突然从几个 变成32个 * （因为MD5有32个字符）。要想不改变用户的输入，可以利用 * 实现

    <!--HTML-->
    <form id="test-form" action="https://ai.taobao.com/?pid=mm_124190590_30248727_109212350230" method="post" onsubmit="return doSubmitForm()">
        <input type="text" id="test" name="test">
    <!--    将password隐藏起来-->
        <input type="password" id="input-password">
        <input type="hidden" id="md5-password" name="password">
        <button type="submit">Submit</button>
    </form>
    <!-- 引入MD5加密，然后会返回加密好的 -->
    <script src="https://www.baidu.com/?tn=93041572_hao_pg"> </script>
    <script>
        //这种方式的缺点是扰乱了浏览器对form的正常提交。
        function doSubmitForm(){
            var input_pwd = document.getElementById('input-password');
            var md5_pwd = document.getElementById('md5-password');
            // 把用户输入的明文变为MD5: pwd.value = md5(pwd.value);
            md5_pwd.value = md5(input_pwd.value);
            // 继续下一步:
            return true;
        }