JavaScript对表单提交的验证

在日常开发中 我们往往使用JavaScript对表单提交进行是否合法的判定，这样我们就可以避免在服务器中再去进行验证 。

首先来看JavaScript怎么获取表单元素的值

<form action="#" method="post">
        <span>姓名:</span><input type="text" name="userName" id="name" required/></br>//required表示必须填写该字段 不然提交不了 
        <span>密码:</span><input type="password" name="password" id="password"/></br>
        <span>性别:</span><input type="radio" name="gender" id="boy" value="man"/>男
        <input type="radio" name="gender" id="girl" value="woman"/>女</br>
        <span>科目:</span><input type="checkbox" name="box1" checked/><span>Java</span>
        <input type="checkbox" name="box2" checked/><span>Python</span>
        <input type="checkbox" name="box3"/><span>C++</span>
        <input type="checkbox" name="box4"/><span>PHP</span><br>
        <span>爱好:</span>
        <select name="selector" id="selector">
            <option value="sing">唱</option>
            <option value="dance">跳</option>
            <option value="rap">Rap</option>
            <option value="basketball">篮球</option>
        </select>

    </form>
    <script type="text/javascript">
        let userName = $('#name');
        console.log(userName.val());//获得text/password文本框的值
        let boy_radio = document.getElementById('boy');
        let girl_radio = document.getElementById('girl');
        //我们查看选择框（单选框、复选框) 不能直接得到选择元素的值
        //需要遍历它的所有选择节点 查看是否checked = true 如果是 则被选中。
        console.log(boy_radio.checked);//查看boy_radio这个元素是否被选中
        console.log(girl_radio.checked);//查看girl_radio这个元素是否被选中
        girl_radio.checked = true;//还可以人为的控制他们是否被选中
    </script>

在form标签中有一个onsubmit属性 可以把它设置为一个函数 通过返回true或者false 来控制是否允许表单提交

<form action="#" method="post" onsubmit="return fun1()">
        .....
</form>

<script type="text/javascript">
        function fun1(){
           .....
            //如果校验通过 返回true允许通过
            //否则返回false 不允许通过
            return true;
	}
</script>

对于用户密码隐私这一块 如果我们不做任何处理 通过抓取表单的提交(抓包) 我们可以查看到我们提交的表单中的所有元素的值 这当然是不可以的 所以我们需要在前台对这个密码框中的值进行处理

使用md5加密算法 加密password

	<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script> //引入文件
	
	<script type="text/javascript">
        function fun1(){
            let userName = $('#name');
            let password = $('#password');
            password.val(md5(password.val()));//将密码框中的值使用md5算法加密
		}