web前端必学功法之一：表单校验
案例效果：
这里的布局采用的是bootstrap布局
<div class="container" style="margin-top: 60px;">
<!-- 表单 -->
<form class="form-horizontal" role="form" id="myform">
<!-- 姓名文本框 -->
<div class="form-group">
<label for="userName" class="col-sm-2 control-label">名字</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="userName" name="userName" placeholder="请输入姓名">
</div>
</div>
<!-- 密码密码框 -->
<div class="form-group">
<label for="userPwd" class="col-sm-2 control-label">密码</label>
<div class="col-sm-8">
<input type="password" class="form-control" id="userPwd" name="userPwd" placeholder="请输入密码">
</div>
</div>
<!-- 年龄数值框 -->
<div class="form-group">
<label for="userAge" class="col-sm-2 control-label">年龄</label>
<div class="col-sm-8">
<input type="number" class="form-control" id="userAge" min="1" max="100" name="userAge" placeholder="请输入年龄">
</div>
</div>
<!-- 性别复选框 -->
<div class="form-group">
<label for="userSex" class="col-sm-2 control-label">性别</label>
<div class="col-sm-8">
<label class="checkbox-inline">
<input type="checkbox" name="userSex" value="男"> 男
</label>
<label class="checkbox-inline">
<input type="checkbox" name="userSex" value="女"> 女
</label>
<label class="checkbox-inline">
<input type="checkbox" name="userSex" value="未知"> 未知
</label>
</div>
</div>
<!-- 爱好复选框 -->
<div class="form-group">
<label for="userHobby" class="col-sm-2 control-label">爱好</label>
<div class="col-sm-8">
<label class="checkbox-inline">
<input type="checkbox" name="userHobby" value="唱歌"> 唱歌
</label>
<label class="checkbox-inline">
<input type="checkbox" name="userHobby" value="睡觉"> 睡觉
</label>
<label class="checkbox-inline">
<input type="checkbox" name="userHobby" value="敲代码">敲代码
</label>
</div>
</div>
<!-- 城市下拉框 -->
<div class="form-group">
<label for="userCity" class="col-sm-2 control-label">城市</label>
<div class="col-sm-8">
<select class="form-control" id="userCity" name="userCity">
<option value="">-请选择-</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="北京">北京</option>
</select>
</div>
</div>
<!-- 简介文本域 -->
<div class="form-group">
<label for="userRemark" class="col-sm-2 control-label">简介</label>
<div class="col-sm-8">
<textarea class="form-control" name="userRemark" rows="3" id="userRemark"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" id="submitBtn">提交</button>
<span id="msg" style="color: red;"></span>
</div>
</div>
</form>
</div>
要求：
1.验证姓名
1)不能为空 2)长度为6-12位
2.验证密码
1)不能为空 2)长度为6-12位 3)不能包含姓名
3.验证年龄
1)不能为空 2)范围在1-100之间
4.验证性别
必须选择一项
5.验证爱好
必须选择一项
6.验证城市
必须选择一项
满足条件
1)弹出所有的内容 2)提交表单
不满足条件
1)说错误原因 2)不提交表单
思路分析：
1.绑定事件，绑定提交按钮的点击事件
2.获取表单元素：通过选择器获取
3.判断条件：根据要求判断对应的表单元素的值是否满足
4.提交表单：调用表单的submit()
实现步骤：
1.绑定提交按钮的点击事件
2.获取每个元素的值
3.判断对应的表单元素是否满足条件
4.如果不满足条件，则显示错误原因
5.如果满足条件，弹出内容，提交表单
<script>
// 表单校验
//1.绑定提交按钮的点击事件
document.getElementById("submitBtn").onclick = function(){
//2.获取每个表单元素的值
// 验证姓名
// 1)不能为空 2)长度为6-12位
// 获取姓名
var userName = document.getElementById("userName").value;
// 1)不能为空
if(isEmpty(userName)){
document.getElementById("msg").innerHTML = "姓名不能为空!";
return;
}
// 2)长度为6-12位
if(userName.length < 6 || userName.length > 12){
document.getElementById("msg").innerHTML = "姓名的长度在6-12位之间";
return;
}
// 2.验证密码
// 1)不能为空 2)长度为6-12位 3)不能包含姓名
var userPwd = document.getElementById("userPwd").value;
// 1)不能为空
if(isEmpty(userPwd)){
document.getElementById("msg").innerHTML = "密码不能为空!";
return;
}
// 2)长度为6-12位
if(userPwd.length < 6 || userPwd.length > 12){
document.getElementById("msg").innerHTML = "密码的长度在6-12位之间";
return;
}
// 3)不能包含姓名 indexOf();判断字符串中是否包含指定值，如果不包含则返回-1
if(userPwd.indexOf(userName) != -1){
document.getElementById("msg").innerHTML = "密码中不能包含姓名在内";
}
// 验证年龄
// 1)不能为空 2)范围在1-100之间
var userAge = document.getElementById("userAge").value;
// 1)不能为空
if(isEmpty(userAge)){
document.getElementById("msg").innerHTML = "年龄不能为空!";
return;
}
// 2)范围在1-100之间
if(userAge <1 || userAge > 100){
document.getElementById("msg").innerHTML = "年龄范围在1-100之间";
return;
}
// 验证性别
// 必须选择一项
//获取性别
var userSex = "";
//获取性别单选框
var radios = document.getElementsByName("userSex");
//遍历,得到被选中的值
for(var i = 0;i<radios.length; i++){
//判断是否选中
if(radios[i].checked){
userSex = radios[i].value;
}
}
// 1)不能为空
if(isEmpty(userSex)){
document.getElementById("msg").innerHTML = "请选择性别!";
return;
}
// 5.验证爱好
// 必须选择一项
var userHobby = "";
var checkboxs = document.getElementsByName("userHobby");
//遍历，得到被选中的值
for(var j = 0;j<checkboxs.length;j++){
//判断是否被选中
if(checkboxs[j].checked){
//拼接爱好
userHobby += checkboxs[j].value + ",";
}
}
// 1)不能为空
if(isEmpty(userHobby)){
document.getElementById("msg").innerHTML = "请选择爱好!";
return;
}
//截取字符串，去除最后多余的“,”;
userHobby = userHobby.substring(0,userHobby.length - 1);
// 验证城市
// 必须选择一项
// 获取城市
var userCity = document.getElementById("userCity").value;
// 1)不能为空
if(isEmpty(userCity)){
document.getElementById("msg").innerHTML = "请选择城市!";
return;
}
//获取简介
var userRemark = document.getElementById("userRemark").value;
//满足条件，则清空提示信息
document.getElementById("msg").innerHTML = "";
//弹出所有的内容
var str = "姓名:" + userName + "\n密码:" + userPwd + "\n";
str +="年龄:" + userAge + "\n性别:" + userSex + "\n";
str +="爱好" + userHobby + "\n城市" + userCity +"\n";
str +="简介" + userRemark;
alert(str);
// 设置表单提交的地址
document.getElementById("myform").action = "http://www.baidu.com";
//提交表单
document.getElementById("myform").submit();
}
// 封装一个方法,用来进行非空判断
// 判断字符串是否为空
// 如果为空,返回true,
// 如果不为空,返回false
// trim()：去除字符串前后空格
function isEmpty(str){
if(str == null || str.trim() ==""){
return true;
}
return false;
}
</script>