版权声明：程序猴jwang版权所有 https://blog.csdn.net/qq_21046965/article/details/83868901
前言
本章将学习表单的校验，作为一个前面学习的总结！
方法
1.概念
我们知道，在学习HTML的时候，我们做了一个非常丑陋的表单，里面有文本框、单选钮、复选框等一系列表单元素。这些都是随便填写的，没有加任何的校验。也就是说正常情况下我们需要对表单进行校验，确保用户输入正确！
2.具体思路
1）回顾一下简单的form表单的写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>form表单的学习</title>
</head>
<body>
<form action="#" method="post">
<h5>注册信息</h5>
用户名：<input type="text" name="username" id="username" value=""/><br/>
性 别：<input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女<br/>
爱 好:<input type="checkbox" name="hobby" value="足球" />足球<input type="checkbox" name="hobby" value="游泳"/>游泳
<input type="checkbox" name="hobby" value="棋牌" />棋牌<br/>
毕业院校：<select name="school" id="school">
<option value="--请选择--">--请选择--</option>
<option value="清华大学">清华大学</option>
<option value="北京大学">北京大学</option>
<option value="挖掘机技术学院">挖掘机技术学院</option>
</select><br/>
个人简介：<textarea rows="3" cols="20" name="introduce" id="introduce"></textarea><br/>
<input type="submit" value="提交"/> <input type="reset" name="" id="" value="重置" />
</form>
</body>
</html>
以上就是我们之前写过的一个表单，这里我就不加CSS修饰了，丑就丑吧！
2）探究姓名校验
首先，我们为提交按钮添加一个点击事件，用来对表单进行一个校验。
姓名的校验主要是一个非空校验，如下代码可以实现！
function validate(){
//加入姓名验证
var username = document.getElementById("username").value;
if(username.trim() == ""){
alert("用户名不能为空！");
}
}3）探究爱好选择校验
扫描二维码关注公众号，回复：
4211772 查看本文章
我们知道，爱好至少要选择一项！我们可以用如下代码进行校验！
//加入爱好校验
var hobby = document.getElementsByName("hobby");
var isHobby = false;
for(var i=0;i<hobby.length;i++){
if(hobby[i].checked){
isHobby=true;
}
}
if(!isHobby){
alert("爱好至少选择一项！");
}4）探究毕业院校校验
我们知道，毕业院校是一个下拉框，我们不能让用户选择“--请选择--”这个选项！所以代码如下：
//加入毕业院校校验
var school = document.getElementById("school").value;
if(school == "--请选择--"){
alert("请选择毕业院校！");
}5）探究个人简介的校验
个人简介的校验和用户名的校验相一致
var introduce = document.getElementById("introduce").value
if(introduce.trim() == ""){
alert("个人简介不能为空！");
}3.总体规划
1）避免验证失败后仍然提交
将提交按钮改成普通按钮，通过js来进行提交
<input type="button" value="提交" onclick="sub();"/>sub()方法中对表单项实现提交功能，前提是验证通过！
function sub(){
if(validate()){
document.getElementById("ff").submit();
}
}这里的validate()函数就是我们的校验函数，如果校验成功返回true进行提交，反之则不提交
validate()函数的具体实现如下，综合了我们上面讲解的内容
function validate(){
//加入姓名验证
var username = document.getElementById("username").value;
if(username.trim() == ""){
alert("用户名不能为空！");
return false;
}
//加入爱好校验
var hobby = document.getElementsByName("hobby");
var isHobby = false;
for(var i=0;i<hobby.length;i++){
if(hobby[i].checked){
isHobby=true;
}
}
if(!isHobby){
alert("爱好至少选择一项！");
return false;
}
//加入毕业院校校验
var school = document.getElementById("school").value;
if(school == "--请选择--"){
alert("请选择毕业院校！");
return false;
}
//加入个人简介校验
var introduce = document.getElementById("introduce").value
if(introduce.trim() == ""){
alert("个人简介不能为空！");
return false;
}
return true;
}2）实现校验人性化
我们通过实验发现一个问题，那就是我们每次验证失败都会弹出一个警告框告知我们！实际上这种提醒的方式非常不人性化。通常的做法是在表单项右侧以文本的方式进行提示！
将每个表单项的代码后追加span标签，如用户名标签追加span标签如下:
用户名：<input type="text" name="username" id="username" value=""/><span id="usernameSpan"></span><br/>对用户名的校验进行一个改进如下：
var username = document.getElementById("username").value;
var usernameSpan = document.getElementById("usernameSpan");
if(username.trim() == ""){
usernameSpan.innerText = "用户名不能为空";
usernameSpan.style.color = "red";
return false;
}else{
usernameSpan.innerText = "用户名输入正确";
usernameSpan.style.color = "green";
}这样的话，校验更加人性化，避免弹窗！
剩余的校验以此类推，请读者尝试自行进行补全！