$.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注册表单

最新文章

热门文章
