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 相关文章推荐
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jQuery实现简易聊天框
Feb 08 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
php str_pad 函数使用详解
2009/01/13 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
php图形jpgraph操作实例分析
2017/02/22 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
DIV外区域Click后关闭DIV的实现代码
2011/12/21 Javascript
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
2015/02/15 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
微信小程序实现分享到朋友圈功能
2018/07/19 Javascript
Vue 莹石摄像头直播视频实例代码
2018/08/31 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
如何使用proxy实现一个简单完整的MVVM库的示例代码
2019/09/17 Javascript
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
python中使用pyhook实现键盘监控的例子
2014/07/18 Python
python文本数据处理学习笔记详解
2019/06/17 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
pandas中的ExcelWriter和ExcelFile的实现方法
2020/04/24 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
python性能测试工具locust的使用
2020/12/28 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
法学专业本科生自荐信范文
2013/12/17 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
辩护意见书
2015/06/04 职场文书
python Polars库的使用简介
2021/04/21 Python
DSP接收机前端设想
2022/04/05 无线电