jq——输入框失去焦点提示错误案例

最新推荐文章于 2021-06-19 15:00:59 发布
最新推荐文章于 2021-06-19 15:00:59 发布
阅读量1.1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mrzhaoplus/article/details/78511689
版权
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
   span{
    color: red;
    
   }
   
  </style>
  <script src="js/jquery-1.11.1.min.js"></script>
  <script>
   var flag=true;
   $(function(){
    
    $("#name").blur(function(){
     //获取表单内容
    var name=$("#name").val();
    var sp1=$("#sp1");
     if(name.length<3||name==null){
     sp1.text("用户名格式不正确");
     
     flag=false;
    }else{
     sp1.text("√");
     flag=true;
    }
    });
    
    $("#email").blur(function(){
     //获取表单内容
    var email=$("#email").val();
    var sp2=$("#sp2");
     if(email.match("@")){
      sp2.text("√");
      flag=true;
     }else{
      sp2.text("Email格式不正确");
     
     flag=false;
     }
    });
    $("#tel").blur(function(){
     //获取表单内容
    var tel=$("#tel").val();
    var sp3=$("#sp3");
     if(tel.length==11){
      sp3.text("√");
      flag=true;
    }else{
    sp3.text("手机号码格式不正确");
    flag=false;
    }
    });
    $("#sfz").blur(function(){
     //获取表单内容
    var sfz=$("#sfz").val();
    var sp4=$("#sp4");
     if(sfz.length==18){
      sp4.text("√");
      flag=true;
    }else{
    sp4.text("身份证号码格式不正确");
    flag=false;
    }
    });
    
    $("button").click(function(){
     
     var name=$("#name").val();
     var tel=$("#tel").val();
     var sfz=$("#sfz").val();
     if(flag){
      alert("提交成功")
     }else{
      alert("提交失败")
     }
    })
    
    
    
   })
   
  </script>
 </head>
 <body>
  
  <form>
  <table>
   <tr>
    <td>姓名:</td>
    <td><input type="text" id="name" /></td>
    <td><span id="sp1" class=""></span></td>
   </tr>
   <tr>
    <td>Email地址:</td>
    <td><input type="email" id="email" /></td>
    <td><span id="sp2" class=""></span></td>
   </tr>
   <tr>
    <td>手机号:</td>
    <td><input type="text" id="tel" /></td>
    <td><span id="sp3" class=""></span></td>
   </tr>
   <tr>
    <td>身份证号:</td>
    <td><input type="text" id="sfz" /></td>
    <td><span id="sp4" class=""></span></td>
   </tr>
   <tr>
    <td colspan="3"><button>提交</button></td>
   </tr>
  </table>
  </form>
 </body>
</html>
黑暗中的鬼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现input文本框点击时文字消失，失去焦点时文字出现
04-14
NULL 博文链接：https://luanxiyuan.iteye.com/blog/1744279
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
10-16
主要介绍了jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
esyuitextbox失去焦点验证并提示
遛弯的兔子
05-10 818
easyui textbox会经常用到validatebox验证，验证不通过form无法提交，这个在我的另一篇博客中有解答http://blog.csdn.net/linadadan/article/details/71304757，而这次的遇到的要求是验证完只是提示，可以继续操作，于是就想到了easyui textbox的失去焦点事件 ，找了一些资料找到解答办法。  代码： 来文字号
文本框失去焦点显示提示文字
Whales_w的博客
12-14 845
<input type="text" id="pwd" placeholder="请输入密码" class="typeText" onfocus="this.placeholder=''" onblur="this.placeholder='请输入密码'" />
EditText获取焦点提示文字消失，失去焦点有提示文字
qq_38933706的博客
07-24 1488
学学学，要做的就是写好控件找到EditText的控件ID，然后使用监听器setOnFoucusChangeListener, 在onFoucusChange方法中判断是否有焦点 有焦点setHint(null) 没有焦点setHint(值)；这个值是你写控件hint的提示值。为edittext1.getHint().tostring()方法获得 下面是核心代码。 editText1=(...
AngularJS表单验证【失去焦点再提示】
weixin_34310127的博客
04-12 355
2019独角兽企业重金招聘Python工程师标准>>> ...
jQuery表单获取和失去焦点输入框提示效果
03-14
"jQuery表单获取和失去焦点输入框提示效果"是一种增强用户交互体验的技术，它通过jQuery库来实现对输入框的动态提示功能。当用户将光标移入输入框时，会显示提示信息，而当用户开始输入或移出输入框时，提示信息则会...
JQ 文本框得到失去焦点
08-13
本文将围绕“JQ文本框得到失去焦点”这一主题进行详细讲解，帮助开发者理解如何利用jQuery来监听文本框（input[type="text"]）的聚焦（focus）和失焦（blur）事件。 ### 一、jQuery基本概念 jQuery库通过$函数提供...
用jquery实现输入框获取焦点消失文字
10-27
在本文中，我们将探讨如何使用jQuery实现输入框获取焦点时提示文字消失，并在失去焦点时恢复显示，以提高用户交互体验。这种方法常用于登录表单、注册表单等需要用户输入信息的场景。 首先，我们需要一个基础的HTML...
jquery实用技巧之输入框提示语句
12-10
我们在编写网页的时候不可避免的会遇到输入框，那么怎么设计输入框才能更加优雅呢？不同的人会有不同的答案，下面分享一个比较不错的设计。 效果图 细节 这个效果主要是通过JQuery来实现，我的思路如下： 输入框...
JQuery重复校验导致出现双重提示的问题记录
phubing
07-30 935
一、背景 最近在用JQuery Validate做表单校验时，由于需要校验用户名：1、是否符合注册规则；2、是否为空；3、是否已被注册；4、是否包含特殊字符，但问题来了，第一次点击是校验非空，但输入非法的用户名后会提示不符合注册规则，遂将其删掉，这时便出现了所述问题：既校验了非空，又校验了注册规则。   二、解决办法 其实解决方案也是比较简单，就是在新输入时将上一次的错误校验清除掉再对输入...
PHP提交表单信息即时提醒,jquery表单提交错误信息提示功能实现
weixin_27015375的博客
03-11 230
本文主要介绍了jquery表单提交带错误信息提示效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧，希望能帮助大家更好的完成jQuery表单功能。效果图： html代码：我是投资者地产开发商注册错误信息注册错误信息注册错误信息注册错误信息国家或地区中国美国注册错误信息州/省广东加州注册错误信息注册错误信息注册错误信息下一步css代码：.m_t10 {margin-top: 20px;}...
select2使用jquery validate时错误提示错位
波波的博客
03-05 1250
select2使用jquery validate校验时，错误提示信息位置会放在select元素下方，造成的结果是显示错误，错误信息在下拉框上方，如图： 解决方法： var select2ValidateOption = { errorPlacement: function(error, element) { error.appendTo(element.parent()); ...
失焦验证
b04330230的博客
06-01 489
<body> 账号：<input type="text"><span style="color: red"></span> <p>密码：<input type="password"><span style="color: red"></span></p> <p><...
JQuery Validate验证显示错误提示位置
dayanyun4518的博客
06-21 582
JQuery Validate验证显示错误提示位置 验证多个Name值相同的元素： $(".send").click(function () { var a = 0; var b = ...
前端巧技 | 有点复杂的穿梭框
weixin_48967543的博客
06-19 1115
前言优惠券网 www.fenfaw.net 项目背景:VUE + 基于elementUI 的 Transfer 组件. 实现功能 穿梭框 增加按钮 穿梭框 编辑字段 穿梭框 输入框自动获取焦点 穿梭框 回车确认修改内容 穿梭框 失焦提示未提交内容 1. 穿梭框增加按钮 elementUI 的 Transfer 组件，UI是不分左右的。需求是只有穿梭到右边的字段才有编辑的操作。找遍天也没有看到有slot，或者暴露区分左右的钩子。大胆的说 【render-content 自定义数据项渲染函数】是不满足..
输入框聚焦失焦时，标签隐藏与显示
glimmer的博客
07-20 2428
html 中内容 js代码 通过获取标签的id 改变标签的样式
jq处理身份证号/手机号等字符串中间位数用星号代替
aadyf的博客
06-08 1154
可封装公共方法来处理所有需要使用星号的字符串，此处使用三分法，比如有9个字符就将前三个与后三个显示，中间部分隐藏。如仅有1个字符，就全部显示，如有2个字符就显示第一个隐藏第二个 ...
设置jQuery validate插件错误提示位置
weixin_30556959的博客
03-21 386
参照上一篇bootstrap布局注册表单 使用校验插件默认位置显示提示信息，发现错误提示信息换行了，由于增加了提示信息，表单显示高度也增加了，如下 默认提示信息位置代码为 将错误提示设置其显示在右边，需要对校验代码做如下修改，增加提示信息位置设置 1 errorPlacement: function(error, element) { 2 error.append...
jq中输入框获取焦点添加css样式
最新发布
04-05
可以使用jQuery的focus()和...同样的，当输入框失去焦点时，可以使用以下代码： ``` $('#input').blur(function(){ $(this).css('border-color', 'gray'); }); ``` 这将在输入框失去焦点时将边框颜色设置为灰色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值