要求

1、用户名和密码为空点击登录时提示相应的提示

2、获取用户名输入框时，错误提示清除

思路

1、创建1个input-text标签和1个input-password标签，1个input-botton标签

2、把按钮绑定点击时间，然后检查所有输入框内容是否为空，为空则加上提示

3、把输入框绑定事件，获取焦点时清除提示

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--设置用户名输入框-->

<label >用户名

<input id="t1" class='info' type="text">

    <!--空span标签用来后面绑定事件添加提示-->

    <span></span>

</label>

<hr>

<!--设置密码输入框-->

<label >密码

    <input id="t2" class="info" type="password">

     <!--空span标签用来后面绑定事件添加提示-->

    <span></span>

</label>

<hr>

<label id="b1">

    <input type="button" value="登录">

</label>

<script src="JQ.js"></script>

<script>

    // 按钮绑定点击事件

    $('#b1').click(function () {

        let $name=$('#t1');

        let $pwd=$('#t2');

        // 按钮点击后检查输入框是否为空，为空则找到span便签添加提示

        if ($name.val().length===0)

        {

            $name.next().text('用户名不能为空')

        }

        if($pwd.val().length===0)

        {

            $pwd.next().text('密码不能为空')

        }

    });

    // 给输入框添加时间，获取焦点时,将span标签中的内容设置成空

    $('.info').focus(function () {

        $(this).next().text('');

    })

</script>

</body>

</html>

Jquery实现检测用户输入用户名和密码不能为空的更多相关文章

  1. 要求用户输入用户名和密码，只要不是admin、888888就

    要求用户输入用户名和密码,只要不是admin.888888就一直提示用户名或密码错误,请重新输入 Console.WriteLine("输入账号和密码"); string a = ...

  2. 在主函数中提示用户输入用户名和密码。另写一方法来判断用户输入是否正确。该方法分别返回一个bool类型的登录结果和和一个string类型的登录信息。如登录成功，返回true及“登录成功”，若登录失败则返回false及“用户名错误”或“密码错误”（使用out参数）

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. 服务器http://localhost:8080要求用户输入用户名和密码

    我们在将web项目部署运行的时候,想要在浏览器上输入http://localhost:8080时却提示: 如果你的电脑安装过Oracle的话,可能是和Oracle 的端口一样了,这是可以有两个办法解决 ...

  4. nginx配置访问密码，让用户输入用户名密码才能访问

    如果我们在 nginx 下搭建了一些站点,但是由于站点内容或者流量的关系,我们并不想让所有人都能正常访问,那么我们可以设置访问认证.只有让用户输入正确的用户名和密码才能正常访问.效果如下: 在 ngi ...

  5. git push不用重复输入用户名和密码（解决方案）

    每次git push都要输入用户名和密码,有点麻烦,就上网搜了下解决方案. 网上的解决方案有的讲得不清晰,逐个试了后,总结下两种有效的解决方案.   方案一: 1.在计算机安装盘(即一般为C盘)下找到 ...

  6. TortoiseGit 连接oschina不用每次输入用户名和密码的方法

    每次git clone 和push 都要输入用户名和密码.虽然安全,但在本机上每次都输有些麻烦,如何记住用户名和密码呢? 在网上看了各种方法,太杂,很多可能环境不一样,一直行不通.最后找到一种有效的方 ...

  7. iis配置好后，解决打开服务器要输入用户名和密码的问题

    [转]IIS网站访问需要输入用户名和密码 xp系统下安装IIS5,并设置好网站路径,但是访问网站时需要输入用户名和密码,这个问题极大可能是因为你网站放置在一个文件系统为NTFS的盘符上,而IIS默认的 ...

  8. 【IIS转】：解决IIS下localhost访问需要输入用户名和密码的问题

    [摘要]安装完IIS后,我们可能会发现浏览器输入localhost访问时提示我们输入用户名和密码,本文介绍了这种问题的解决方法,方便站长们调试自己的程序. 在我们的WIN XP系统中安装了IIS,但是 ...

  9. 避免git clone和push时每次都需要输入用户名和密码

    有三种方式解决git clone时每次都需要输入用户名和密码, 1. SSH免密方式 使用git bash ssh-keygen或puttygen.exe生成公钥. 2. 配置全局开机存储认证信息 下 ...

随机推荐

  1. oracle 删除表空间TABLESPACE步骤及注意项

    告诉大家,我喜欢通过toad for oralce来实现对oracle数据库的操作. 1.首先通过数据库管理员用户以SYSDBA身份登录.比如使用sys用户去登录 2.查看和记录待删除表空间所在的物理 ...

  2. 蓝牙Legacy Pairing流程概述

    Legacy pairing 从名字上看可以知道它是老式设备采用的配对方法. 配对的最终目的是为了生成key,key可以给链路加密,保证双方设备通信的安全性.那配对流程的讲述其实就是key的生成过程. ...

  3. Linux 特殊权限 SUID,SGID,SBIT

    setuid 和 setgid 分别是 set uid ID upon execution 和 set group ID upon execution 的缩写.我们一般会再次把它们缩写为 suid 和 ...

  4. 剑指offer--5.用两个栈实现队列

    题目:用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 思路: # 栈A用来作入队列# 栈B用来出队列,当栈B为空时,栈A全部出栈到栈B,栈B再出栈(即出队列) v ...

  5. Makes And The Product CodeForces - 817B （思维+构造）

    B. Makes And The Product time limit per test 2 seconds memory limit per test 256 megabytes input sta ...

  6. Day1 Numerical simulation of optical wave propagation之标量衍射理论基本原理(一)

    <Numerical simulation of optical  wave propagation>内容 1. 介绍光波传输的基础理论.离散采样方法.基于MATLAB平台的编码实例以及具 ...

  7. 福州大学软件工程1816 | W班 团队Alpha阶段成绩汇总排名（第9、10次作业）

    写在前面 汇总成绩排名链接 1.作业链接 第九次作业--项目Alpha冲刺(团队) 第十次作业--事后诸葛亮(团队) 2.评分准则 本次作业包括现场Alpha答辩评分(映射总分为100分)+博客分(总 ...

  8. Jmeter操作之跨线程组传递参数

    思路:将某一线程组内的变量通过“__setProperty”函数设置成jmeter的全局变量,在另一线程组中通过“__P”函数调用即可. 1.添加-后置处理器-BeanShell PostProces ...

  9. js创建并下载文件

    先上代码: function createAndDownloadFile(fileName, content) { var aTag = document.createElement('a'); va ...

  10. [转帖]Linux分页机制之概述--Linux内存管理(六)

    Linux分页机制之概述--Linux内存管理(六) 2016年09月01日 19:46:08 JeanCheng 阅读数:5491 标签: linuxkernel内存管理分页架构更多 个人分类: ┈ ...