当文本框失去鼠标的焦点时,判断文本框中的内容是否为空。用submit判断提交时各文本框中的内容是都符合条件,不符合条件文本框后面提示并文本框变红。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#home {
height: 100px;
}
</style>
<script>
function a() {
var numbercount = 0;
var lettercount = 0;
var user = document.getElementById("username").value;
if (user == "") {
document.getElementById("one").innerHTML = "用户名不能为空";
return false;
}
if (user.length > 9) {
document.getElementById("one").innerHTML = "长度不能超过10";
return false;
}
var arr=user.split("");
for (var i = 0; i < arr.length; i++) {
arr[i] = arr[i].toLocaleLowerCase();
if (arr[i] >= '0' && arr[i] <= '9') {
numbercount++;
} else {
if (arr[i] >= 'a' && arr[i] <= 'z') {
lettercount++;
}
}
}
if(numbercount==arr.length ||lettercount==arr.length){
document.getElementById("one").innerHTML = "要用字母和数字混合";
}
if (numbercount + lettercount != arr.length) {
document.getElementById("one").innerHTML = "要用字母和数字混合";
}
}
function b() {
var pass = document.getElementById("password").value;
var str = pass.split(",");
if (pass == "") {
document.getElementById("two").innerHTML = "密码不能为空";
return false;
}
if (pass.length > 10) {
document.getElementById("two").innerHTML = "长度不能超过10";
return false;
}
for (var i = 0; i < str.length; i++) {
if (isNaN(str[i])) {
document.getElementById("two").innerHTML = "必须是数字";
break;
}
}
}
function c() {
var bir = document.getElementById("birday").value;
var str1 = bir.split(",");
if (bir == "") {
document.getElementById("three").innerHTML = "出生年月不能为空";
return false;
}
if (bir.length > 10) {
document.getElementById("three").innerHTML = "长度不能超过10";
return false;
}
for (var i = 0; i < str1.length; i++) {
if (isNaN(str1[i])) {
document.getElementById("three").innerHTML = "必须是数字";
break;
}
}
}
function d() {
var whe = document.getElementById("where").value;
if (whe == "") {
document.getElementById("four").innerHTML = "出生地不能为空";
return false;
}
}
function e() {
var ho = document.getElementById("home").value;
if (ho == "") {
document.getElementById("five").innerHTML = "家庭住址不能为空";
return false;
}
if (ho.length > 20) {
document.getElementById("five").innerHTML = "长度不能超过20";
return false;
}
}
function coo() {
var x = document.getElementsByName("hobby");
var count = 0;
for (var i = 0; i < x.length; i++) {
if (x[i].checked) {
count++;
}
}
if (count == 0) {
document.getElementById("six").innerHTML = "爱好不能为空";
document.getElementById("six").style.color = "red";
}
var j = document.getElementsByName("sex");
var sum = 0;
for (var k = 0; k < j.length; k++) {
if (j[k].checked) {
sum++;
}
}
if (sum == 0) {
document.getElementById("seven").innerHTML = "性别不能为空";
document.getElementById("seven").style.color = "red";
}
if (document.getElementById("username").value == "") {
document.getElementById("username").style.backgroundColor = "red";
document.getElementById("one").innerHTML = "用户名不能为空";
}
if (document.getElementById("password").value == "") {
document.getElementById("password").style.backgroundColor = "red";
document.getElementById("two").innerHTML = "密码不能为空";
}
if (document.getElementById("birday").value == "") {
document.getElementById("birday").style.backgroundColor = "red";
document.getElementById("three").innerHTML = "出生日期不能为空";
}
if (document.getElementById("where").value == "") {
document.getElementById("where").style.backgroundColor = "red";
document.getElementById("four").innerHTML = "出生地不能为空";
}
if (document.getElementById("home").value == "") {
document.getElementById("home").style.backgroundColor = "red";
document.getElementById("five").innerHTML = "家庭住址不能为空";
return false;
}
}
function color() {
document.getElementById("one").style.color = "red";
document.getElementById("two").style.color = "red";
document.getElementById("three").style.color = "red";
document.getElementById("four").style.color = "red";
document.getElementById("five").style.color = "red";
}
</script>
</head>
<body onload="color()">
<form name=form1 onsubmit="return coo()">
用户名:<input type="text" name="username" id="username" onblur="a()" />
<span id="one"></span>
<br />
密码:<input type="text" name="password" id="password" onblur="b()" />
<span id="two"></span>
<br />
出生日期:<input type="text" name="birday" id="birday" onblur="c()">
<span id="three"></span>
<br />
性别: <input type="radio" value="boy" name="sex">男
<input type="radio" value="girl" name="sex">女
<span id="seven"></span>
<br />
爱好:<input type="checkbox" value="smoke" name="hobby">抽烟
<input type="checkbox" value="drink" name="hobby" />喝酒
<input type="checkbox" value="head" name="hobby" />烫头
<span id="six"></span>
<br />
出生地:<input type="txet" id="where" name="where" onblur="d()" />
<span id="four"></span>
<br />
家庭住址:<input type="text" id="home" name="home" height="20px" width="10px" onblur="e()" />
<span id="five"></span>
<input type="submit" />
</form>
</body>
</html>
05-28
1241
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)