提交表单 

 <title>提交表单</title>
<!--    required-->
<!-- 提交表单，md5加密密码，表单优化-->
    <script src="https://www.cmd5.com/"></script>
</head>
<body>
<!--
表单绑定提交事件
onsubmit= 绑定一个提交检测的函数。  true false
将这个结果返回给表单，使用onsubmit接收-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username">
    </p>
    <!--无论多选框的值，还是单选框的值就是定义好的value-->
    <p>

        <span>密码：</span> <input type="password" id="input-password" >      建议使用！！表单级别重点注意onsubmit，按钮级别的绑定按钮，一般通过onsubmit去做!  记住return属性。
    </p>

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

   <!--绑定事件  onclick被点击-->
    <button type="submit" >表单提交</button>
<!--    <button type="submit" onclick="aaa()">按钮提交</button>-->
</form>

<script>
    //通过按钮触发代码，那么我们也可以获取它里面的值。在页面中通过id属性获取一个元素的节点对象 获取对象的值
   function aaa(){
       alert(1);
       var uname = document.getElementById('username');
       var pwd = document.getElementById('input-password');
       var md5pwd = document.getElementById('md5-password');//提交之后密码变长了，他的代码绝对是这一行------高级玩法通过隐藏进行提交


     /*  console.log(uname.value);
       console.log(pwd.value);
       //MD5算法
       pwd.value = md5(pwd.value);
       console.log(pwd.value);  */
       pwd.value = md5(pwd.value);
       md5pwd.value = md5(pwd.value);
   //可以校验判断表单内容，true就是通过提交，false 就是阻止提交
      return false;


   }
</script>
posted @ 2022-05-31 21:36  LiLime  阅读(229)  评论(0)    收藏  举报