返回顶部
首页 > 资讯 > 前端开发 > html >怎么用JQUERY写注册验证
  • 480
分享到

怎么用JQUERY写注册验证

2024-04-02 19:04:59 480人浏览 独家记忆
摘要

这篇文章将为大家详细讲解有关怎么用Jquery写注册验证,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1 兼容IE6782 适合网站开发html:<script s

这篇文章将为大家详细讲解有关怎么用Jquery写注册验证,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

1 兼容IE678

2 适合网站开发

html

<script src="js/jquery-1.11.3.js"></script>

    <script type="text/javascript">

        $(function () {

            //用户名失去焦点

            $("#userName").on("keyup blur", function () {

                userNameCheck();

            });

            //密码失去焦点

            $("#pwd").on("keyup blur", function () {

                pwdCheck();

            });

            //确认密码失去焦点

            $("#pwdConfirm").on("keyup blur", function () {

                pwdConfirmCheck();

            });

            //邮箱失去焦点

            $("#email").on("keyup blur", function () {

                emailCheck();

            });

            //提交

            $("#reg").click(function () {

                if (userNameCheck() == false || pwdCheck() == false || pwdConfirmCheck()==false|| emailCheck()==false)

                {

                    //alert("检查表单");

                    return;

                }

                else {

                    $.ajax({

                        type: "post",

                        url: "Submit.aspx",

                        data: $("fORM").serialize(),

                        success: function (response,status,xhr) {

                            if (response=="success")

                            {

                                alert("注册成功!");

                                window.location = "HtmlPage1.html";

                            }

                            else {

                                alert("注册失败!");

                            }

                        },

                        error: function () {

                            alert("ajax错误");

                        }

                    });

                }

            });

            $(document).ajaxStart(function () {

                $("#div1").show();

            }).ajaxStop(function () {

                $("#div1").hide();

            });

        });

        //验证邮箱格式

        function checkEmail(str) {

            var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;

            if (re.test(str)) {

                return true;

            }

            else {

                return false;

            };

        };

        function userNameCheck() {

            var userName = $("#userName").val();

            //用户名不能为空

            if (userName == "") {

                $("#label_UserName").html("<strong style='color:red'>用户名不能为空!</strong>");

                //$("#userName")[0].focus();

                return false;

            }

            else {

                $.ajax({

                    type: "post",

                    url: "Ajax.aspx",

                    data: $.param({ userName: $("#userName").val() }),

                    success: function (response, status, xhr) {

                        if (response == "ok") {

                            $("#label_UserName").html('<img  src="../img/aa.png" alt="" />');

                            return true;

                        }

                        else {

                            $("#label_UserName").html("<strong style='color:red'>用户名已存在!</strong>");

                            return false;

                        }

                    }

                });

            }

        };

        function pwdCheck() {

            var pwd = $("#pwd").val();

            if (pwd == "") {

                $("#lable_pwd").html("<strong style='color:red'>密码不能为空!</strong>");

                //$("#pwd")[0].focus();

                return false;

            }

            else {

                if (pwd.length < 6) {

                    $("#lable_pwd").html("<strong style='color:red'>密码不能少于6位!</strong>");

                    return false;

                }

                else {

                    $("#lable_pwd").html('<img  src="../img/aa.png" alt="" />');

                    return true;

                }

            }

        };

        function pwdConfirmCheck() {

            var pwdConfirm = $("#pwdConfirm").val();

            if (pwdConfirm == "") {

                $("#label_pwdConfirm").html('<strong >确认密码不能为空!</strong>');

                return false;

            }

            else {

                if ($("#pwdConfirm").val() != $("#pwd").val()) {

                    $("#label_pwdConfirm").html('<strong >两次输入的密码不一致,请重新输入!</strong>');

                    return false;

                }

                else {

                    $("#label_pwdConfirm").html('<img  src="../img/aa.png" alt="" />');

                    return true;

                }

            }

        };

        function emailCheck() {

            var email = $("#email").val();

            if (email == "") {

                $("#label_email").html('<strong >邮箱不能为空!</strong>');

                return false;

            }

            else {

                if (checkEmail(email) == false) {

                    $("#label_email").html('<strong >邮箱格式不正确!</strong>');

                    return false;

                }

                else {

                    $("#label_email").html('<img  src="../img/aa.png" alt="" />');

                    return true;

                }

            }

        }

    </script>

    <style type="text/CSS">

        #div1 {

            width: 180px;

            height: 140px;

            display: none;

            font-weight: bold;

            color: red;

        }

    </style>

</head>

<body>

    <form>

        <table>

            <tr>

                <td>用户名:</td>

                <td><input type="text" id="userName" name="userName" /><span >*</span><label id="label_UserName"></label></td>

            </tr>

            <tr>

                <td>密码:</td>

                <td><input type="text" id="pwd" name="pwd" /><span >*</span><label id="lable_pwd"></label></td>

            </tr>

            <tr>

                <td>确认密码:</td>

                <td><input type="text" id="pwdConfirm" name="pwdConfirm" /><span >*</span><label id="label_pwdConfirm"></label></td>

            </tr>

            <tr>

                <td>邮箱:</td>

                <td><input type="text" id="email" name="email" /><span >*</span><label id="label_email"></label></td>

            </tr>

            <tr>

                <td><input id="reg" type="button" value="提交" /></td>

                <td></td>

            </tr>

        </table>

        <div id="div1"><img  src="../img/loading.gif" alt="" />正在提交,请稍候......</div>

    </form>

</body>

</html>

关于“怎么用JQUERY写注册验证”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

--结束END--

本文标题: 怎么用JQUERY写注册验证

本文链接: https://lsjlt.com/news/83811.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 怎么用JQUERY写注册验证
    这篇文章将为大家详细讲解有关怎么用JQUERY写注册验证,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1 兼容IE6782 适合网站开发html:<script s...
    99+
    2024-04-02
  • jQuery怎么实现注册正则表单验证
    使用jQuery实现注册正则表单验证的步骤如下:1. 添加jQuery库文件到HTML页面中:```html```2. 编写HTML...
    99+
    2023-08-11
    jQuery
  • jquery表单验证怎么写
    在前端开发中,表单验证是必不可少的一项技能。表单验证可以保证用户输入的数据的正确性和合法性,有效地减少了数据错误的概率,给用户带来良好的体验。本文将介绍如何使用jQuery对表单进行验证。框架与插件在使用jQuery对表单进行验证时,我们可...
    99+
    2023-05-25
  • jQuery表单验证的代码怎么写
    这篇文章主要介绍“jQuery表单验证的代码怎么写”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“jQuery表单验证的代码怎么写”文章能帮助大家解决问题。 jQu...
    99+
    2024-04-02
  • jQuery中正则验证注册页面的示例分析
    这篇文章给大家分享的是有关jQuery中正则验证注册页面的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体如下:<!DOCTYPE html> &...
    99+
    2024-04-02
  • 怎么用vue实现登录注册及token验证
    本篇内容主要讲解“怎么用vue实现登录注册及token验证”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用vue实现登录注册及token验证”吧!1. 利用router.beforeEach...
    99+
    2023-07-04
  • 如何用jQuery重写表单验证
    这篇文章主要讲解了“如何用jQuery重写表单验证”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何用jQuery重写表单验证”吧!前面我们曾介绍过使用jQ...
    99+
    2024-04-02
  • 关闭discuzX3.2注册页面的注册邮箱验证
        论坛升级后发现注册用户在输入任何邮箱email时,一直提示email 地址无效.用firephp跟踪发现:随机生成的email的后缀是@localhost!找...
    99+
    2024-04-02
  • Ajax中怎么验证用户名是否已被注册
    本篇文章给大家分享的是有关Ajax中怎么验证用户名是否已被注册,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。简单的输入框<body>...
    99+
    2024-04-02
  • 如何运用jQuery写的验证表单
    这篇文章主要介绍了如何运用jQuery写的验证表单,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。//运用jQuery写的验证表单<!D...
    99+
    2024-04-02
  • Spring Boot邮箱链接注册验证及注册流程
    简单介绍 注册流程 【1】前端提交注册信息 【2】后端接受数据 【3】后端生成一个UUID做为token,将token作为redis的key值,用户数据作为redis的value值,...
    99+
    2024-04-02
  • ajax中怎么利用 jquery校验用户是否已经注册
    本篇文章为大家展示了ajax中怎么利用 jquery校验用户是否已经注册,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。 服务端代码这里...
    99+
    2024-04-02
  • 使用ajax怎么实现无刷新验证注册信息
    这篇文章将为大家详细讲解有关使用ajax怎么实现无刷新验证注册信息,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。一.把注册的html页面做好(html+cs...
    99+
    2024-04-02
  • 使用django怎么实现发送验证码注册邮箱
    这篇文章将为大家详细讲解有关使用django怎么实现发送验证码注册邮箱,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。视图代码lis = []#设置一个空列表用来存放发送的...
    99+
    2023-06-14
  • Python验证企业工商注册码
    中国企业工商注册码前六位为行政区代码,中间8位顺序编码,最后一位为根据ISO 7064:1983.MOD 11-2校验码计算出来的检验码,本算法根据最后一位校验码的算法来判断企业注册码是否合法,同时稍作修改...
    99+
    2022-06-04
    注册码 工商 企业
  • jQuery EasyUI之验证框validatebox怎么用
    这篇文章主要介绍jQuery EasyUI之验证框validatebox怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.样式validatebox(验证框)的设计目的是为了验...
    99+
    2024-04-02
  • jQuery验证插件validate怎么使用
    要使用jQuery的验证插件validate,首先需要引入jQuery和validate插件的相关文件。HTML代码示例:```html```JavaScript代码示例:```javascript$(document).ready(f...
    99+
    2023-08-11
    jQuery validate
  • 使用AJAX怎么实现一个注册验证用户名功能
    今天就跟大家聊聊有关使用AJAX怎么实现一个注册验证用户名功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。接口public interface UserDao&...
    99+
    2023-06-07
  • java怎么实现注册的短信验证码功能
    本篇内容介绍了“java怎么实现注册的短信验证码功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!短信验证码实现流程构造手机验证码,生成一个...
    99+
    2023-06-02
  • jquery表单验证插件validation怎么用
    这篇文章主要为大家展示了“jquery表单验证插件validation怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jquery表单验证插件validat...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作