<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单校验</title>
<!-- 引入Bootstrap的核心css文件 -->
<link rel="stylesheet" type="text/css" href="bootstrap-3.4.1\dist/css/bootstrap.css" />
</head>
<body>
<!-- 布局容器 -->
<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" min="0" max="150" id="userAge" 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="radio-inline">
<input type="radio" name="userSex" value="男"> 男
</label>
<label class="radio-inline">
<input type="radio" name="userSex" value="女"> 女
</label>
<label class="radio-inline">
<input type="radio" 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）范围在0~150之间
4.验证性别
必须选一项
5.验证爱好
必须选一项
6.验证城市
必须选一项
满足条件
1）弹出所有的内容 2）提交表单
不满足条件
1）说明错误原因 2）不提交表单
思路分析：
1.绑定事件：绑定提交按钮的点击事件
2.获取表单元素：通过选择器获取
3.判断条件：根据要求判断对应的表单元素的值是否满足
4.提交表单:调用表单的submit()
实现步骤：
1.绑定提交按钮的点击事件
2.获取每个表单元素的值
3.判断对应的表单元素是否满足条件
4.如果不满足条件，则显示错误原因
5.如果满足条件，弹出内容，提交表单
-->
<script type="text/javascript">
/**
* 表单校验
*/
// 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 > 12) {
document.getElementById("msg").innerHTML = "姓名的长度在6~12位之间！";
return;
}
/**
* 验证密码
*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 > 12) {
document.getElementById("msg").innerHTML = "密码的长度在6~12位之间！";
return;
}
// 3）不能包含姓名 indexof():判断字符串中是否包含指定值，如果不包含则返回-1
if (userPwd.indexOf(userName) != -1) {
document.getElementById("msg").innerHTML = "密码中不能包含姓名在内！";
return;
}
/**
* 验证年龄
*1）不能为空 2）范围在0~150之间
*/
var userAge = document.getElementById("userAge").value;
// 判断 1）不能为空
if (isEmpty(userAge)) {
document.getElementById("msg").innerHTML = "年龄不能为空！";
return;
}
// 2）范围在1~150之间
if (userAge < 0 || userAge > 150) {
document.getElementById("msg").innerHTML = "年龄范围在0~150之间！";
return;
}
/**
* 验证性别
* 必须选一项
*/
// 获取性别
var userSex = "";
//获取性别单选框
var radios = document.getElementsByName("userSex");
// 遍历，得到被选中的值
for (var i = 0; i < radios.length; i++) {
// 判断是否选中
if (radios[i].checked) {
userSex = radios[i].value;
}
}
// 判断不能为空
if (isEmpty(userSex)) {
document.getElementById("msg").innerHTML = "请选择性别！";
return;
}
/**
* 验证爱好
* 必须选一项
*/
// 获取所有的爱好
var userHobby = "";
// 获取爱好的复选框
var checkboxs = document.getElementsByName("userHobby");
// 遍历复选框，得到被选中的值
for (var j = 0; j < checkboxs.length; j++) {
// 判断是否被选中
if (checkboxs[j].checked) {
// 拼接爱好
userHobby += checkboxs[j].value + ",";
}
}
// 判断不能为空
if (isEmpty(userHobby)) {
document.getElementById("msg").innerHTML = "请选择爱好！";
return;
}
// 截取字符串，去除最后多余的"，"
userHobby = userHobby.substring(0, userHobby.length - 1);
/**
* 验证城市
* 必须选一项
*/
// 获取城市
var userCity = document.getElementById("userCity").value;
// 判断不能为空
if (isEmpty(userCity)) {
document.getElementById("msg").innerHTML = "请选择城市！";
return;
}
// 满足条件，则清空提示信息
document.getElementById("msg").innerHTML = "";
// 获取简介
var userRemark = document.getElementById("userRemark").value;
// 弹出所有的内容
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()：去除字符串前后的空格
* @param {Object} str
*/
function isEmpty(str) {
if (str == null || str.trim() == "") {
return true;
}
return false;
}
</script>
</body>
</html>