?主代碼
<!DOCTYPE HTMLPUBLIC "-//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><style type="text/css">* {margin: 0;padding: 0;}input,select,textarea {font-size: 1em;margin: 0;color: #000;font-family: tahoma, arial, simsun, sans-serif;}table {border-collapse: collapse;border-spacing: 0;}body {font-size: 14px;}#formbox {padding: 20px;border: solid 1px #D1D1D1;margin: 20px auto;width: 880px;}#formbox h3 {font-size: 16px;height: 32px;color: #3366cc;font-weight: 800;border-bottom: solid 1px #D1D1D1;margin: 0 0 20px 0;padding: 0 10px;}/* registerform */.registerform .need {width: 10px;color: #b20202;}.registerform td {padding: 5px 0;vertical-align: top;text-align: left;}.registerform .inputxt,.registerform textarea {border: 1px solid #a5aeb6;width: 196px;padding: 2px;}.registerform textarea {height: 75px;}.registerform label {margin: 0 26px 0 10px;}.registerform .tip {line-height: 20px;color: #5f6a72;}.registerform select {width: 202px;}.registerformalter select {width: 124px;}/*==========以下部分是必須的===========*/.Validform_checktip {margin-left: 8px;line-height: 20px;height: 20px;overflow: hidden;color: #999;font-size: 12px;}.Validform_right {color: #71b83d;padding-left: 20px;background: url(images/right.png) no-repeat left center;}.Validform_wrong {color: red;padding-left: 20px;white-space: nowrap;background: url(images/error.png) no-repeat left center;}.Validform_loading {padding-left: 20px;background: url(images/onLoad.gif) no-repeat left center;}.Validform_error {background-color: #ffe7e7;}#Validform_msg {color: #7d8289;font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;width: 280px;background: #fff;position: absolute;top: 0px;right: 50px;z-index: 99999;display: none;filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999');-webkit-box-shadow: 2px 2px 3px #aaa;-moz-box-shadow: 2px 2px 3px #aaa;}#Validform_msg .iframe {position: absolute;left: 0px;top: -1px;z-index: -1;}#Validform_msg .Validform_title {line-height: 25px;height: 25px;text-align: left;font-weight: bold;padding: 0 8px;color: #fff;position: relative;background-color: #000;}#Validform_msg a.Validform_close:link,#Validform_msg a.Validform_close:visited {line-height: 22px;position: absolute;right: 8px;top: 0px;color: #fff;text-decoration: none;}#Validform_msg a.Validform_close:hover {color: #cc0;}#Validform_msg .Validform_info {padding: 8px;border: 1px solid #000;border-top: none;text-align: left;}</style><script type="text/javascript" src="js/jquery-1.11.0.min.js"></script></head><body><div id="formbox"><h3>返利網注冊</h3><form action="success.html" class="registerform""><table width="100%" style="table-layout:fixed;"><tbody><tr><td style="width:10px;" class="need">*</td><td style="width:70px;">用戶名：</td><td style="width:205px;"><input type="text" class="inputxt" name="txtName" id="txtName" /></td><td><div id="check_name" class="Validform_checktip">由字母、數字、下劃線、點、減號組成的4-18位字符，以數字、字母開頭或結尾</div></td></tr><tr><td class="need">*</td><td>密碼：</td><td><input type="password" class="inputxt" name="txtPwd" id="txtPwd" /></td><td><div id="check_pwd" class="Validform_checktip">英文字母和數字組成的4—10位字符</div></td></tr><tr><td class="need">*</td><td>確認密碼：</td><td><input type="password" class="inputxt" name="txtConfirmPwd" id="txtConfirmPwd" /></td><td><div id="check_confirmpwd" class="Validform_checktip">兩次輸入密碼需一致</div></td></tr><tr><td class="need">*</td><td>Email：</td><td><input type="text" name="txtEmail" id="txtEmail" class="inputxt" /></td><td><div id="check_email" class="Validform_checktip">請輸入您常用的郵箱,如jzlg@tom.com或者jzlg@sina.com.cn</div></td></tr><tr><td class="need">*</td><td>移動電話：</td><td><input type="text" class="inputxt" name="txtTel" id="txtTel" /></td><td><div id="check_tel" class="Validform_checktip">手機號由11位數字組成，且以13、15、18開頭</div></td></tr><tr><td class="need">*</td><td>性別：</td><td><input type="radio" class="pr1" name="gender" value="帥哥" /><label for="male">帥哥</label><input type="radio" class="pr1" name="gender" value="美女" /><label for="female">美女</label></td><td><div id="check_gender" class="Validform_checktip">性別必選一項</div></td></tr><tr><td class="need">*</td><td>省份：</td><td><select id="province" name="province"><option value="--請選擇省份--">--請選擇省份--</option><option value="湖北省">湖北省</option><option value="江西省">江西省</option><option value="海南省">海南省</option></select></td><td><div id="check_province" class="Validform_checktip">省份必選一項</div></td></tr><tr><td class="need">*</td><td>購物網：</td><td><input type="checkbox" value="淘寶網" class="rt2" name="shoppingsite" /><label>淘寶網</label><input type="checkbox" value="當當網" class="rt2"name="shoppingsite" /><label>當當網</label><br /><input type="checkbox" value="京東" class="rt2" name="shoppingsite" /><label>京東</label><input type="checkbox" value="亞馬遜" class="rt2"name="shoppingsite" /><label>亞馬遜</label><br /></td><td><div id="check_shop" class="Validform_checktip">至少選擇一項，可多選</div></td></tr><tr><td class="need">*</td><td>個人介紹：</td><td><textarea name="personalIntroduction" rows="5" cols="30" id="jieshao"></textarea></td><td><div id="check_textarea" class="Validform_checktip">必須填寫個人介紹</div></td></tr><tr><td class="need"></td><td></td><td style="padding:10px 0 18px 0;" colspan="2"><input type="submit" value="提 交" / id="tijiao"><input type="reset" value="重 置" /></td></tr></tbody></table></form></div><script src="js/jquery-1.11.0.min.js"></script><script>$(function() {var pd=falsevar pd1=falsevar pd2=falsevar pd3=falsevar pd4=falsevar pd5=false//賬號$('#txtName').on('blur', function() {var txttext = /^[0-9a-zA-Z][0-9a-zA-Z_.-]{2,16}[0-9a-zA-Z]$/if (txttext.test($('#txtName').val())) {$('#check_name').text('正確')pd=true} else {$('#check_name').text('請按要求填寫')pd=false}})//密碼$('#txtPwd').on('blur', function() {var mitext = /^[a-zA-Z0-9]{4,10}$/if (mitext.test($('#txtPwd').val())) {$('#check_pwd').text('正確')pd1=true} else {$('#check_pwd').text('請按要求填寫')pd1=false}})//確認密碼$('#txtConfirmPwd').on('blur', function() {if ($('#txtPwd').val() == $('#txtConfirmPwd').val()) {$('#check_confirmpwd').text('正確')pd2=true} else {$('#check_confirmpwd').text('請按要求填寫')pd2=false}})//Email$('#txtEmail').on('blur', function() {var Email = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/if (Email.test($('#txtEmail').val())) {$('#check_email').text('正確')pd3=true} else {$('#check_email').text('請按要求填寫')pd3=false}})//電話$('#txtTel').on('blur', function() {var Email = /^(13|15|18)\d{9}$/if (Email.test($('#txtTel').val())) {$('#check_tel').text('正確')pd4=true} else {$('#check_tel').text('請按要求填寫')pd4=false}})//電話$('#jieshao').on('blur', function() {if ($('#jieshao').val() == "") {$('#check_textarea').text('請按要求填寫')pd5=false} else {$('#check_textarea').text('正確')pd5=true}})//提交$('#tijiao').on('click',function(){var pd= $('#province').val().length==3if ($('input[name=gender]:checked').length!=0 &&pd&&$('input[name=shoppingsite]:checked').length!=0&&pd&&pd1&&pd2&&pd3&&pd4&&pd5) {console.log('成功')return true} else{console.log('失敗')return false}})})</script></body>
</html>
跳轉頁面區域
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>?���?�</title>
</head>
<body>
<h1>?���?���</h1>
</body>
</html>效果圖
js主要實現的是數據驗證功能下方是主要數據驗證代碼
)
