用ajax写注册页面_jquery的ajax请求写法

全栈程序员站长

发布于 2022-11-10 14:23:42

3.1K0

发布于 2022-11-10 14:23:42

大家好，又见面了，我是你们的朋友全栈君。

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<title>XXXX</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/weui-2.1.4/dist/style/weui.min.css"/>
<script type="text/javascript" src="js/jquery-3.0.0.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="page">
<div class="weui-form">
<div class="weui-form__text-area">
<h2 class="weui-form__title">注册</h2>
</div>
<div class="weui-form__control-area">
<div class="weui-cells__group weui-cells__group_form">
<div class="weui-cells__title">表单组标题</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell weui-cell_active">
<div class="weui-cell__hd">
<label for="telephone" stype="display:inline;">手机：</label>
</div>
<div class="weui-cell__bd">
<input type="text" class="weui-input" id="telephone" placeholder="必填" autocomplete="off"/>
</div>
</div>
<div class="weui-cell weui-cell_active">
<div class="weui-cell__hd">
<label for="password">密码：</label>
</div>
<div class="weui-cell__bd">
<input type="password" class="weui-input" id="password" style="display:inline;width:200px;"
autocomplete="off" placeholder="必填"/>
</div>
</div>
</div>
</div>
</div>
<div class="weui-form__opr-area">
<a class="weui-btn weui-btn_primary weui-btn_disabled" id="showTooltips" th:href="'javascript:register();'" style="color:#06ae56;">确认注册</a>
</div>
</div>
<div id="js_toast" style="display: none;">
<div class="weui-mask_transparent"></div>
<div class="weui-toast">
<i class="weui-icon-success-no-circle weui-icon_toast"></i>
<p class="weui-toast__content">已完成</p>
</div>
</div>
</div>
<div id="dialogs">
<div class="js_dialog" id="androidDialog12" style="display: none;">
<div class="weui-mask"></div>
<div class="weui-dialog weui-skin_android">
<div class="weui-dialog__hd"><strong class="weui-dialog__title">提示消息</strong></div>
<div class="weui-dialog__bd">
手机号码有误
</div>
<div class="weui-dialog__ft">
<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">确定</a>
</div>
</div>
</div>
</div>
</body>
<script>
$("#showTooltips").click(function() {
alert("准备提交注册……");
var tel=document.getElementById("telephone").value;
var pas=document.getElementById("password").value;
console.log(tel+";"+pas);
if(isPas(pas)){
alert("不能全是数字，不能全是字母，不能全是符号（这里只列出了部分符号，可自己增加，有的符号可能需要转义），长度不能少于8位");
}
else {
if (isMobile1(tel)) {
$.ajax({
type: "post",
url: "/registerUser",
async: false,
contentType: "application/x-www-form-urlencoded",
data: {
"user": $('#user').val(),
"password": $('#password').val(),
"telephone": $('#telephone').val()
},
success: function (data) {
if (data == "注册成功") {
alert("注册成功");
window.location.href = "/login";
} else {
alert(data);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("请求在连接过程中出现错误..\n" + errorThrown);
}
});
} else{
alert("手机号有错误");
}
}
});
function isMobile1(str) {
if (/^[1][3,4,5,7,8,9]\d{9}$/.test(str)) {
return true;
} else {
return false;
}
}
function isPas(str) {
if (/(?!^\\d+$)(?!^[a-zA-Z]+$)(?!^[_#@]+$).{8,}$/.test(str)) {
return false;
} else {
return true;
}
}
</script>
</html>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/188900.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年9月27日，如有侵权请联系 cloudcommunity@tencent.com 删除

https