通過“填寫個人詳細信息”的例子，用jQuery實現了帳號格式檢查，密碼一致性檢查，省市下拉框級聯，郵箱手機號格式檢查，以及各種標籤元素對象和值的獲取方法……
源代碼
index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>學生信息管理</title>
<style type="text/css">
h1 {
font-family: 仿宋;
text-align: center;
color: red;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jQueryControl.js"></script>
</head>
<body>
<h1 id="title">
<b>
請填寫個人詳細信息
</b>
</h1>
<form action="" method="post">
<table border="0" align="center">
<tr>
<td>用戶名</td>
<td>
<input type="text" id="username" name="username" maxlength="15">
<span id="usernameCheck"></span>
<td>
</tr>
<tr>
<td>密碼</td>
<td>
<input type="password" id="password" name="password" maxlength="15">
<span id="passwordCheck"></span>
</td>
</tr>
<tr>
<td>確認密碼</td>
<td>
<input type="password" id="rePassword" name="rePassword" maxlength="15">
<span id="rePasswordCheck"></span>
</td>
</tr>
<tr>
<td>性別</td>
<td>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</td>
</tr>
<tr>
<td>籍貫</td>
<td>
<select name="province">
<option select>請選擇</option>
</select>
省
<select name="city">
<option select>請選擇</option>
</select>市
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="text" id="email" name="email" placeholder="如 [email protected]" maxlength="30" minlength="5">
<span id="emailCheck"></span>
</td>
</tr>
<tr>
<td>手機號</td>
<td>
<input type="text" id="tel" name="tel" placeholder="11位，全數字" maxlength="11">
<span id="telCheck"></span>
</td>
</tr>
<tr>
<td>專業擅長</td>
<td>
<select name="major" size=4 multiple="multiple">
<option value="Windows編程">Windows編程</option>
<option value="單片機編程">單片機編程</option>
<option value="ASP.NET編程">ASP.NET編程</option>
<option value="J2EE編程">J2EE編程</option>
<option value="PHP編程">PHP編程</option>
</select>
</td>
</tr>
<tr>
<td>業餘愛好</td>
<td>
<input type="checkbox" name="football" value="足球">足球
<input type="checkbox" name="basketball" value="籃球">籃球
<input type="checkbox" name="volleyball" value="排球">排球
<input type="checkbox" name="sing" value="唱歌">唱歌
<input type="checkbox" name="other" value="其他">其他
</td>
</tr>
<tr>
<td>個人照片</td>
<td>
<input type="file" name="picture">
</td>
</tr>
<tr>
<td>出生年月</td>
<td>
<input type="date" name="birthday" maxlength="15">
</td>
</tr>
<tr>
<td>備註信息</td>
<td>
<textarea name="remarks" placeholder="可以補充一下" cols="35" rows="7"></textarea>
</td>
</tr>
<tr>
<td>
<input type="button" name="getIfo" value="提交">
</td>
<td>
<input type="reset" name="reset" value="重填">
</td>
</tr>
</table>
</form>
</body>
</html>jQueryControl.js
/*獲取所有值並顯示*/
$(function() {
$("input[name='getIfo']").click(function(){
var information = "";
var username = $("#username").val();
var password = $("#password").val();
var sex = $("input[name='sex']:checked").val();
var province = $("select[name='province'] option:selected").text();
var city = $("select[name='city'] option:selected").text();
var email = $("#email").val();
var tel = $("#tel").val();
var major = "專業擅長：";
$("select[name='major'] option:selected").each(function(){ //遍歷獲取選中的選項值
major += $(this).text() + "、";
});
major = major.substr(0,major.length-1); //截取字符串，去掉末尾頓號
var hobby = "業餘愛好：";
$("input[type='checkbox']:checked").each(function(i,val){
hobby += $(this).val() + "、";
});
hobby = hobby.substr(0,hobby.length-1); //截取字符串，去掉末尾頓號
var picture = $("input[name='picture']").val() + "";
var birthday = $("input[name='birthday']").val();
var remarks = $("textarea[name='remarks']").val();
information += "用戶名：" + username + "\n"
+ "密碼：" + password + "\n"
+ "性別：" + sex + "\n"
+ "省：" + province + " 市：" + city + "\n"
+ "郵箱：" + email + "\n"
+ "手機號：" + tel + "\n"
+ major + "\n"
+ hobby + "\n"
+ "個人照片：" + picture + "\n"
+ "出生年月：" + birthday + "\n"
+ "備註信息：" + remarks + "\n";
alert(information);
});
});
/*帳號檢查*/
$(function() {
//輸入框失去焦點時判斷輸入長度是否符合
$("#username").blur(function() {
var username = $(this).val();
//長度不小於2，大於15
if (username.length < 2 || username.length > 15) {
$("#usernameCheck").show().html("<font color=\"red\"> 用戶名長度不小於2位，不大於15位</font>");
} else {
$("#usernameCheck").hide();
}
});
});
/*密碼檢查*/
$(function() {
$("#password").blur(function() {
var password = $(this).val();
//長度不小於2，大於15
if (password.length < 2 || password.length > 15) {
$("#passwordCheck").show().html("<font color=\"red\"> 密碼長度不小於2位，不大於15位</font>");
} else {
$("#passwordCheck").hide();
}
});
$("#rePassword").blur(function() {
var password = $("#password").val();
var rePassword = $(this).val();
//長度不小於2，大於15
if (rePassword != password) {
$("#rePasswordCheck").show().html("<font color=\"red\"> 兩次輸入密碼不一致</font>");
} else {
$("#rePasswordCheck").hide();
}
});
});
/*省市級聯下拉框*/
$(function() {
//北京市轄區名稱
var city0 = ["東城區", "西城區", "崇文區", "宣武區", "朝陽區", "海淀區", "豐臺區", "石景山區", "房山區", "通州區", "順義區", "門頭溝區", "昌平區", "大興區", "懷柔區", "平谷區", "密雲縣", "延慶縣"];
//上海市轄區名稱
var city1 = ["黃浦區", "盧灣區", "徐彙區", "長寧區", "靜安區", "普陀區", "閘北區", "虹口區", "楊浦區", "寶山區", "閔行區", "嘉定區", "浦東新區", "金山區", "松江區", "青浦區", "南匯區", "奉賢區", "崇明縣"];
//天津市轄區名稱
var city2 = ["和平區", "河東區", "河西區", "南開區", "河北區", "紅橋區", "塘沽區", "漢沽區", "大港區", "東麗區", "西青區", "津南區", "北辰區", "武清區", "寶坻區", "寧河縣", "靜海縣", "薊縣"];
//重慶市轄區名稱
var city3 = ["渝中區", "大渡口區", "江北區", "沙坪壩區", "九龍坡區", "南岸區", "北碚區", "萬盛區", "雙橋區", "渝北區", "巴南區", "萬縣區", "涪陵區", "永川市", "合川市", "江津市", "南川市", "長壽縣", "綦江縣", "潼南縣", "榮昌縣", "壁山縣", "大足縣", "銅梁縣", "梁平縣", "城口縣", "墊江縣", "武隆縣", "豐都縣", "忠 縣", "開 縣", "雲陽縣", "青龍鎮青龍嘴", "奉節縣", "巫山縣", "巫溪縣", "南賓鎮", "中和鎮", "鍾多鎮", "聯合鎮", "漢葭鎮"];
//河北省主要城市名稱
var city4 = ["石家莊市", "唐山市", "秦皇島市", "邯鄲市", "邢臺市", "保定市", "張家口市", "承德市", "滄州市", "廊坊市", "衡水市"];
//山西省主要城市名稱
var city5 = ["太原市", "大同市", "陽泉市", "長治市", "晉城市", "朔州市", "晉中市", "運城市", "忻州市", "臨汾市", "呂梁市"];
//遼寧省主要城市名稱
var city6 = ["瀋陽市", "大連市", "鞍山市", "撫順市", "本溪市", "丹東市", "錦州市", "營口市", "阜新市", "遼陽市", "盤錦市", "鐵嶺市", "朝陽市", "葫蘆島市"];
//吉林省主要城市名稱
var city7 = ["長春市", "吉林市", "四平市", "遼源市", "通化市", "白山市", "松原市", "白城市", "延邊朝鮮族自治州"];
//河南省主要城市名稱
var city8 = ["鄭州市", "開封市", "洛陽市", "平頂山市", "安陽市", "鶴壁市", "新鄉市", "焦作市", "濮陽市", "許昌市", "漯河市", "三門峽市", "南陽市", "商丘市", "信陽市", "周口市", "駐馬店市", "濟源市"];
//江蘇省主要城市名稱
var city9 = ["南京市", "無錫市", "徐州市", "常州市", "蘇州市", "南通市", "連雲港市", "淮安市", "鹽城市", "揚州市", "鎮江市", "泰州市", "宿遷市"];
//浙江省主要城市名稱
var city10 = ["杭州市", "寧波市", "溫州市", "嘉興市", "湖州市", "紹興市", "金華市", "衢州市", "舟山市", "台州市", "麗水市"];
//安徽省主要城市名稱
var city11 = ["合肥市", "蕪湖市", "蚌埠市", "淮南市", "馬鞍山市", "淮北市", "銅陵市", "安慶市", "黃山市", "滁州市", "阜陽市", "宿州市", "巢湖市", "六安市", "亳州市", "池州市", "宣城市"];
//福建省主要城市名稱
var city12 = ["福州市", "廈門市", "莆田市", "三明市", "泉州市", "漳州市", "南平市", "龍巖市", "寧德市"];
//江西省主要城市名稱
var city13 = ["南昌市", "景德鎮市", "萍鄉市", "九江市", "新餘市", "鷹潭市", "贛州市", "吉安市", "宜春市", "撫州市", "上饒市"];
//山東省主要城市名稱
var city14 = ["濟南市", "青島市", "淄博市", "棗莊市", "東營市", "煙臺市", "濰坊市", "威海市", "濟寧市", "泰安市", "日照市", "萊蕪市", "臨沂市", "德州市", "聊城市", "濱州市", "菏澤市"];
//湖北省主要城市名稱
var city15 = ["武漢市", "黃石市", "襄樊市", "十堰市", "荊州市", "宜昌市", "荊門市", "鄂州市", "孝感市", "黃岡市", "咸寧市", "隨州市", "恩施州", "仙桃市", "潛江市", "天門市", "神農架林區"];
//湖南省主要城市名稱
var city16 = ["長沙市", "株洲市", "湘潭市", "衡陽市", "邵陽市", "岳陽市", "常德市", "張家界市", "益陽市", "郴州市", "永州市", "懷化市", "婁底市", "湘西州"];
//廣東省主要城市名稱
var city17 = ["廣州市", "深圳市", "珠海市", "汕頭市", "韶關市", "佛山市", "江門市", "湛江市", "茂名市", "肇慶市", "惠州市", "梅州市", "汕尾市", "河源市", "陽江市", "清遠市", "東莞市", "中山市", "潮州市", "揭陽市", "雲浮市"];
//海南省主要城市名稱
var city18 = ["海口市", "龍華區", "秀英區", "瓊山區", "美蘭區", "三亞市"];
//四川省主要城市名稱
var city19 = ["成都市", "自貢市", "攀枝花市", "瀘州市", "德陽市", "綿陽市", "廣元市", "遂寧市", "內江市", "樂山市", "南充市", "宜賓市", "廣安市", "達州市", "眉山市", "雅安市", "巴中市", "資陽市", "阿壩州", "甘孜州", "涼山州"];
//貴州省主要城市名稱
var city20 = ["貴陽市", "六盤水市", "遵義市", "安順市", "銅仁地區", "畢節地區", "黔西南州", "黔東南州", "黔南州"];
//雲南省主要城市名稱
var city21 = ["昆明市", "大理市", "曲靖市", "玉溪市", "昭通市", "楚雄市", "紅河市", "文山市", "思茅市", "西雙版納市", "保山市", "德宏市", "麗江市", "怒江市", "迪慶市", "臨滄市"];
//陝西省主要城市名稱
var city22 = ["西安市", "銅川市", "寶雞市", "咸陽市", "渭南市", "延安市", "漢中市", "榆林市", "安康市", "商洛市"];
//甘肅省主要城市名稱
var city23 = ["蘭州市", "嘉峪關市", "金昌市", "白銀市", "天水市", "武威市", "張掖市", "平涼市", "酒泉市", "慶陽市", "定西市", "隴南市", "臨夏州", "甘南州"];
//青海省主要城市名稱
var city24 = ["西寧市", "海東地區", "海北州", "黃南州", "海南州", "果洛州", "玉樹州", "海西州"];
//黑龍江省主要城市名稱
var city25 = ["哈爾濱市", "齊齊哈爾市", "雞西市", "鶴崗市", "雙鴨山市", "大慶市", "伊春市", "佳木斯市", "七臺河市", "牡丹江市", "黑河市", "綏化市", "大興安嶺地區"];
//內蒙古自治區主要城市名稱
var city26 = ["呼和浩特市", "包頭市", "烏海市", "赤峯市", "通遼市", "鄂爾多斯市", "呼倫貝爾市", "巴彥淖爾市", "烏蘭察布市", "興安盟", "錫林郭勒盟", "阿拉善盟"];
//廣西壯族自治區主要城市名稱
var city27 = ["南寧市", "柳州市", "桂林市", "梧州市", "北海市", "防城港市", "欽州市", "貴港市", "玉林市", "百色市", "賀州市", "河池市", "來賓市", "崇左市"];
//西藏自治區主要城市名稱
var city28 = ["拉薩市", "昌都地區", "山南地區", "日喀則地區", "那曲地區", "阿里地區", "林芝地區"];
//寧夏回族自治區主要城市名稱
var city29 = ["銀川市", "石嘴山市", "吳忠市", "固原市", "中衛市"];
//新疆維吾爾自治區主要城市名稱
var city30 = ["烏魯木齊市", "克拉瑪依市", "吐魯番地區", "哈密地區", "和田地區", "阿克蘇地區", "喀什地區", "克孜勒蘇柯爾克孜自治州", "巴音郭楞蒙古自治州", "昌吉回族自治州", "博爾塔拉蒙古自治州", "伊犁哈薩克自治州", "塔城地區", "阿勒泰地區", "石河子市", "阿拉爾市", "圖木舒克市", "五家渠市"];
//臺灣省主要城市名稱
var city31 = ["臺北市", "高雄市", "基隆市", "臺中市", "臺南市", "新竹市", "嘉義市", "臺北縣", "宜蘭縣", "桃園縣", "新竹縣", "苗栗縣", "臺中縣", "彰化縣", "南投縣", "雲林縣", "嘉義縣", "臺南縣", "高雄縣", "屏東縣", "澎湖縣", "臺東縣", "花蓮縣"];
//香港特別行政區主要轄區名稱
var city32 = ["中西區", "東區", "九龍城區", "觀塘區", "南區", "深水埗區", "黃大仙區", "灣仔區", "油尖旺區", "離島區", "葵青區", "北區", "西貢區", "沙田區", "屯門區", "大埔區", "荃灣區", "元朗區"];
//澳門地區
var city33 = ["澳門地區"];
//其它地區
var city34 = ["其它地區"];
//全國省會，直轄市，自治區名稱
var provinceName = ["北京市", "上海市", "天津市", "重慶市", "河北省", "山西省", "遼寧省", "吉林省", "河南省", "江蘇省", "浙江省", "安徽省", "福建省", "江西省", "山東省", "湖北省", "湖南省", "廣東省", "海南省", "四川省", "貴州省", "雲南省", "陝西省", "甘肅省", "青海省", "黑龍江省", "內蒙古自治區", "廣西壯族自治區", "西藏自治區", "寧夏回族自治區", "新疆維吾爾自治區", "臺灣省", "香港特別行政區", "澳門特別行政區", "其它"];
//初始化省下拉框
$.each(provinceName, function(i, val) { //i爲數組下標，val爲對應的值
var option = $("<option></option>").text(val); //獲取省，加入option
$("select[name='province']").append(option); //添加省
});
$("select[name='province']").change(function() {
var province = $(this).val(); //獲取省下拉框選中的值
$.each(provinceName, function(i, val) {
if ($.trim(province) == $.trim(val)) { //必須要用trim去除string中的空格
var citys = eval("city" + i); //得到城市的數組名cityi,並執行eval(cityi),即將cityi的值賦給citys
$("select[name='city']").empty(); //清空市
var defaultSelect = $("<option></option>").text("請選擇"); //添加默認“請選擇”
$("select[name='city']").append(defaultSelect);
$.each(citys, function(j, city) {
var option = $("<option></option>").text(city); //獲取市，加入option
$("select[name='city']").append(option); //添加市
});
}
});
});
});
/*郵箱檢查*/
$(function() {
$("#email").blur(function() {
var email = $(this).val();
var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //郵箱正則表達式
if (email == "" || email == null) { //郵箱爲空時提示
$("#emailCheck").show().html("<font color=\"red\"> 郵箱不能爲空</font>");
} else if (!reg.test(email)) { //郵箱格式不正確時提示
$("#emailCheck").show().html("<font color=\"red\"> 郵箱格式不正確</font>");
} else {
$("#emailCheck").hide();
}
});
});
/*手機號檢查*/
$(function() {
$("#tel").blur(function() {
var tel = $(this).val();
var reg = /^1[3|4|5|7|8]\d{9}$/; //手機號正則表達式
if (tel == "" || tel == null) { //手機號爲空時提示
$("#telCheck").show().html("<font color=\"red\"> 手機號不能爲空</font>");
} else if (!reg.test(tel)) { //手機號格式不正確時提示
$("#telCheck").show().html("<font color=\"red\"> 手機號格式不正確</font>");
} else {
$("#telCheck").hide();
}
});
});