Jquery实现检测用户输入用户名和密码不能为空

最新推荐文章于 2022-11-22 10:34:00 发布
最新推荐文章于 2022-11-22 10:34:00 发布
阅读量3.9k 收藏 13
点赞数 2
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Kingfan1993/p/9813089.html
版权

要求

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>

转载于:https://www.cnblogs.com/Kingfan1993/p/9813089.html

weixin_30319153
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery校验用户名密码等问题
luobotoutou123的博客
03-16 1万+
一。代码验证：    以下是代码实现用户名密码简单校验。             以下是实现的效果        以下是全部代码：            添加客户              table{             background-color:#CCCCCC;             border:1px;             wid
实现用户登录注册页面jQuery验证不能为空的提示以及确认密码与第一次输入密码不匹配的提示功能
热门推荐
Alex的博客
09-02 1万+
用到了blur方法, 当元素失去焦点时发生 blur 事件。 blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码 script代码如下: &lt;script type="text/javascript" src="js/jquery-1.8.3.min.js"&gt;&lt;/script&gt;     &l...
js表单验证，并显示红色警告
digger_419的博客
03-17 6685
我们在表单输入数据的时候，往往需要对输入的数据进行验证，如字段非空，邮箱格式，手机号，电话号等等。下面我将最近使用的表单验证分享一下。 var checkObject = { checkUsername: function (value) { if(value == ""){ $("#username").attr("style", "di
JQuery用户注册表单验证
Sirius小鑫的博客
11-22 2878
使用jquery编写代码实现用户注册表单的验证功能：代码地址。
小作业 表单验证作业
花花的果子的博客
09-01 331
要求： 用户名不能为空 用户名必须在6-14位之间 用户名只能由数字和字母组成，不能含有其他字符 密码和确认密码一致，邮箱地址合法 统一失去焦点验证 错误信息在span标签上提示，12号，红色 文本再次获得焦点后清空错误提示 信息，如果数据不合法清空文本框value数值 最终表单所有项均合法放可提交 ...
jquery ajax 检测用户注册时用户名是否存在
10-29
在`grade.htm`中，我们创建一个文本输入框让用户输入用户名，并设置一个ID为`gradeInfo`的元素用于显示验证结果提示信息。 ```html <input type="text" size="6" name="NAME" id="NAME"/><font color="red">* ...
PHP+Ajax实现的检测用户名功能简单示例
10-17
它首先检查用户名字段是否为空，如果为空则弹出提示让用户输入用户名。如果用户名非空，它将创建一个XMLHttpRequest对象，根据浏览器的不同，可能是ActiveXObject（对于旧版IE）或者XMLHttpRequest对象（对于现代...
jquery实现简单的表单验证
11-22
在网页开发中，表单验证是必不可少的一环，它可以确保用户输入的数据符合预期，从而减少服务器端的压力并提升用户体验。jQuery作为一个强大的JavaScript库，提供了简便的方法来实现这一功能。本篇文章将详细介绍如何...
jQuery+Ajax+PHP+mysql实现无刷新注册/登陆（用户名邮箱验证码等）
04-24
例如，当用户输入无效的用户名或密码时，我们可以使用jQuery来实时检测并显示错误提示。 Ajax（异步JavaScript和XML）技术是实现无刷新页面的关键。通过Ajax，前端可以向服务器发送请求并在后台处理数据，然后将...
jQuery实现注册和登录弹出层效果
11-11
4. **表单验证**：在注册和登录过程中，需要对用户输入进行验证，例如检查用户名、密码是否为空，格式是否正确。jQuery提供了一系列的验证方法，如`.trim()`去除空白，`.is()`检查元素是否满足特定条件。 5. **Ajax...
vue 验证用户名不能为空_vue 验证登录及跳转检验
weixin_32600979的博客
12-29 2857
Vue管理系统的登录。首先，一个登录的组件Login.vue，请求校验用户名密码是否正确，若正确，将用户名与密码保存至store中的state中。然后，在访问每个页面判断state中是否有登录信息，若没有，跳转到登录页，采用的是router.beforeEach()主要代码：从页面上获取到用户名，密码后，点击登录按钮，执行以下函数loginCheck () {// accout为页面获取的登录信息...
javaweb制作网页欢迎页面
weixin_45061071的博客
05-12 2080
判断用户名和密码是否为空如果其一为空则跳出错误提示，要求重新输入用户名密码。 创建两个jsp文件，一个为登陆成功页面，一个为失败页面，文件名自拟。在上一步空值判断完毕后，判断用户名和密码是否为同学名字的全拼，如果是跳转到成功页面，否则跳转至失败页面(比如：失败页面可以使用include指令加入登陆的页面) 登陆页面： <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-..
【JS】判断用户名和密码是否为空
LZGS_4的专栏
04-03 7472
在用户登录页面我们通常需要过滤用户的一些输入，如空格输入或者什么都不输等等，并在用户输入完成时给出红色字的错误提示，在这里分享一些自己写的代码。 首先在login.jsp页面中会有一个用户名和密码的提交表单：
# 1. 正则表达以及失去焦点验证的JS书写
weixin_46692492的博客
09-18 315
1. 正则表达以及失去焦点验证的JS书写 <script> function leave(a) { var reg = /^[ \u4e00-\u9fa5a-zA-Z0-9_-]{5,16}$/;//[ title: [/^[a-zA-Z0-9_-]{5,16}$/, '用户名是5-16不含空的字母'], if (reg.test(a.value) != true) { var username = a.value;
JQuery 提示用户名密码不为空
宝贝企鹅的博客
12-03 2923
$(document).ready(function(){                  //HTML()替换   HTML函数         //append()追加  :input = :text,:password             $(":text,:password").blur(function(){             var v = $(this).val
java用户名密码不能为空代码_Jquery实现检测用户输入用户名和密码不能为空
weixin_42300478的博客
02-24 2801
#要求 1、用户名和密码为空点击登录时提示相应的提示 2、获取用户名输入框时，错误提示清除 #思路 1、创建1个input-text标签和1个input-password标签，1个input-botton标签 2、把按钮绑定点击时间，然后检查所有输入框内容是否为空，为空则加上提示 3、把输入框绑定事件，获取焦点时清除提示Title用户名密码// 按钮绑定点击事件$('#b1').click(fun...
使用JQuery使用户或密码为空不提交，提示输入
小鬼的博客
03-02 564
用户或密码为空不提交，当输入的不为空时，转接到提交界面 javascript:void(0) 不进行表单提交 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.mi
使用jQuery/Vue验证用户名和密码不能为空，用户名和密码必须在6-16个字符之间
最新发布
05-26
使用jQuery进行验证： ```html <form id="myForm"> <label for="username">Username:</label> <input type="text" id="username" name="username"/> <label for="password">Password:</label> <input type="password" id="password" name="password"/> <button type="submit">Submit</button> </form> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function() { $('#myForm').submit(function(event) { var username = $('#username').val(); var password = $('#password').val(); if (username.length < 6 || username.length > 16) { alert('Username must be between 6 and 16 characters.'); event.preventDefault(); } if (password.length < 6 || password.length > 16) { alert('Password must be between 6 and 16 characters.'); event.preventDefault(); } }); }); </script> ``` 使用Vue进行验证： ```html <template> <form @submit.prevent="submitForm"> <label for="username">Username:</label> <input v-model.trim="username" type="text" id="username" name="username"/> <label for="password">Password:</label> <input v-model.trim="password" type="password" id="password" name="password"/> <button type="submit">Submit</button> </form> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { submitForm() { if (this.username.length < 6 || this.username.length > 16) { alert('Username must be between 6 and 16 characters.'); return; } if (this.password.length < 6 || this.password.length > 16) { alert('Password must be between 6 and 16 characters.'); return; } // Submit form } } } </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值