注册界面ajax 写法

最新推荐文章于 2021-08-05 12:29:43 发布
最新推荐文章于 2021-08-05 12:29:43 发布
阅读量451 收藏 2
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wtfsb/article/details/105426184
版权 
<!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>
饭九钦vlog
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery Ajax 登陆和注册页面
06-01
带有自动验证插件，
ajax——用ajax写登陆页面
weixin_33720078的博客
02-21 551
ajax.php &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;he...
AJAX编写用户注册实例及技术小结
关注技术
03-19 1012
 　所举的这个例子是一个企业用户注册时的一个应用，当用户注册时检查用户名和企业名是否可用，以前的做法是在旁边加一个按钮，点击“检查”，就向服务器发出请求，然后等待……服务器返回信息，继续操作。如果我们用Ajax技术来实现以上的操作则不必等待服务器返回信息，用户输入用户名或企业名称的时候，当输入文本框失去焦点的时候，则会自动向服务器发出请求，用户继续做下面的操作，不必点击“检查”，也不必等待服务
注册页面jQuery的Ajax请求,手写注册页面，并实现验证信息（AJAX,Jquery,正则表达式，密码强度验证）...
weixin_30444697的博客
08-05 548
@{Layout = null;}$(function () {//验证用户名$("#StudentLoginName").blur(function () {yzLoginName();})//验证年龄$("#StudentAge").blur(function () {yzAge();});//验证本人姓名$("#StudentName").blur(function () {yzName()...
AJAX实现简单的注册页面异步请求实例代码
01-21
AJAX简介 (1)AJAX = 异步 JavaScript 和 XML。 (2)AJAX 是一种用于创建快速动态网页的技术。 (3)通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 (4)传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。  简单布局 JS先判断,把前端可以的判断做,减少服务器的交互 $('button').on('click',function(){; var booluser = $('#data input')[0].value.length >=
js基本ajax写法示例代码
10-26
### JS基本Ajax写法知识点详解 #### 一、引言 在现代Web开发中，Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过Ajax，用户可以在不离开当前页面的...
基于wordpress的ajax写法详解
08-28
总结来说，基于WordPress的AJAX写法主要包括以下步骤： 1. 在前端JavaScript中，使用jQuery发起AJAX请求，设置好URL（admin-ajax.php）和`action`参数。 2. 创建后端PHP处理函数，处理请求并返回数据。 3. 使用`add...
javascript原生ajax写法分享
11-24
在JavaScript中，Ajax（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下，与服务器交换数据并更新部分网页的技术。它的核心是XMLHttpRequest对象，它允许JavaScript与服务器进行异步通信，实现...
比较完整的原始ajax写法
05-27
标题中的“比较完整的原始ajax写法”指的是在JavaScript中实现异步XMLHttpRequest（Ajax）通信的基本方法，不依赖任何库或框架，如jQuery、axios等。这种原生的Ajax技术对于理解网络请求的工作原理至关重要。 在...
原生Aajax 和jQuery Ajax 写法个人总结
01-19
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。 　一个完整的HTTP请求：由请求方式、URL、请求头和请求体组成； 　一个完整的HTTP响应：由状态码、响应头、响应体组成； 　http状态码：1开头 ...
ajax 注册页面代码
09-04
ajax 注册页面代码！
Ajax用户注册页面
abc1498880402的博客
10-24 7286
一、实验目的： 使用HTML超文本标记语言制作简单页面，要求通过实验能够掌握HTML文件的基本结构和文档的创建、编辑及保存。 验证并掌握HTML超文本标记语言的文本、图像、超链接、表格、表单等标记的使用。 通过实验掌握层叠样式表CSS的创建及应用，掌握在网页中插入层叠样式表CSS的常用方法，掌握层叠样式表CSS的主要基本属性的使用。 通过实验了解JavaScript的编程规范及基本语法，能...
用户登录和注册界面（html ajax）
热门推荐
qq_37139060的博客
08-05 3万+
用户名密码的登录页面（点击注册跳转到注册页面） &lt;/html&gt;login.html &lt;!DOCTYPE html&gt; &lt;html xmlns:th="http://www.thymeleaf.org"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;index&amp
AJAX示例一（注册页面用户名验证）
fzjiangmin1984的专栏
10-14 479
页面展示代码： 用户名: var req; function validate(){ var username=document.getElementById("userid"); var url="Validate.jsp?id="+escape(username.value);//escape用于对字符串进行编码，可以对其中的字符任意值进行解析 i
AJAX实现注册
马海宝
06-09 1150
这几天没什么事情弄了一个AJAX的注册，   把代码贴出来给大家看看：ajax)" />   if (window.ActiveXObject && !window.XMLHttpRequest) {       window.XMLHttpRequest=function() {       return new ActiveXObject((navigator.userAgent.toL
ajax实现注册
Wtt_0805的博客
12-24 217
$(function () { $("#signupForm").validate({ rules: { loginname: { required: true, minlength: 2, remote: { url: “/MyHandler/submin_ajax.ashx”, type: “post”, dataType: “json”, data: { loginname: function () { return $("#loginname").val(); }, action: function
用ajax实现注册页面一些处理
baba的博客
12-19 814
http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp 首先是ajax教程，基本的语法什么的。 var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHt
ajax注册html页面代码,AJAX实现简单的注册页面异步请求实例代码
weixin_42516710的博客
06-05 642
AJAX简介(1)AJAX = 异步 JavaScript 和 XML。(2)AJAX 是一种用于创建快速动态网页的技术。(3)通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。(4)传统的网页(不使用 AJAX)如果需要更新内容，必需重载整个网页面。简单布局JS先判断,把前端可以的判断做,减少服务器的交互$('...
Ajax实现异步交互完成注册页面
mahaopengphp的专栏
12-19 755
今天李伟老师带我们从新复习了Ajax   Ajax服务器是实现异步交互来完成显示的。 假如传统是一个页面，你要刷新页面需要向服务器发送请求，然后服务器把刷新后的返还给你，这样重会有一段时间的白页，并且慢，而且刷新了全部的页面。 而Ajax的异步交互 就是仅仅自动刷新你要看到的 不用一下刷新一整个页面 和样子不仅方便快捷，而且更加的人性化 。   基于Ajax 他比传统的方式更加的便捷
ajax的写法是什么样的
最新发布
06-13
我们使用`onreadystatechange`方法监听AJAX状态变化事件，当AJAX状态为4（表示请求已完成）并且状态码为200（表示请求成功）时，我们使用`JSON.parse`方法将响应数据解析成JSON对象，并将其中的数据更新到页面中。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

饭九钦vlog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值