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


Posted in jQuery onSeptember 06, 2017

实例如下所示:

<!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实现用户登陆界面(示例讲解)

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

jQuery 相关文章推荐
纯jQuery实现前端分页功能
Mar 23 jQuery
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jQuery实现手势解锁密码特效
Aug 14 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jquery获取input输入框中的值
Nov 13 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jquery实现两个div中的元素相互拖动的方法分析
Apr 05 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 #jQuery
jquery+css实现下拉列表功能
Sep 03 #jQuery
jQuery中.attr()和.data()的区别分析
Sep 03 #jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 #jQuery
jquery tmpl模板(实例讲解)
Sep 02 #jQuery
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 #jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 #jQuery
You might like
php日历制作代码分享
2014/01/20 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
Extjs中常用表单介绍与应用
2010/06/07 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
2012/02/27 Javascript
javascript垃圾收集机制与内存泄漏详细解析
2013/11/11 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
详解离线安装npm包的几种方法
2018/11/25 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
vue@cli3项目模板怎么使用public目录下的静态文件
2020/07/07 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
python format 格式化输出方法
2018/07/16 Python
tensorflow实现逻辑回归模型
2018/09/08 Python
Canvas与Image互相转换示例代码
2013/08/09 HTML / CSS
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
应届专科生个人的自我评价
2014/01/05 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
企业党员一句话承诺
2014/05/30 职场文书
最新离婚协议书范本
2014/08/19 职场文书
护士医德医风心得体会
2016/01/25 职场文书
小学毕业教师寄语
2019/06/21 职场文书
redis protocol通信协议及使用详解
2022/07/15 Redis