$.ajax注册表单
生活随笔
收集整理的這篇文章主要介紹了
$.ajax注册表单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表單注冊</title><style>body {margin: 0;padding: 0;background-color: #F7F7F7;}ul {margin: 0;padding: 50px;list-style: none;}.register {width: 800px;margin: 50px auto;background-color: #FFF;border: 1px solid #CCC;border-radius: 5px;}li {display: flex;margin: 20px 0;}label, input {display: block;float: left;height: 46px;font-size: 24px;box-sizing: border-box;color: #333;}label {width: 200px;line-height: 46px;margin-right: 30px;text-align: right;}input {width: 320px;padding: 8px;line-height: 1;outline: none;position: relative;}input.code {width: 120px;}input.verify {width: 190px;margin-left: 10px;}input.disabled {background-color: #CCC !important;}input[type=button] {border: none;color: #FFF;background-color: #E64145;border-radius: 4px;cursor: pointer;}.tips {position: fixed;top: 0;width: 100%;height: 40px;text-align: center;}.tips p {min-width: 300px;max-width: 400px;line-height: 40px;margin: 0 auto;color: #FFF;display: none;background-color: #C91623;}input.gray {background-color: #ccc;}</style>
</head>
<body><div class="register"><form id="ajaxForm"><ul><li><label for="">用戶名</label><input type="text" name="name" class="name"></li><li><label for="">請設置密碼</label><input type="password" name="pass" class="pass"></li><li><label for="">請確認密碼</label><input type="password" name="repass" class="repass"></li><li><label for="">驗證手機</label><input type="text" name="mobile" class="mobile"></li><li><label for="">短信驗證碼</label><input type="text" name="code" class="code"><input type="button" value="獲取驗證碼" class="verify"></li><li><label for=""></label><input type="button" class="btn" value="立即注冊"></li></ul></form></div><!-- 提示信息 --><div class="tips"><p>aaa</p>
</div><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script>// 需求：// 1- 點擊注冊按鈕， 獲取表單數據， 在表單數據驗證通過的情況下， 向后臺發生請求，進行注冊// 2- 接收后臺返回注冊結果，并顯示//注冊功能//總需求：點擊注冊按鈕，向服務端發送請求//需求0：獲取表單數據//需求1:表單校驗//1.1 用戶名不能為空，否則提示"請輸入用戶名"//1.2 密碼長度不能小于6，否則提示"請輸入密碼"//1.3 確認密碼必須與密碼一致，否則提示"確認密碼與密碼不一致"//1.4 手機號碼不能為空，否則提示"請輸入手機號碼";//1.5 手機號碼格式必須正確，否則提示"手機號格式錯誤"//1.6 短信驗證碼必須是4位的數字，否則提示"驗證碼格式錯誤"//需求2：點擊注冊按鈕時，按鈕顯示為"注冊中...",并且不能重復提交請求//需求3：根據不同響應結果，處理響應//3.1顯示注冊結果// 1- 點擊注冊按鈕， 獲取表單數據$('.btn').click(function () {// 獲取表單數據// var name = $('.name').val();// var pass = $('.pass').val();// var repass = $('.repass').val();// var str = 'name='+ name +'&pass=' + pass; ....// name=zs&age=29// jq提供 表單序列化： 用于快速獲取表單數據// 本質： 把表單name屬性 和value 進行拼接// name=zs&pass=123&repass=123&mobile=123&code=123var str = $('#ajaxForm').serialize();// console.log(str);// return false 可以終止請求// 寫ajax基本結構$.ajax({type: 'post',url: './register.php',data: str,dataType: 'json',// timeout: 1000,beforeSend: function () {// 在請求發生之前 做數據驗證 ， 如果數據不合理，程序到此結束//1.1 用戶名不能為空，否則提示"請輸入用戶名"if ($('.name').val().trim().length == 0){// 提示錯誤信息$('.tips p').fadeIn(500).delay(1000).fadeOut(500).text('親，用戶名不能為空哦');// 程序到此結束return false;}// 1.2 密碼長度不能小于6if ($('.pass').val().length < 6){// 提示錯誤信息$('.tips p').fadeIn(500).delay(1000).fadeOut(500).text('親，密碼長度不能小于6位哦');// 程序到此結束return false;}//1.3 確認密碼必須與密碼一致if ($('.pass').val() !== $('.repass').val() ){// 提示錯誤信息$('.tips p').fadeIn(500).delay(1000).fadeOut(500).text('親，兩次密碼不一致哦');// 程序到此結束return false;}//1.4手機號碼格式1開頭的11位數組，否則提示"手機號格式錯誤"var telReg = /^1\d{10}$/;if (! telReg.test( $('.mobile').val() )){// 提示錯誤信息$('.tips p').fadeIn(500).delay(1000).fadeOut(500).text('親，手機號有誤哦');// 程序到此結束return false;} // 1.5 短信驗證碼必須是4位的數字if ($('.code').val().length !== 4){// 提示錯誤信息$('.tips p').fadeIn(500).delay(1000).fadeOut(500).text('親，驗證碼有誤哦');// 程序到此結束return false;}// 如果程序能執行到此， 說明所有的驗證全部通過// 讓按鈕變色，給用戶提示，請求已發送// $('img').attr('src', '1.jpg');// 對于值為bool類型 屬性 disabled checked selected 用prop 來操作$('.btn').addClass('gray').val('正在注冊...').prop('disabled', true);},success: function (info) {// info = JSON.parse(info);console.log(info);if (info.code === 200) {alert(info.msg);} },error: function () {},complete: function () {//本次注冊完成后， 可以進行下次注冊了$('.btn').removeClass('gray').val('立即注冊').prop('disabled', false);}});})</script></body>
</html>
總結
以上是生活随笔為你收集整理的$.ajax注册表单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于React开发范式的思考：写在Les
- 下一篇： C语言——完数