步驟：
1、判斷當前失去焦點的元素是“用戶名”還是“郵箱”
2、“用戶名”，看是否小於6位，如果小於，就設置紅色提醒
3、“郵箱”，用正則表達式判斷是否符合郵箱格式，不符合就紅色字提醒，符合就用綠色字提醒
4、將文字信息<span>追加到當前元素的父元素的最後。ps：注意移除前面已經出現的字。
<!DOCTYPE html>
<html>
<head>
<title>Char 5.1.6</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
//給必須項目添加標誌
$("form :input.required").each(function() {
var $required = $("<strong class='high'>*</strong>");
$(this).parent().append($required);
});
//判斷用戶名是否正確
$('form :input').blur(function(event) {
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>');
}
}
//判斷email地址是否填寫正確
if ($(this).is('#email')) {
//判斷的正則表達式
if (this.value==''||(this.value!=''&&!/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value))) {
var errorMsg="請輸入正確的email地址";
$parent.find('.formtips').remove();
$parent.append('<span calss="formtips onError">'+errorMsg+"</span>");
}else
{
var okMsg="ok";
$parent.append('<span class="formtips okMsg">'+okMsg+"</span>");
}
}
});
//按鈕send的觸發功能
$("#send").click(function(event) {
$("form .required:input").trigger('blur');
var numError=$("form .onError").length;
if (numError) {
return false;
}
alert("註冊成功！");
});
})
</script>
</head>
<body>
<h2>註冊</h2>
<form>
<div class="int">
<label>姓名：</label>
<input type="text" name="text" id="username" class="required">
</div>
<div class="int">
<label>郵箱：</label>
<input type="text" name="text" id='email' class="required">
</div>
<div class="int">
<label>個人資料：</label>
<input type="text" name="text">
</div>
<div class="submit">
<input type="button" name="btn" id="send" value="提交"/>
</div>
</form>
</body>
</html>