JS操作表单（验证）

9.操作表单（验证）

表单是什么 form DOM 树

1. 文本框 text

2. 下拉框

3. 单选框 radio

4. 多选框 checkbox

5. 隐藏域 hidden

6. 密码框 password

获得表单提交信息

<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <p>
        <span>性别：</span>
        <input type="radio"name="sex"value="man"id="man">男
        <input type="radio"name="sex"value="women"id="women">女
    </p>
</form>
<script>
    //获取输入的值
    var username =document.getElementById('username');
    //得到输入框的值
    username.value
    //修改输入框的值
    username.value='dadawd';
    //获取固定的值，单选框多选框
    var sex_man = document.getElementById('man');
    var sex_women = document.getElementById('women');
    sex_man.checked;//查看返回结果 true or false
    sex_women.checked;
    sex_man.checked=true;//赋值
</script>

提交表单 md5 加密密码

初级加密

<!--表单绑定 -->
<form action=" "method="post"onsubmit="ruturn aaa()">
  <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="aaa()">提交</button>
</form>
<script>
function aaa(){
    var user = document.getElementById('username');
    var pwd = document.getElementById('password');
    console.log(user.value);
    console.log(pwd .value);
    //MD5
    pwd.value=md5(pwd.value);
return true;
}
</script>

<!--表单绑定
onsubmit 绑定一个提交校验的函数 true
将这个结果返回给表单，使用onsubmit函数-->
<form action=" "method="post"onsubmit="return aaa()">
  <p>
    <span>用户名：</span><input type="text" id="username" name="username">
  </p>
  <p>
    <span>密码：</span><input type="password"id="password">
      <input type="hidden"id="md5-password"name="password">
<!--      隐藏域，在password里看到的并不是真正的密码-->
  </p>
<!-- 绑定事件 onclick被点击以后 按钮绑定-->
<button type="submit">提交</button>
</form>
<script>
function aaa(){
    var user = document.getElementById('username');
    var pwd = document.getElementById('password');
    var md5pwd = document.getElementById('md5-password');
    //MD5
    md5pwd.value=md5(md5pwd.value);
    //可以校验判断表单内容，true通过提交
return true;
}