<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="scripts/jquery.validate.js" type="text/javascript"></script>
<style type="text/css">
label.error, label.valid, label.focus, label.normal { background: url(/admin/images/reg_ico.gif) no-repeat 4px -197px; font: 12px/1 verdana, simsun, sans-serif; margin: 0; padding: 4px 0px 4px 23px; }
label.normal { background-position: 4px -2px; color: #999999; }
label.error { background-position: 4px -97px; color: #B52726; }
label.valid { background-position: 4px -49px; color: #2666AF; }
label.focus { background-position: 4px -2px; color: #999999; }
</style>
</head>
<body>
<form action="" method="post">
<fieldset class="login">
<legend>Login information</legend>
<label for="userName" class="hover">UserName:</label>
<input type="text" id="userName" class="required text" /><br />
<label for="password" class="hover">Password:</label>
<input type="text" id="password" class="required text" /><br />
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<label for="name" class="hover">Name:</label>
<input type="text" id="name" class="required text" /><br />
<label for="email" class="hover">Email:</label>
<input type="text" id="email" class="required text email" /><br />
<label for="date" class="hover">Date:</label>
<input type="text" id="date" class="required text" /><br />
<label for="url" class="hover">Website:</label>
<input type="text" id="url" class="url text" value="http://" /><br />
<label for="phone" class="hover">Phone:</label>
<input type="text" id="phone" class="phone text" /><br />
<label for="age" class="hover">Age:</label>
<input type="checkbox" id="age" name="age" value="yes" /><br />
<input type="submit" value="Submit Form" class="submit" />
</fieldset>
</form>
<script type="text/javascript">
var errMsg = {
//檢查特定字段是否必填
required: {
msg: 'This field is required.',
test: function (obj, load) {
return obj.value.length > 0 && obj.value != obj.defaultValue;
}
},
//確保字段內容是正確的email地址
email: {
msg: 'Not a valid email address.',
test: function (obj) {//確保有內容的輸入並符合email地址的格式
return !obj.value || /^[a-z0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,4}$/i.test(obj.value);
}
},
//確保字段內容是電話號碼並將其自動格式化
phone: {
msg: 'Not a valid phone number',
test: function (obj) {
var m = /(\d{3}).*(\d{3}).*(\d{4})/.exec(obj.value);
if (m) {
obj.value = "(" + m[1] + ")" + m[2] + "-" + m[3];
return !obj.value || m;
}
}
},
//確保字段內容符合MM/DD/YYYY的時間格式
date: {
msg: 'Not a valid date.',
test: function (obj) {
return !obj.value || /^\d{2}\/d{2}\/d{2,4}$/.test(obj.value);
}
},
url: {
msg: 'Not a valid URL.',
test: function (obj) {
return !obj.value || obj.value == 'http:://' ||
/^https?:\/\/([a-z0-9-]+\.)+[a-z0-9]{2,4}.*$/.test(obj.value);
}
}
};
//隱藏當前正在顯示的任何錯誤信息
function hideErrors(elem) {
var next = elem.nextSibling;//獲取當前字段的下一個元素
if (next && next.nodeName == 'UL' && next.className == 'errors') {//如果下一個元素是ul並有class為errors
elem.parentNode.removeChild(next);//刪掉它
}
}
//顯示表單內特定字段的錯誤信息
function showErrors(elem, errors) {
var next = elem.nextSibling;//獲取當前字段的下一個元素
if (next && (next.nodeName != 'UL' || next.className != 'errors')) {
next = document.createElement('ul');
next.className = 'errors';
elem.parentNode.insertBefore(next, elem.nextSibling);
}
//有一個包含錯誤的容器引用，我們可以遍歷所有的錯誤信息
for (var i = 0; i < errors.length; i++) {
var li = document.createElement('li');//為每一個錯誤信息創建新的li包裹器
li.innerHTML = errors[i];
next.appendChild(li);//並插入到dom中
}
}
//驗證表單所有字段的函數
//form參數應是一個表單元素的引用
//load參數應該是一個布爾值 用以判別驗證函數在頁面加載時執行還是動態執行
function validateForm(form, load) {
var valid = true;
for (var i = 0; i < form.elements.length; i++) {//遍歷表單的所有字段的一個數組
hideErrors(form.elements[i]);//先將所有錯誤信息隱藏
if (!validateField(form.elements[i], load)) {
valid = false;
}
}
return valid;//如果字段是不正確的內容，則返回false,反之則返回true;
}
//驗證單個字段的內容
function validateField(elem, load) {
var errors = [];
for (var name in errMsg) {
var re = new RegExp("(^|\\s)" + name + "(\\s|$)");
if (re.test(elem.className) && !errMsg[name].test(elem, load)) {//如果沒有通過驗證，把錯誤信息增加到列表中
errors.push(errMsg[name].msg);
}
}
if (errors.length) {//如果存在錯誤信息，則顯示出來
showErrors(elem, errors);
}
return errors.length > 0;
}
function getInputsByName(name) {
var result = [];//匹配的input元素的數組
result.numChecked = 0;//追蹤被選中元素的數量
var input = document.getElementsByTagName('input');
for (var i = 0; i < input.length; i++) {
if (input[i].name == name) {//找出所有指定name的字段
result.push(input[i]);//保存結果
if (input[i].checked) {//記錄被選中字段的數量
result.numChecked++;
}
}
}
return result;//返回匹配的字段集合
}
window.onload = function () {
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function () {
validateForm(form, 'submit');
return false;
}
}
</script>
</body>
</html>
