JQ登录验证

于 2021-12-06 10:57:52 发布
阅读量527 收藏 2
点赞数
文章标签： webview p2p html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zb0109/article/details/121742397
版权
这是一个使用HTML和jQuery实现的简单登录验证页面。用户输入的会员名/邮箱/手机号和密码将进行格式验证，只有当账号为纯字母或纯数字且不为空，密码长度至少6位时，登录按钮才会变为可用状态。登录账号为'admin'，密码为'Week35'时，会弹出“登录成功”的提示。
摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0 auto;
                padding: 0;
            }

            #submit {
                width: 400px;
                height: 600px;
                border: 1px solid red;
            }

            .head {
                width: 400px;
                height: 30px;
                background-color: red;
            }

            p {
                font-size: 25px;
                float: left;
                margin-left: 50px;
            }

            p>a {
                color: black;
            }

            .text {
      

最低0.47元/天 解锁文章
肉松南瓜小贝
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery验证登录
Demo_csdn
10-27 1458
要求: 点击id为btn的按钮, 1.判断id为username的输入是否为空,如果为空,则弹出你输入的不能为空. 2.判断id为password的输入的个数是否小于6位,如果小于6位,则弹出你输入的长度不可以 先看看效果： 代码出来了： <!DOCTYPE html> <html> <head lang="en"> <meta charset...
登录注册验证jq
09-10
注册登录jq验证代码，javascript学习中关于表单提交和用户输入信息的验证。
jQuery--验证用户登录
罗俊
07-20 7596
前言 内容 HTML代码： CSS代码： JavaScript代码： 总结 HTML知识点: CSS知识点: JavaScript知识点: end 前言 前面的博客对jQuery有所介绍，所以接下来的这几篇博客是对jQuery的介绍，具体介绍方式是用例子呈现给大家。 内容 废话少说，先上代码： HTML代码： &amp;lt;!DOCTYPE html&amp;gt...
jq登录表单验证
比旎
07-19 5655
每个项目中都会有登录注册模块的一些验证。比如说：用户名我们要验证位数和是否符合用户名规则；密码要验证字母开头，长度，是否包含下划线等等，这里我总结了一下常用的验证规则，用的是项目中用到的class和id ,如果自己用到的话要对名称做相应的修改。
jq 登录正则验证
weixin_34060741的博客
03-22 251
$(function(){ //点击input中的文字 消失 $(".user").click(function(){ if($(".user").val() == "邮箱") { $(".user").val(" "); } }) //用户名验证 $(".user").blur(function(){ //验证邮箱 ^(字母数字...
jq登录注册
10-22
综上所述，"jq登录注册"项目涉及了jQuery的基础知识、前端表单验证与处理、Ajax交互以及页面样式设计等多个方面，是一个实用的前端开发示例。通过这个项目，开发者可以提升自己的jQuery技能，并了解如何构建完整的...
JQ手机号，邮箱，密码验证
10-19
在登录验证中，这三个验证通常会整合在一起，形成一个完整的表单验证流程。例如，当用户点击登录按钮时，会触发一个事件，该事件调用这些验证函数并根据结果向用户显示反馈。如果所有验证都通过，表单才能被提交。 ...
JQ表单验证控件
05-19
一个开源的JQ表单验证控件。绝对好用，我连续用了1年多了。很多项目都在使用。
jq验证器插件.zip
10-06
《jQuery验证器插件详解与应用实践》 jQuery验证器插件是JavaScript开发中的一个强大工具，主要用于在前端实现表单数据的有效性验证，确保用户输入的数据符合预设的规则，从而提高用户体验并减少服务器端的压力。这...
Jquery+Ajax实现的前台登陆验证（
09-20
通过Jquery实现的前台输入验证，用Ajax传输到Servlet 再使用DButils开源库实现数据库查询 返回结果 适合初学者学习
jQuery实现验证用户登录
12-13
前言 前面的博客对jQuery有所介绍，所以接下来的这几篇博客是对jQuery的介绍，具体介绍方式是用例子呈现给大家。 内容 显示效果 输入之前 输入之后点击校验 废话少说，先上代码： HTML代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery实战1-用户名校验</title> <script src="script/jq
jq登陆界面
03-27
5种登陆界面不同样式，使用JQuery 实现
jQuery+ajax实现简单登录验证
12-13
本人亲自写的jQuery+ajax实现登录验证，内含两个项目，注释清晰，特来和大家分享
JQ 实现的各种验证
12-21
JQ 实现的各种验证，包括账号密码的为空性、数据格式的正确性，数据值的长度要求对应等等，通过改变控件属性提示用户验证结果，很好很强大，功能齐全
jquery注册用户验证
10-17
在cnblogs上下载的，看着还不错,引用地址http://www.cnblogs.com/wzh2010/archive/2010/10/17/1853345.html
jq验证
qq_31876557的博客
10-27 419
/** * 性别 */ function sex(name) { val=$('input:radio[name="sex"]:checked').val(); var text = $(name).val(); $("#sex").empty(); if(val==null){ $("#sex1").after( "请选择性别!"); return false; }
JQuery登录验证实现
vivian_1985的专栏
04-24 2782
使用Jquery实现ajax的步骤：获取、发送、接受、显示 1、获取文本框的内容    var jqueryobj=$("#username");    //jquery方法返回的都是jquery的对象，在此对象执行jquery的方法    var username=jqueryobj.val()    //得到input节点的value值    //等同document.
jQuery登录验证
11-16 1426
[#ftl] [#include "/_inc/inc.ftl"] [#include "/_inc/meta.ftl"] [#include "/_inc/link.ftl"] [#include "/_inc/css.ftl"] .login_panel_01{ background-color: #FFF;
一个完整JQ登录页面代码
最新发布
05-18
以下是一个使用jQuery实现登录页面的示例代码： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>登录页面</title> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script> <script src="login.js"></script> </head> <body> <h2>用户登录</h2> <form id="login-form"> <label for="username">用户名：</label> <input type="text" id="username" name="username"><br><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br><br> <input type="submit" value="登录"> </form> <div id="error-message"></div> </body> </html> ``` JavaScript代码（login.js）： ``` $(document).ready(function() { $("#login-form").submit(function(event) { // 阻止表单的默认提交行为 event.preventDefault(); // 获取表单数据 var formData = { 'username': $('input[name=username]').val(), 'password': $('input[name=password]').val() }; // 发送POST请求到后端验证登录 $.ajax({ type: 'POST', url: 'login.php', data: formData, dataType: 'json', encode: true }) .done(function(data) { // 登录成功跳转到用户首页 if (data.success) { window.location.href = 'user_homepage.html'; } // 登录失败提示错误信息 else { $("#error-message").html(data.message); } }) .fail(function(xhr, status, error) { console.log(xhr.responseText); console.log(status); console.log(error); }); }); }); ``` 注意：以上代码中的登录验证需要在后端实现，这里只是前端示例代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值