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 实现表单验证功能
Jul 05 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
jquery实现图片放大镜效果
Dec 23 jQuery
jquery插件实现搜索历史
Apr 24 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 单引号与双引号的区别
2009/11/24 PHP
PHP中PDO的错误处理
2011/09/04 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
PHP使用GETDATE获取当前日期时间作为一个关联数组的方法
2015/03/19 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
jquery xMarquee实现文字水平无缝滚动效果
2014/04/29 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
js闭包用法实例详解
2016/12/13 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
Vue data的数据响应式到底是如何实现的
2020/02/11 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
Python打印不合法的文件名
2020/07/31 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
cosme官方海外旗舰店:日本最大化妆品和美容产品的综合口碑网站
2017/01/18 全球购物
捷克时尚网上商店:OTTO
2018/03/15 全球购物
党员自我评价分享
2013/12/13 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
单位同意报考证明
2015/06/17 职场文书
网络研修心得体会
2016/01/08 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python