<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>register</title> <style type="text/css"> * { margin: 0; padding: 0; } form { width: 500px; margin: 0 auto; border: 1px solid #ccc; padding: 10px; } .int, .sub { height: 30px; line-height: 30px; } .high { color: red; } .formtips.onSuccess, .formtips.onError { padding: 2px; } .formtips.onSuccess { border: 1px solid green; color: #000000; } .formtips.onError { border: 1px solid red; color: red; } </style> <script type="text/javascript" src="js/jquery.js"></script> </head> <body> <form action="" method="post"> <div class="int"> <label for="username">用户名:</label> <input type="text" id="username" class="required"> </div> <div class="int"> <label for="email">邮 箱: </label> <input type="text" id="email" class="required"> </div> <div class="int"> <label for="personinfo">个人资料:</label> <input type="text" id="personinfo"> </div> <div class="sub"> <input type="submit" value="提交" id="send"> <input type="reset" id="res"> </div> </form> </body> <script type="text/javascript"> //给必填的input加红星星 $("form :input.required").each(function () { var $required = $("<strong class='high'>*</strong>"); $(this).parent().append($required); //验证表单元素 $('form :input').blur(function () { var $parent = $(this).parent(); $parent.find(".formtips").remove(); //验证用户名 if ($(this).is("#username")) { if (this.value == "" || this.value.length < 6) { var errorMsg = '请输入至少6位的用户名'; $parent.append('<span class="formtips onError">' + errorMsg + '</span>'); } else { var okMsg = '输入正确'; $parent.append('<span class="formtips onSuccess">' + okMsg + '</span>'); } } }).keyup(function(){ $(this).triggerHandler("blur"); }).focus(function(){ $(this).triggerHandler("blur"); }); //验证邮箱 $('form :input').blur(function(){ if ($(this).is('#email')) { var $parent = $(this).parent(); $parent.find(".formtips").remove(); if (this.value == "" || (this.value != "" && !/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(this.value))) { var errorMsg = '请输入正确的E-mail地址'; $parent.append('<span class="formtips onError">' + errorMsg + '</span>'); } else { var okMsg = '输入正确'; $parent.append('<span class="formtips onSuccess">' + okMsg + '</span>'); //$parent.append('<span>' + okMsg + '</span>'); //为什么这样写会出现两个span啊 } } }).keyup(function(){ $(this).triggerHandler("blur"); }).focus(function(){ $(this).triggerHandler("blur"); }); $('#send').click(function(){ $("form .required:input").trigger('blur'); var numError = $('form .onError').length; if(numError){ return false; } alert('注册成功'); }); }); </script> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>register</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
form {
width: 500px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 10px;
}
.int, .sub {
height: 30px;
line-height: 30px;
}
.high {
color: red;
}
.formtips.onSuccess, .formtips.onError {
padding: 2px;
}
.formtips.onSuccess {
border: 1px solid green;
color: #000000;
}
.formtips.onError {
border: 1px solid red;
color: red;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<form action="" method="post">
<div class="int">
<label for="username">用户名:</label>
<input type="text" id="username" class="required">
</div>
<div class="int">
<label for="email">邮 箱: </label>
<input type="text" id="email" class="required">
</div>
<div class="int">
<label for="personinfo">个人资料:</label>
<input type="text" id="personinfo">
</div>
<div class="sub">
<input type="submit" value="提交" id="send">
<input type="reset" id="res">
</div>
</form>
</body>
<script type="text/javascript">
//给必填的input加红星星
$("form :input.required").each(function () {
var $required = $("<strong class='high'>*</strong>");
$(this).parent().append($required);
//验证表单元素
$('form :input').blur(function () {
var $parent = $(this).parent();
$parent.find(".formtips").remove();
//验证用户名
if ($(this).is("#username")) {
if (this.value == "" || this.value.length < 6) {
var errorMsg = '请输入至少6位的用户名';
$parent.append('<span class="formtips onError">' + errorMsg + '</span>');
} else {
var okMsg = '输入正确';
$parent.append('<span class="formtips onSuccess">' + okMsg + '</span>');
}
}
}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});
//验证邮箱
$('form :input').blur(function(){
if ($(this).is('#email')) {
var $parent = $(this).parent();
$parent.find(".formtips").remove();
if (this.value == "" || (this.value != "" && !/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(this.value))) {
var errorMsg = '请输入正确的E-mail地址';
$parent.append('<span class="formtips onError">' + errorMsg + '</span>');
} else {
var okMsg = '输入正确';
$parent.append('<span class="formtips onSuccess">' + okMsg + '</span>');
//$parent.append('<span>' + okMsg + '</span>'); //为什么这样写会出现两个span啊
}
}
}).keyup(function(){
$(this).triggerHandler("blur");
}).focus(function(){
$(this).triggerHandler("blur");
});
$('#send').click(function(){
$("form .required:input").trigger('blur');
var numError = $('form .onError').length;
if(numError){
return false;
}
alert('注册成功');
});
});
</script>
</html>