<!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)的更多相关文章

  1. Win7如何取消用户登陆界面

    Window取消用户登陆界面 用户已设置密码状态下:删除密码即可. 用户无密码状态下: 运行 → control userpasswords2 → 找到“要使用本机,用户必须输入用户名与密码”这一项, ...

  2. 2017.10.20 jsp用户登陆界面连接数据库

    用户登陆界面 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8 ...

  3. 用java写一个用户登陆界面

    一.课堂测试源代码及其结果截图 用java的swing写一个用户登录界面,采用网格布局.源代码如下: /** * */package LiuLijia; import java.awt.CardLay ...

  4. WDA演练一：用户登陆界面设计(二)

    一,登陆界面设计: 1.将系统编号灰显,默认初值 2.密码栏勾选密码显示,这样就不会明文显示在页面上了: Init方法中添加默认值代码: METHOD wddoinit . DATA lo_nd_zh ...

  5. WDA演练一：用户登陆界面设计(一)

    一,新建用户表: 用户和密码参考标准的.这里给用户分了几个维度,以便后面进行接下来的业务设定. 二,新建ZLY_PORTAL 程序. 除了MAIN视图外,在添加LOGON视图. 1.导入预先做好的主页 ...

  6. [Django]登陆界面以及用户登入登出权限

    前言:简单的登陆界面展现,以及用户登陆登出,最后用户权限的问题 正文: 首先需要在settings.py设置ROOT_URLCONF,默认值为: ROOT_URLCONF  = 'www.urls'# ...

  7. 三层架构下实现用户登陆C#

    上篇文章讲到三层.接下来就通过一个实例详细的看怎么用三层实现用户登陆界面. 一.Model实体(LoginModel): namespace LoginModel { //加入类:UserInfo M ...

  8. 基于Oracle数据库登陆界面及功能实现 Java版

    首先要在Oracle数据库创建表文件,包括建立表头以及关键字(唯一标识符),此次程序所用的表名称为SW_USER_INFO,表头有UNAME.UKEY.USEX等,关键字为UCC,然后添加一条记录,用 ...

  9. alertDialog创建登陆界面，判断用户输入

    alertDialog创建登陆界面,需要获取用户输入的用户名和密码,获取控件对象的时候不能像主布局文件那样获得, 需要在onClickListener中获取,代码如下: public boolean ...

随机推荐

  1. BZOJ_2438_[中山市选2011]杀人游戏 _强连通分量

    BZOJ_2438_[中山市选2011]杀人游戏 _强连通分量 Description 一位冷血的杀手潜入 Na-wiat,并假装成平民.警察希望能在 N 个人里面,查出谁是杀手.警察能够对每一个人 ...

  2. 宿主机 && docker 常用命令

    宿主机 && docker 常用命令 1.如果你想快速发现在该主机上使用最多资源的容器(或是最近的所有systemd服务),我推荐systemd-cgtop命令: 2.

  3. .net使用DotNetCharting控件生成报表统计图总结

    最近在做项目时要对数据进行统计分析,所以必须生成一些报表统计图(如柱形图.饼图.曲线图等),网上强烈推荐了使用DotNetCharting控件来实现,于是自己对DotNetCharting控件进行了简 ...

  4. WebBrowser内嵌页面的跨域调用问题

    很早之前我写过一篇Blog:网页通过External接口与WebBrowser交互,文中的交互其实只介绍了JS调用C++的部分,而C++调用JS由于微软自己的例子太多,那篇文章就没介绍,不过我最近遇到 ...

  5. Log4j1的使用与log4j.properties的配置

    这里介绍Log4j1(即Log4j 1.x版本),这里以普通的Java项目为例,用eclipse编写,项目结构如下图所示: 该项目主要包括: java文件:Log4jv1Util 以及 Log4jv1 ...

  6. spring使用过程中遇到的问题

    1.出现这样的错误:The type org.springframework.core.NestedRuntimeException cannot be resolved. It is indirec ...

  7. Websocket 学习

    一.含义 WebSocket 是一种在单个TCP连接上进行全双工通讯的协议.   WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据.在WebSocket ...

  8. Swift异常处理

    在Swift里,抛出的异常必须继承Error这个协议.那么这个协议是什么呢? 按住command再点击Error我们可以看到, public protocol Error { } extension ...

  9. npm切换到淘宝镜像

    1. npm简介 1.1.说明:npm(node package manager)nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等): 1.2.使用npm安装插件:命令提示符执 ...

  10. 算法学习--Day7

    今天多做一些杂题练习一下. 第一题: 题目描述 在情报传递过程中,为了防止情报被截获,往往需要对情报用一定的方式加密,简单的加密算法虽然不足以完全避免情报被破译,但仍然能防止情报被轻易的识别.我们给出 ...