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实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
JQuery animate动画应用示例
May 14 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jQuery 选择器用法基础入门示例
Jan 04 jQuery
jQuery实现轮播图效果demo
Jan 11 jQuery
jQuery实现简单弹幕制作
Dec 10 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
Smarty结合Ajax实现无刷新留言本实例
2007/01/02 PHP
php设计模式 Template (模板模式)
2011/06/26 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
php错误日志简单配置方法
2016/07/11 PHP
PHP实现多关键字加亮功能
2016/10/21 PHP
替代window.event.srcElement效果的可兼容性的函数
2009/12/18 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
深入理解JavaScript程序中内存泄漏
2016/03/17 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
vue 父组件中调用子组件函数的方法
2019/06/06 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
python range()函数取反序遍历sequence的方法
2018/06/25 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
PyTorch中permute的用法详解
2019/12/30 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
英国买鞋网站:Charles Clinkard
2019/11/14 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
班级道德讲堂实施方案
2014/02/24 职场文书
干部下基层实施方案
2014/03/14 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
教务处干事工作总结
2015/08/14 职场文书
《用字母表示数》教学反思
2016/02/17 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python