仿京东的注册页面, 使用jQuery进行表单验证
生活随笔
收集整理的這篇文章主要介紹了
仿京东的注册页面, 使用jQuery进行表单验证
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
HTML頁面
<pre name="code" class="html"><html>
<head><title>京東注冊</title><meta charset="utf-8"><script type="text/javascript" src="../jquery-2.1.4.js"></script><style type="text/css">body{padding-top: 30px}#web{margin: 0 auto; width: 400px}.title{font-size: 18px; padding-left: 25px; border-left: solid #999 1px; margin-bottom: 40px}.form_item{width:398px; height: 52px; border:solid #ddd 1px; position: relative;}.form_item label{width:90px; height:52px; line-height: 52px; float: left;padding-left: 20px; font-size: 14px; color: #666}.form_item .code{position: absolute; right: 0; top: 0; text-align: center;}.form_item input{border:0; font-size: 14px; width: 190px; height: 19px; padding-bottom: 11px; padding-left: 20px; padding-top: 16px}.input-tip{color:#c5c5c5; height: 27px; font-size: 12px; padding-top: 5px}.input-tip span{height: 22px; line-height: 22px}button, #btn{width:100%; height: 54px; color:#fff; background-color: #e22; border:0; font-size: 16px; font-family: "微軟雅黑"}</style>
</head>
<body><div id="web"><form action="10_10zy.php" method="post"><div class="title">歡迎注冊京東賬號</div><div class="form_item"><label>用 戶 名</label><input type="text" value="" placeholder="您的賬戶名和登錄名" id="uname" name="uname" /></div><div class="input-tip"><span id="uname_error"></span></div><div class="form_item"><label>設 置 密 碼</label><input type="text" value="" placeholder="建議至少使用兩種字符組合" id="pwd" name="pwd" /></div><div class="input-tip"><span id="pwd_error"></span></div><div class="form_item"><label>確 認 密 碼</label><input type="text" value="" placeholder="請再次輸入密碼" id="confirm_pwd" name="confirm_pwd" /></div><div class="input-tip"><span id="confirm_pwd_error"></span></div><div class="form_item"><label>中國 + 86</label><input type="text" value="" placeholder="建議使用常用手機" id="phone" name="phone" /></div><div class="input-tip"><span id="phone_error"></span></div><div class="form_item"><label>驗 證 碼</label><input type="text" value="" placeholder="請輸入驗證碼" id="code"/><label class="code"></label></div><div class="input-tip"><span id="code_error"></span></div><div style="color:#333; font-size:12px"><input type="checkbox" name="agreen" id="agreen"/>我已閱讀并同意<a style="color: #38f">《京東用戶注冊協議》</a></div><div class="input-tip"><span></span></div><input type="submit" name="btn" id="btn" value="立即注冊"><div class="input-tip"><span></span></div><a href="10_10zy_login.php"><button type="button">登錄</button></a></form></div>
</body>
</html>
</pre><pre name="code" class="html">jQuery驗證代碼
<pre name="code" class="javascript"><script type="text/javascript">
$(function(){//$("#")// 二維數組, 用于生成隨機驗證碼var array = [["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"], ["0", "1", "2", "3", "4", "6", "7", "8", "9"]];var str = "";randomCode();// 點擊更換驗證碼$(".code").click(function(){randomCode();});// 隨機生成驗證碼function randomCode(){str = "";for (var i = 0; i < 4; i++) {// 隨機生成一個下標var temp = Math.random();temp = temp < 0.5 ? Math.floor(temp) : Math.ceil(temp);var length = array[temp].length;//從任意值開始至任意值://parseInt(Math.random() * (上限-下限+1) + 下限);var index = parseInt(Math.random() * length);str += array[temp][index];}$(".code").html(str);}// 用戶名正則表達式var uname_reg = /^[\u4e00-\u9fa5]{4,20}$|^[\dA-Za-z_\-]{4,20}$/;var uname_ok = false;// 用戶名輸入框獲取焦點$("#uname").focus(function(){$(this).css("outline", "none");$(this).attr("placeholder", "");$(this).parent().css("border-color", "#999");$("#uname_error").css("color", "#c5c5c5");$("#uname_error").html("支持中文, 字母, 數字, \"-\", \"_\", 的組合, 4-20個字符");});$("#uname").blur(function(){if ($(this).val() == "") {$(this).attr("placeholder", "您的賬戶名和登錄名");$("#uname_error").html("");uname_ok = false;} else if ($(this).val().length < 4 || $(this).val().length > 20) {// 長度不對$("#uname_error").html("長度只能在4-20個字符之間");$("#uname_error").css("color", "red");$(this).parent().css("border-color", "red");uname_ok = false;} else if (!$(this).val().match(uname_reg)) {// 有特殊字符$("#uname_error").html("格式錯誤, 僅支持中文, 字母, 數字, \"-\", \"_\"的組合");$("#uname_error").css("color", "red");$(this).parent().css("border-color", "red");uname_ok = false;} else {uname_ok = true;}});var pwd_reg = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,20}$/;var pwd_ok = false;// 密碼輸入框獲取焦點$("#pwd").focus(function(){$(this).css("outline", "none");$(this).attr("placeholder", "");$(this).parent().css("border-color", "#999");$("#pwd_error").css("color", "#c5c5c5");$("#pwd_error").html("建議使用字母, 數字和符號兩種及以上的組合, 6-20個字符");});$("#pwd").blur(function(){if ($(this).val() == "") {$(this).attr("placeholder", "建議至少使用兩種字符組合");$("#pwd_error").html("");pwd_ok = false;} else if ($(this).val().length < 6 || $(this).val().length > 20) {// 長度不對$("#pwd_error").html("長度只能在6-20個字符之間");$("#pwd_error").css("color", "red");$(this).parent().css("border-color", "red");pwd_ok = false;} else if (!$(this).val().match(pwd_reg)) {// 不是兩種及以上的組合$("#pwd_error").html("有被盜風險, 建議使用字母, 數字和符號兩種及以上組合");$("#pwd_error").css("color", "red");$(this).parent().css("border-color", "red");pwd_ok = false;} else {pwd_ok = true;}});// 再次密碼輸入框獲取焦點var confirm_pwd_ok = false;$("#confirm_pwd").focus(function(){$(this).css("outline", "none");$(this).attr("placeholder", "");$(this).parent().css("border-color", "#999");$("#confirm_pwd_error").css("color", "#c5c5c5");$("#confirm_pwd_error").html("請再次輸入密碼");});$("#confirm_pwd").blur(function(){if ($(this).val() == "") {$(this).attr("placeholder", "請再次輸入密碼");$("#confirm_pwd_error").html("");confirm_pwd_ok = false;} else if ($(this).val() != $("#pwd").val()) {// 再次輸入的密碼不一致$("#confirm_pwd_error").html("兩次輸入的密碼不一致");$("#confirm_pwd_error").css("color", "red");$(this).parent().css("border-color", "red");confirm_pwd_ok = false;} else {confirm_pwd_ok = true;}});// 手機號碼輸入框獲取焦點var phone_reg = /^1[3|4|5|7|8]\d{9}$/;var phone_ok = false;$("#phone").focus(function(){$(this).css("outline", "none");$(this).attr("placeholder", "");$(this).parent().css("border-color", "#999");$("#phone_error").css("color", "#c5c5c5");$("#phone_error").html("驗證完成后, 可以使用該手機登錄和找回密碼");});$("#phone").blur(function(){if ($(this).val() == "") {$(this).attr("placeholder", "建議使用常用手機");$("#phone_error").html("");phone_ok = false;} else if ($(this).val().length != 11) {// 長度不對$("#phone_error").html("格式有錯");$("#phone_error").css("color", "red");$(this).parent().css("border-color", "red");phone_ok = false;} else if (!$(this).val().match(phone_reg)) {// 輸入的不是手機號碼$("#phone_error").html("格式有錯");$("#phone_error").css("color", "red");$(this).parent().css("border-color", "red");phone_ok = false;} else {phone_ok = true;}});// 驗證碼輸入框獲取焦點var code_ok = false;$("#code").focus(function(){$(this).css("outline", "none");$(this).attr("placeholder", "");$(this).parent().css("border-color", "#999");$("#code_error").css("color", "#c5c5c5");$("#code_error").html("看不清? 點擊更換驗證碼");});$("#code").blur(function(){if ($(this).val() == "") {$(this).attr("placeholder", "建議使用常用手機");$("#code_error").html("");code_ok = false;} else if ($(this).val() != str) {// 輸入錯誤的驗證碼$("#code_error").html("驗證碼輸入錯誤");$("#code_error").css("color", "red");$(this).parent().css("border-color", "red");code_ok = false;} else {code_ok = true;}});// 是否同意協議$("#agreen").click(function(){//alert($("#agreen").att("checked"));if ($(this).attr('checked')) {$(this).attr('checked', false);} else {$(this).attr('checked', true);}});
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="white-space:pre"> </span>// 點擊注冊按鈕, 向本頁面提交數據</span>
$("#btn").click(function(event) {/* Act on the event */if ($("#agreen").attr('checked') && uname_ok && pwd_ok && confirm_pwd_ok && phone_ok && code_ok) {$.ajax({url:"10_10zy.php",data:{uname:$("#uname").val(), pwd:$("#pwd").val(), phone:$("#phone").val()},type:"post",dataType:"text",success:function(result){}});} else {alert('信息輸入不完整, 請核對');return false;}});
});
</script>
</pre><pre name="code" class="javascript">php處理數據
<pre name="code" class="php"><?php
$dbServer = 'localhost:3306';
$dbUser = 'MySQL數據庫連接名';
$dbPass = '密碼';
$dbName = '要使用的數據庫名';$conn = mysqli_connect($dbServer, $dbUser, $dbPass, $dbName);
mysqli_set_charset($conn, 'utf8')// 判斷用戶名, 密碼, 手機號是否設置
if (isset($_POST['uname']) && isset($_POST['pwd']) && isset($_POST['phone'])) {// 根據用戶名進行查詢, 判斷當前用戶名是否存在$sql = "select * from users where u_name = '{$_POST['uname']}'";$res = mysqli_query($conn, $sql);// 用戶名已經存在, 退出if (mysqli_num_rows($res) > 0) {die("此用戶名已經存在<br/><button><a href=\"10_10zy.php\">返回</a></button>");} else {// 用戶名不存在, 插入到數據庫中$sql = "insert into users(u_name, u_pwd, u_phone) values('{$_POST['uname']}', '{$_POST['pwd']}', '{$_POST['phone']}')";$result = mysqli_query($conn, $sql);if ($result) {echo "注冊成功<br/>";echo "<a href=\"10_10zy.php\"><button width:\"70px\">返回</button></a>";echo "<button><a href=\"10_10zy_login.php\">登錄</a></button>";die();}}}?>
</pre><br /><br /><pre>
</pre><br /><br /><pre>
總結
以上是生活随笔為你收集整理的仿京东的注册页面, 使用jQuery进行表单验证的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一个程序员失败的爱情
- 下一篇： PDF文件怎么转换成word？