jquery实现用户登陆界面(示例讲解)

实例如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <script src="js/jquery-1.8.0.min.js"></script>
  <script>
    var cnresu = false;
    $(function(){
      $("input[name='uname']").blur(function(){//blur从链接上移开焦点(鼠标离开框时)
        var unamestr = $(this).val();
        var regstr = /^[\u4e00-\u9fa5]{2,4}$/;
        if(!regstr.test(unamestr)){
          $(this).parent().next("dd").html("必须是2-4个汉字");
          cnresu = false;
          return;
        }
        cnresu = true;
      });
      $("input[name='uname']").focus(function(){//focus给予链接焦点(鼠标点中框时)
        $(this).css("border","solid 1px #dddddd");
        //$(this).val("");
        $(this).parent().next("dd").html("");
      });
    });
  </script>
  <style>
    #home{
      width: 600px;
      height: 300px;
      margin: auto;
      background-color: #7FFFD4;
    }
    #head{
      padding-top: 20px;
      height: 100px;
    }
    .dl1{
      clear: both;
    }
    .dl1 dt{
      float: left;
      text-align: right;
      width: 150px;
      height: 30px;
      line-height: 30px;
    }
    .dl1 dd{
      float: left;
      height: 30px;
      line-height: 30px;
    }
    #foot{
      text-align: center;
    }
    h1{
      padding-top: 20px;
      text-align: center;
      color: bisque;
    }
  </style>
  <body>
    <div id="home">
      <h1>用户登陆</h1>
      <div id="head">
      <form action="biaodan.html" name="regform" method="post" >
        <dl class="dl1">
          <dt>用户名 : </dt>
          <dd><input type="text" name="uname"/></dd>
          <dd id="erroruname"></dd>
        </dl>
        <dl class="dl1">
          <dt>密码 : </dt>
          <dd><input type="password"/></dd>
          <dd id="errorpass"></dd>
        </dl>
      </div>
        <div id="foot">
          <input type="submit" value="提交"/>
          <input type="reset" value="重置"/>
        </div>
      </form>
    </div>
  </body>
</html>

运行截图

以上这篇jquery实现用户登陆界面(示例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于jQuery Easyui实现登陆框界面

    基于jQuery Easyui实现登陆框界面

    效果图 CSS a{ text-decoration:none; } body{ margin:0px; } #header{ width:100%; height:30px; background-color:#E0EFFF; padding-top: 5px; padding-bottom: 10px; } #header .logo{ margin-left: 50px; font-size: 24px; font-family: 微软雅黑; } #picture{ width:100%;

  • Boostrap实现的登录界面实例代码

    Boostrap实现的登录界面实例代码

    Bootstrap它是一个开源的web开发前端框架. 这几天我看了下Bootstrap的官方文档.看到其中的Basic-form,突然想实现下登录界面.然后想了下实现的思路,于是就打开了桌面的H5 builder码起来.代码实现起来其实不难,但是碰到个问题,就是Bootstrap的布局控制好像用.col类难以实现居中显示,虽然可以用modal(模态框)实现弹出居中,但是我暂时不想用modal框.发现问题后,第一想法是自己再定义个css进行一个控制.但是又不知道行业内的大牛是不是只用Bootstr

  • js实现简单登录功能的实例代码

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>Login.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    &l

  • jQuery简单入门示例之用户校验demo示例

    jQuery简单入门示例之用户校验demo示例

    本文实例讲述了jQuery简单入门示例之用户校验.分享给大家供大家参考,具体如下: jQuery在小编的世界中,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库,百度百科对JQuery的介绍比较详细,小伙伴可以东东自己可耐的小爪子,上网进行搜索,说不定,有意外惊喜哦,今天这篇文章,小编简单的介绍一下JQuery的一些基本知识,然后小编在集合实例,讲解一下在具体的应用过程中,我们的JQuery又是如何在她的舞台熠熠生辉...... 通过JQuery的学习,我们可

  • jquery实现用户登陆界面(示例讲解)

    jquery实现用户登陆界面(示例讲解)

    实例如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="js/jquery-1.8.0.min.js"></script> <script> var cnresu = false; $(function(){

  • 详解Android Studio实现用户登陆界面demo（xml实现）

    使用Android Studio 编写的第一个demo,使用布局文件-xml实现用户登录界面 注:所建工程均为Android 6.0 所以只要是Android 6.0(包括6.0)以上的真机,模拟机都可以使用 Step1:Android Studio 开发环境的搭建: 1.安装JDK (1.8): 2.安装Android studio (3.3.1) 包含 gradle.sdk manage .avd manage : 3.使用sdk manage 下载安装 sdk: 4.使用avd manag

  • Java Swing中JDialog实现用户登陆UI示例

    Java Swing中JDialog实现用户登陆UI示例

    本文实例讲述了Java Swing中JDialog实现用户登陆UI.分享给大家供大家参考,具体如下: JDialog是一种对话框组件,它常常与JOptionPane配合使用.JOptionPane提供对话框内部的消息.按钮等内容,JDialog提供对话框窗体,提供模态/非模态等属性.JDialog与JFrame在外观上的区别在于,它没有最大化/最小化按钮.如下图所示: JDialog窗体 点击File->connect之后弹出登陆窗口: JFrame窗体 在下面的demo中,演示了JDialog

  • jQuery+Pdo编写login登陆界面

    jQuery+Pdo编写login登陆界面

    Jquery是继prototype之后又一个优秀的Javascript库.而且它是轻量级的js库.共有两个版本的 jQuery 可供下载:一份是精简过的,另一份是未压缩的(供调试或阅读).这两个版本都可从 jQuery.com 下载.所以开发学习建议使用压缩的. 当然啦,除了直接下载jquery.js文件外,还可以在html头中插入Google或者Microsoft的CDN来在网页加载时直接从网上获取库文件支持. 使用 Google 的 CDN: <head> <script type=

  • PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)

    PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)

    1.首先做主页面Ajax_pag.php 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax做分页</title> <script src="bootstrap/js/jquery-1.11.2.min.js"></script> <script src="Ajax_

  • JS校验与最终登陆界面功能完整示例

    JS校验与最终登陆界面功能完整示例

    本文实例讲述了JS校验与最终登陆界面功能.分享给大家供大家参考,具体如下: <html> <head> <title>注册页面</title> <meta charset="UTF-8"/> <script type="text/javascript"> // 校验用户名 function checkUname(){ // 获取用户名对象 var uname=document.getElemen

  • JavaWeb基于Session实现的用户登陆注销方法示例

    前言 Cookie:cookie是客户端技术,程序把每个用户的数据以cookie的形式写给用户各自的浏览器. 当用户使用浏览器再去访问服务器中的web资源时,就会带着各自的数据区,这样,web资源处理的就是各自的数据了. Session:session是服务器端技术,利用session技术,服务器在运行时可以为每一个用户的浏览器创建其独享的session对象,由于session为用户浏览器独享,所以用户在访问服务器的web资源时,可以把各自的数据放在session中,当用户再次去访问服务器中的其

  • Python使用装饰器模拟用户登陆验证功能示例

    Python使用装饰器模拟用户登陆验证功能示例

    本文实例讲述了Python使用装饰器模拟用户登陆验证功能.分享给大家供大家参考,具体如下: # -*- coding:utf-8 -*- #!python3 user_list = [ {'name':'ad1','passwd':'123'}, {'name':'ad2','passwd':'123'}, {'name':'ad3','passwd':'123'}, {'name':'ad4','passwd':'123'} ] #初始状态,用来保存登陆的用户, client_dic = {'

  • WPF MVVM示例讲解

    WPF MVVM示例讲解

    在没给大家讲解wpf mwm示例之前先给大家简单说下MVVM理论知识: WPF技术的主要特点是数据驱动UI,所以在使用WPF技术开发的过程中是以数据为核心的,WPF提供了数据绑定机制,当数据发生变化时,WPF会自动发出通知去更新UI. 我们使用模式,一般是想达到高内聚低耦合.在WPF开发中,经典的编程模式是MVVM,是为WPF量身定做的模式,该模式充分利用了WPF的数据绑定机制,最大限度地降低了Xmal文件和CS文件的耦合度,也就是UI显示和逻辑代码的耦合度,如需要更换界面时,逻辑代码修改很少,

随机推荐