大家好，我们今天分享一下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 表单操作以及验证就到这里了，谢谢大家