原理版：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<style>
* {
padding: 0;
margin: 0;
}
#myForm {
width: 400px;
padding: 20px;
margin: 50px auto;
border: 1px solid #eee;
}
input {
margin: 20px 20px 20px 10px;
padding: 5px 10px;
}
</style>
<script src="../js/jquery.min.js"></script>
<script>
$(function () {
var flag = false;
// blur: 元素失去光标触发的事件；
$("#txt").blur(function () {
var re = /\w+@\w+(\.\w){1,3}/;
if (re.test($(this).val())) {
$("span").eq(0).html("输入正确").css("color", "green");
flag1 = true;
} else {
$("span").eq(0).html("格式错误").css("color", "red");
flag1 = false;
}
})
$("#pwd").blur(function () {
// ^: 在中括号里表示取反（排除）， 在中括号外表示从头开始；
// $: 表示结尾。
var re = /^\S{6,12}$/;
if ( re.test($(this).val()) ) {
$("span").eq(1).html("输入正确").css("color", "green");
flag2 = true;
} else {
$("span").eq(1).html("格式错误").css("color", "red");
flag2 = false;
}
})
$(":submit").click( function () {
// triggerHandler: 自动触发事件；
$("#txt").triggerHandler("blur");
$("#pwd").triggerHandler("blur");
if ( flag1 == false || flag2 == false ) {
return false;
}
})
})
</script>
</head>
<body>
<form action="http://www.baidu.com" id="myForm">
邮箱： <input type="text" id="txt"><span></span> <br>
密码： <input type="password" name="" id="pwd"><span></span> <br>
<input type="submit" value="提交">
</form>
</body>
</html>
升级适应版：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.ok {
color: green;
}
.error {
color: red;
}
</style>
<script src="../js/jquery.min.js"></script>
<script>
$(function () {
$("#user").blur(function () {
var re = /\w+@\w+(\.\w+){1,3}$/;
if ($(this).parent().find(".ok,.error").length > 0) {
$(this).parent().find(".ok,.error").remove();
}
if (re.test($(this).val())) {
$(this).parent().append("<span class='ok'>格式正确</span>");
} else {
$(this).parent().append("<span class='error'>格式错误</span>");
}
});
$("#pwd").blur(function () {
var re = /\w{6,20}$/;
if ($(this).parent().find(".ok,.error").length > 0) {
$(this).parent().find(".ok,.error").remove();
}
if (re.test($(this).val())) {
$(this).parent().append("<span class='ok'>格式正确</span>");
} else {
$(this).parent().append("<span class='error'>格式错误</span>");
}
});
$(":submit").click(function () {
$("#user").triggerHandler("blur");
$("#pwd").triggerHandler("blur");
if ($("#userForm").find(".error").length > 0) {
return false;
}
});
});
</script>
</head>
<body>
<form action="http://www.baidu.com" id="userForm">
<p>
邮箱: <input type="text" name="" id="user">
</p>
<p>
密码: <input type="text" name="" id="pwd">
</p>
<p>
<input type="submit" value="注册" id="reg">
</p>
</form>
</body>
</html>
