在日常开发中 我们往往使用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算法加密
}