校验文本框–text
例:不允许文本框为空,点击提交按钮时如果文本框没有输入内容则弹出页面提示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>校验文本框</title>
<script type="text/javascript">
function bool(){
//定义一个变量接收id为user_name的标签对象
var element = document.getElementById('user_name');
//检查该标签对象是否输入内容
if(element.value==""){
alert('请输入用户名');
return false;
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return bool()">
<input id="user_name" type="text" placeholder="请输入用户名" />
<input type="submit" value="提交" />
</form>
</body>
</html>
当没有输入内容时就点击提交按钮会出现以下提示:
校验密码框–password
例:不允许密码框为空,点击提交按钮时如果密码框没有输入内容则弹出页面提示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>校验密码框</title>
<script type="text/javascript">
function bool(){
//定义一个变量接收id为user_password的标签对象
var element = document.getElementById('user_password');
//检查该标签对象是否输入内容
if(element.value==""){
alert('请输入密码');
return false;
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return bool()">
<input id="user_password" type="password" placeholder="请输入密码" />
<input type="submit" value="提交" />
</form>
</body>
</html>
当没有输入密码时就点击提交按钮会出现以下提示:
校验文本域–textarea
例:不允许文本域为空,点击提交按钮时如果文本域没有输入内容则弹出页面提示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>校验文本域</title>
<script type="text/javascript">
function bool(){
//定义一个变量接收id为summary的标签对象
var element = document.getElementById('summary');
//检查该标签对象是否输入内容
if(element.value==""){
alert('请输入简介');
return false;
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return bool()">
<textarea id="summary" placeholder="请输入简介" /></textarea>
<input type="submit" value="提交" />
</form>
</body>
</html>
当文本域没有输入内容时就点击提交按钮会出现以下提示:
校验单选–radio
例:不允许不选择选项就提交,点击提交按钮时如果没有选择则弹出页面提示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>校验单选</title>
<script type="text/javascript">
function bool(){
//定义一个标记
var flag = false;
//定义一个变量接收name为gender的标签对象
var elements = document.getElementsByName('gender');
//遍历该标签对象数组是否有被选中的
for(var i = 0; i < elements.length; i ++){
if(elements[i].checked){
flag = true;
break;
}
}
if(!flag){
alert('请选择性别');
return false;
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return bool()">
<input type="radio" name="gender" value="male" />男<input type="radio" name="gender" value="female" />女
<br />
<input type="submit" value="提交" />
</form>
</body>
</html>
当单选没有选择时就点击提交按钮会出现以下提示:
校验多选–checkbox
例:多选至少选择一项就提交,点击提交按钮时如果一个也没有选择则弹出页面提示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>校验多选</title>
<script type="text/javascript">
function bool(){
var flag = false;
//定义一个变量接收name为hobby的标签对象
var elements = document.getElementsByName('hobby');
//遍历该标签对象数组是否有被选中的
for(var i = 0; i < elements.length; i ++){
if(elements[i].checked){
flag = true;
break;
}
}
if(!flag){
alert('请至少选择一个爱好');
return false;
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return bool()">
<input type="checkbox" name="hobby" value="basketball" />篮球<br />
<input type="checkbox" name="hobby" value="football" />足球<br />
<input type="checkbox" name="hobby" value="table_tennis" />乒乓球<br />
<input type="submit" value="提交" />
</form>
</body>
</html>
如果一个都没选择就会弹出以下提示:
校验下拉列表–select
例:下拉列表必须选择一项提交,点击提交按钮时如果没有选择则弹出页面提示:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>校验下拉列表</title>
<script type="text/javascript">
function bool(){
var flag = false;
var elements = document.getElementById('hobby').options;
for(var i = 0; i < elements.length; i ++){
//判断是否被选中并且不为空
if(elements[i].selected && elements[i].value != ''){
flag = true;
break;
}
}
if(!flag){
alert('请选择爱好');
return false;
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return bool()">
<select id="hobby">
<option value="" />--请选择--</option>
<option value="basketball" />篮球</option>
<option value="football" />足球</option>
<option value="table_tennis" />乒乓球</option>
</select>
<input type="submit" value="提交" />
</form>
</body>
</html>
如果没选择爱好就会弹出以下提示: