ajax注册验证

最新推荐文章于 2020-09-16 13:25:50 发布
最新推荐文章于 2020-09-16 13:25:50 发布
阅读量489 收藏 3
点赞数
分类专栏： ajax 文章标签： ajax 表单注册验证
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39198420/article/details/73658272
版权 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单的注册页面带验证</title>
<script src="js/jquery-1.11.3.js"></script>
<style>
* {
   padding:0;
   margin:0;
}
#register {
   width:540px;
   height:407px;
   border:1px solid hotpink;
   margin:0 auto;
   margin-top:20px;
}
#register .row {
   height:50px;
   line-height:50px;
   border-bottom:1px dashed #ccc;
}
#register .row div {
   float:left;
   height:50px;
   line-height:50px;
}
#register .row .left {
   width:30%;
   text-align:right;
}
#register .row .right {
   width:70%;
}
#register .row .right input {
   width:200px;
   height:25px;
   border:1px solid #ccc;
   border-radius:4px;
   padding:0px 4px;
   margin-left:10px;
}
#register .row .right input[type=radio] {
   width:30px;
   height:15px;
   line-height:15px;
}
#register .row button {
   width:80px;
   height:30px;
   line-height:30px;
   margin:0 auto;
}
#bg {
   width:100%;
   height:800px;
   background:black;
   opacity:0.8;
   position:absolute;
   top:0px;
   z-index:10;
   display:none;
}
#msg-box {
   height:100px;
   line-height:100px;
   text-align:center;
   top:240px;
   position:absolute;
   z-index:100;
   display:none;
}
.loading {
   width:100px;
   margin-left:48%;
   /*background-image:url('loading.gif');*/
   background-repeat:no-repeat;
}
.success {
   width:400px;
   margin-left:34%;
   color:green;
   border:2px solid green;
}
.error {
   width:400px;
   margin-left:34%;
   color:red;
   border:2px solid red;
}
</style>
</head>
<body>
<div id="register">
    <div class="row">
        <div class="left">
            用户名:
        </div>
        <div class="right">
            <input type="text" name="username" id="username" placeholder="请输入用户名">
        </div>
    </div>
    <div class="row">
        <div class="left">
            手机:
        </div>
        <div class="right">
            <input type="text" name="phone" id="phone" placeholder="请输入手机号">
        </div>
    </div>
    <div class="row">
        <div class="left">
            邮箱:
        </div>
        <div class="right">
            <input type="text" name="email" id="email" placeholder="请输入邮箱">
        </div>
    </div>
    <div class="row">
        <div class="left">
            性别:
        </div>
        <div class="right">
            <input type="radio" name="sex" value="1">男
            <input type="radio" name="sex" value="0">女
            <input type="radio" name="sex" value="2" checked>保密
        </div>
    </div>
    <div class="row">
        <div class="left">
            密码:
        </div>
        <div class="right">
            <input type="password" name="password" id="password" placeholder="请输入密码">
        </div>
    </div>
    <div class="row">
        <div class="left">
            确认密码:
        </div>
        <div class="right">
            <input type="password" name="rpassword" id="rpassword" placeholder="请再次输入密码">
        </div>
    </div>
    <div class="row">
        <div class="left">
        </div>
        <div class="right">
            <button>注册</button>
        </div>
    </div>
</div>
<div id="bg"></div>
<div id="msg-box"></div><script>
$(function($) {
    checkUsername();
    checkPhone();
    checkEmail();
    checkPwd();
    checkRpwd();

    //选择注册按钮,绑定点击事件
    $('button').on("click", function() {
        reg();
    });
});
//设置一个标记
var flag = false;
//检测用户名
var checkUsername = function() {
    $('#username').on("blur", function() {
        var pattern = /^\w{6,18}$/;
        var element = $('#username');
        if (pattern.test(element.val())) {
            element.css("border", "2px solid green");
            flag = true;
        } else {
            element.css("border", "2px solid red");
            flag = false;
        }
    });
}

//检测手机号
var checkPhone = function() {
    $('#phone').on("blur", function() {
        var pattern = /^1(3|4|5|7|8|)\d{9}$/;
        var element = $('#phone');
        if (pattern.test(element.val())) {
            element.css("border", "2px solid green");
            flag = true;
        } else {
            element.css("border", "2px solid red");
            flag = false;
        }
    });
}

//检测邮箱
var checkEmail = function() {
    $('#email').on("blur", function() {
        var pattern = /^\w+@(\w+\.)+(([a-z]+)|([a-z]+\.[a-z]+))$/;
        var element = $('#email');
        if (pattern.test(element.val())) {
            element.css("border", "2px solid green");
            flag = true;
        } else {
            element.css("border", "2px solid red");
            flag = false;
        }
    });
}

//检测密码
var checkPwd = function() {
    $('#password').on("blur", function() {
        var pattern1 = /^[1-9]{6,18}$/;
        var pattern2 = /^[a-z]{6,18}$/;
        var pattern3 = /^[A-Z]{6,18}$/;
        var pattern4 = /^[0-9a-zA-Z~!@#$%^&*_-{6,18}]$/;
        var element = $('#password');
        if (pattern1.test(element.val()) || pattern2.test(element.val()) || pattern3.test(element.val()) || pattern4.test(element.val())) {
            element.css("border", "2px solid green");
            a = 11;
            flag = a;
        } else {
            element.css("border", "2px solid red");
            flag = false;
        }
    });
}

//检测再次输入的密码
var checkRpwd = function() {
    $('#rpassword').on("blur", function() {
        var element = $('#rpassword');
        if (element.val() == $('#password').val() && element.val() != '' && element.val().length > 5 && element.val().length < 18) {
            element.css("border", "2px solid green");
        } else {
            element.css("border", "2px solid red");
        }
    });
}

//获取性别
var getRadios = function() {
    var sex = $('input[type = "radio"]');
    for (var i in sex) {
        if (sex[i].checked) {
            return sex[i].value;
        }
    }
}

//注册
//给提交按钮绑定一个点击事件,在点击事件中提交输入的内容
var reg = function() {
    if (flag) {
        loading();
        $.post("url提交地址", {
                "username": $('#username').val(),
                "phone": $('#phone').val(),
                "email": $('#email').val(),
                "sex": getRadios('sex'),
                "password": $('#password').val()
            },
            function(data) {
                if (data.status) {
                    msg_box(data.msg);
                } else {
                    msg_box(data.msg, false);
                }
            }, 'json');
    }
}

function loading() {
    $('#bg').css('display', 'block'); //显示背景
    $('#msg-box').css('display', 'block'); //显示消息框
//    $('#msg-box').addClass("loading"); //显示加载中图片
}

function msg_box(msg, flag) {
    $('#bg').css('display', 'block'); //显示背景
    $('#msg-box').css('display', 'block').removeClass('loading'); //显示消息框,并移除加载中图片
    flag = flag ? 'success' : 'error';
    $('#msg-box').addClass(flag);
    $('#msg-box').html(msg);
    var sec = 3;
    $('#msg-box').html(msg + sec + '秒后跳转...');
    setInterval(function() {
        sec--;
        $('#msg-box').html(msg + sec + '秒后跳转...');
        if (sec == 0) {
//             location.href = 'http://www.baidu.com'; //跳转页面
        }   

    }, 1000);
}</script>
</body>
</html>
front_end_fan
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAX实现注册验证的例子
03-28
AJAX实现注册验证的例子 基础的AJAX 、适合 初学者学习 。注释很详细。
Ajax注册验证
12-27
### Ajax注册验证技术详解 #### 一、引言 在Web开发中，用户体验是至关重要的。传统的表单提交方式在用户填写完表单并点击提交后，整个页面会重新加载，这种方式不仅耗时而且用户体验较差。为了改善这一点，Ajax...
注册（Ajax验证）
wanwu_fusu的博客
10-19 603
&lt;html&gt;   &lt;head&gt;     &lt;script&gt;           function checkage(){          var age=document.getElementById("age").value;          if(age&lt;16||age&gt;24){          alert("输入年龄范围应该为1...
AJAX注册用户验证（珍藏版）
刘海闯的专栏
11-17 8171
reg.html (注册页面) ajax用户验证 Ajax用户注册验证 method=post>                       用户名:               name="username">             *                     email:
一个简单的ajax验证注册用户名
I_love_Dotnet的专栏
09-27 763
          function $(str)//方法         {           return document.getElementById(str);          //返回  text1  =  ctl00_ContentPlaceHolder1_AjaxRegist1_text1         }           function checkUsername
Ajax注册验证.rar
01-29
Ajax注册验证技术是现代Web开发中的一个重要组成部分，它允许网页在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验。这个“Ajax注册验证.rar”压缩包文件包含了一份关于如何使用Ajax进行用户注册验证的...
asp ajax注册验证之 防止用户名输入空格
10-29
注册验证是互联网应用中一项基础且重要的功能。它确保用户输入的信息符合特定规则，比如用户名和密码的复杂度、邮箱格式等。在这个文件中，我们关注的是如何在注册验证过程中防止用户名输入空格。这通常是为了确保...
Ajax注册验证[借鉴].pdf
10-19
在Ajax注册验证中，主要涉及了两个核心技术：客户端的JavaScript（包括AJAX）和服务器端的Servlet。这里我们将深入解析这两个部分以及它们如何协同工作来实现注册时的用户名验证。 1. **客户端JavaScript (AJAX)** ...
ajax 用户注册验证
我是张先生
12-03 523
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加商品</title> <script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js">&l...
HTML5 Ajax验证的用户注册表单.rar
07-10
HTML5 Ajax验证的用户注册表单，无刷新输入判断的HTML5表单特效，界面风格漂亮，功能简洁实用，表单验证方面包括：用户名、邮箱地址判断、密码字符验证、两次密码是否一致判断、是否同意注册协议等，几个常用的判断，当然其它功能就需要你自己添加了。
ajax无刷新注册验证实例
09-06
一个简单的ajax无刷新注册验证实例的源码，值得新手学习。
Jquery_Ajax 注册验证（Struts2）<学习随笔>
强强强子的博客
08-28 3821
action public String ajaxYanZheng() throws Exception{   String name=ServletActionContext.getRequest().getParameter("name");         //查询是否存在 要查询的账号  如果不存在 返回 true 否则 false      Boolean b= us.byFin
ajax注册页面异步验证
学习的路上
03-06 242
ajax的原理大家可以看上图 如何获得Ajax对象？ XMLHttpRequest没有标准化，要区分浏览器。 function getXhr(){ var xhr = null; if(window.XMLHttpRequest){ //非ie浏览器 xhr = new XMLHttpRequest(); }else{ //ie浏览器 xhr = new ActiveXOb...
Ajax验证用户名是否已经注册（Servlet实现）
摊开零乱的滋味
01-18 690
客户端：提供一个输入框，当发生keyup事件时，调用函数isExist()，向服务器端发送请求，在readyStateChangeHandle()中得到服务器端的返回值并设置到result中。 index.html ajax验证用户名是否已经注册 var xmlHttp; //创建XMLHttpRequest对象
ajax注册
weixin_46500485的博客
09-16 215
ajax注册 1.html端 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *
AJAX注册
q123inhao的博客
01-20 151
Ajax编写用户注册实例及技术分析2009-01-04 16:46我所举的这个例子是一个企业用户注册时的一个应用，当用户注册时检查用户名和企业名是否可用，以前的做法是在旁边加一个按钮，点击“检查”，就向服务器发出请求， 然后等待……服务器返回信息，继续操作。如果我们用Ajax技术来实现以上的操作则不必等待服务器返回信息， 用户输入用户名或企业名称的时候，当输入文本框失去焦点的时候，则会自动向服...
Ajax学习笔记——实现注册界面用户名的验证
ashleyjun的博客
09-06 532
Ajax（Asynchronous JavaScript and XML，异步的 JavaScript 和 XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 传统的网页（不使用Ajax），如果需要更新内容必须重新加载整个网页，较麻烦，用户体验差。 Ajax主要用于创建快速动态网页；应用实例：新浪微博、Google 地图、开心网等等。 JSON（JavaScript Objec...
Ajax实现用户注册（详细版）
weixin_30896511的博客
09-06 554
随着信息技术的发展，网络时代和我的生活密切相关，在讲解ajax之前先 chitchat 下，呼呼。。现在真是信息大爆炸的时代，想了解什么，或者想学习下什么只要你走进网络，轻松挥动鼠标，点击 search 即可搞定，而用ajax实现的搜索速度快，减轻的客户端与服务端的负荷作用。下面用一个实例说明实现ajax无刷新用户验证 ajax.js Code Code 1/**//**...
史上最强大ASP+AJAX注册验证程序
ASP+AJAX注册即时提示程序代码，用于增强用户注册时的验证功能，提供用户名、密码、邮箱、验证码、中文字符、QQ号码和身份证号码等多方面的检查。 在网页开发中，用户注册是必不可少的一个环节。为了提高用户体验并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值