大家好,我们今天分享一下JavaScript 操作验证表单
首先我们要知道
用JavaScript操作表单和操作DOM是类似的,因为表单本身也是DOM树。
HTML表单的输入控件(标签)主要有以下几种:
文本框,对应的<input type="text">,用于输入文本;
口令框,对应的<input type="password">,用于输入口令;
单选框,对应的<input type="radio">,用于选择一项;
复选框,对应的<input type="checkbox">,用于选择多项;
下拉框,对应的<select>,用于选择一项;
隐藏文本,对应的<input type="hidden">,用户不可见,但表单提交时会把隐藏文本发送到服务器。
表单的目的:
提交用户的信息
因此,我们首先要获得用户信息
写一个简单的表单:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<from actiom="post">
<span>用户名:</span><input type="text">
</from>
</body>
</html>
页面效果:
我们这时对源码进行改动:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<from actiom="post">
<span>用户名:</span><input type="text" id="username">
</from>
<script>
var input_text =document.getElementById('username');
//得到输入的值
</script>
</body>
</html>
我们在表单里面随便写点东西
截图:
input_text.value
'essdddkjh'`
截图:
//得到输入的值:
var input_text =document.getElementById(‘username’);
input_text.value='4875256'
'4875256'
截图:
此时的页面的效果:
再写一个:
(我们加了一个性别的多选框)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<from actiom="post">
<p>
<span>用户名:</span><input type="text" id="username">
</p>
<p>
<span>性别:</span>
<input type="radio" name="sex" value="man"> 男
<input type="radio" name="sex" value="woman"> 女
</p>
</from>
<script>
var input_text =document.getElementById('username');
</script>
</body>
</html>
看页面的效果:
源码实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<from actiom="post">
<p>
<span>用户名:</span><input type="text" id="username">
</p>
<p>
<span>性别:</span>
<input type="radio" name="sex" value="man" id="boy"> 男
<input type="radio" name="sex" value="woman"id="girl"> 女
</p>
</from>
<script>
var input_text =document.getElementById('username');
var boy_radio= document.getElementById('boy');
var girl_radio= document.getElementById('girl');
</script>
</body>
</html>
结果:
boy_radio.value
'man'
girl_radio.value
'woman'
截图:
不管是单选框,还是多选框,boy_radio.value:只可以获取到当前的值
在页面上选择 “男”
截图:
我们现在选择的是“男”
我们接下来使用这个进行判断:
所以判断boy的时候就会是true
判断girl的时候就会是false
boy_radio.checked
true
girl_radio.checked
false
这样做可以赋值:
girl_radio.checked= true;
true
截图:
好了,有关于JavaScript 表单操作以及验证就到这里了,谢谢大家
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)