定义表单
<form action="#" method="post">
<!--表单内容-->
</form>
表单以form
为关键词定义,其中,action
为提交后跳转地址,
请求方式post
可选post
get
等方式。
例,action
中填写http://www.baidu.com
,则在提交表单请求后,可以跳转到百度。
定义输入框并读取表单值
<form action="post">
<span>用户名:</span> <input type="text" id="username">
</form>
<script>
let input_text = document.getElementById('username')
value = input_text.value // 获取输入框中的值
input_text.value = '456456' // 修改输入框中的值
</script>
定义单选框并读取表单值
<form action="#" method="post">
<p>
<!--单选框的值,就是定义好的value的值-->
<span>性别:</span>
<input type="radio" id="male" name="gender" value="male">男
<input type="radio" name="gender" id="female" value="female">女
</p>
</form>
<script>
let male_radio = document.getElementById('male')
let female_radio = document.getElementById('female')
// 返回值:true / false
// 设置选中性别
male_radio.checked=true;
female_radio.checked=true;
// 判断性别
if(male_radio.checked===true){
console.log('男');
}
</script>
提交表单与验证
提交表单
在前端进行表单提交验证,可以减轻服务器压力,避免大多数的错误提交。
在html中可以实现简单的初级验证,例如:
<form action="#" method="post">
<span>用户名:</span>
<input type="text" required placeholder="输入邮箱或手机号">
<input type="submit">
</form>
在input
中添加required
属性,可以设置必填项。
添加placeholder
属性,可以设置提示输入文本。
如图为点击提交后的提示
即使html自带判断,但是判断大都是简单的判断,存在较大问题,不安全
<form action="#" method="post">
<p>
<span>用户名:</span>
<input type="text" id="username" name="username" required placeholder="输入邮箱或手机号">
</p>
<p>
<span>密码:</span>
<input type="password" id="password" name="password" required placeholder="输入密码">
</p>
<button type="submit" onclick="aaa()">提交</button>
</form>
<script>
function aaa(){
let uname = document.getElementById('username')
let pwd = document.getElementById('password')
console.log(uname.value)
console.log(pwd.value)
}
</script>
带有简单验证与提示的表单内容获取功能
-
表单中
username
与password
必须有name
属性,否则控制台抓不到他们的值。 -
aaa()
事件,除了可以绑定在button
上,也可以绑定在表单提交上,实现提交检测
表单提交绑定事件
表单提交绑定事件具体操作为:给
form
添加一个onsubmit
属性,onsubmit
可以读取,其内容返回的值。如获取到true
,则正常提交表单,如获取到false
,则终止提交操作。例如,删去
button
中的onclick
属性,在onsubmit
中填入return aaa()
,并在aaa()
中添加return false
,此时submit
提交表单时,表单首先运行aaa()
,获取其返回值,获取到false
后,终止提交操作,此时在浏览器后台看不到提交请求。但如果aaa()
返回true
,则表单可以正常发出提交请求。
<form action="#" method="post" onsubmit="return aaa()">
<p>
<span>用户名:</span>
<input type="text" id="username" name="username" required placeholder="输入邮箱或手机号">
</p>
<p>
<span>密码:</span>
<input type="password" id="password" name="password" required placeholder="输入密码">
</p>
<button type="submit">提交</button>
</form>
<script>
function aaa(){
let uname = document.getElementById('username')
let pwd = document.getElementById('password')
console.log(uname.value)
console.log(pwd.value)
return false
}
</script>
综上,可以通过控制submit
中函数的返回值(true / false
)来控制提交请求。
表单内容的MD5加密
输入"12312333"
与"332211"
后,在浏览器后台抓包可以看到,浏览器提交了这样的请求:
密码在提交过程中以明文传递,带来了一定的安全隐患,下面进入到表单加密。
在head
部分加入以下代码,可以向html中引入MD5加密工具类:
<script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.js"></script>
一样的html代码,对script部分进行修改,加入md5()
函数:
<script>
function aaa(){
let uname = document.getElementById('username')
let pwd = document.getElementById('password')
// MD5加密
pwd.value = md5(pwd.value)
}
</script>
此时到浏览器后台抓包,可以看到,提交的password
为经过MD5加密后的密文。
进阶的加密逻辑
在上述表单的提交过程中,存在一定的问题,比如在用户端输入完密码,点击提交后,密码突然变成很长一串,暴露了MD5加密的过程。
出现这个细节问题的原因是,读取、加密等操作始终都在同一个密码变量pwd
上进行,要避免出现这样的情况,需要对代码进行一定的改写:
<form action="#" method="post">
<p>
<span>用户名:</span>
<input type="text" id="username" name="username" required placeholder="输入邮箱或手机号">
</p>
<p>
<span>密码:</span>
<input type="password" id="input-password" required placeholder="输入密码">
</p>
<input type="hidden" id="md5-password" name="password">
<button type="submit" onclick="aaa()">提交</button>
</form>
<script>
function aaa(){
let uname = document.getElementById('username')
let pwd = document.getElementById('input-password') // 修改
let md5pwd = document.getElementById('md5-password') // 修改
// MD5加密
md5pwd.value = md5(pwd.value) // 修改
}
</script>
将输入框中用户填写的密码id设置为input-password
,将真实要提交的密码设置在一个新建的隐藏域中,也就是md5-password
才是我们真正要提交的密码,而加密操作也是在这个隐藏的md5-password
上进行的,这样加密操作就不会暴露给用户,实现了更优的用户体验。