失去焦点后验证

最新推荐文章于 2024-04-01 11:07:05 发布

我是牛小牛

最新推荐文章于 2024-04-01 11:07:05 发布

阅读量2k

点赞数

本文链接：https://blog.csdn.net/weixin_45747700/article/details/102573415

版权

这篇博客主要探讨了在JavaScript中如何实现在文本框失去焦点后进行数据验证的技术，包括设计有效的文本框和编写验证函数的详细步骤。

摘要由CSDN通过智能技术生成

1…失去焦点后验证
首先设计文本框

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="verify.js"></script>
    <style type="text/css">

        .input{
   
            font-size: 10px;
            width: 200px;
            height: 20px;
        }

    </style>
</head>

<center>
    <br />
    <h3>验          证</h3>
    <br /><br />
    <div>用&nbsp;&nbsp;户&nbsp;&nbsp;名：
        <input class="input" type="text" id="userName" onblur="regName()"  />
        <span id="userNameReg"></span>
    </div>
    <br />
    <div>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

我是牛小牛

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

正则表达式+JS效果

hyt_123456的博客

10-15

276

标题正则表达式在这里插入代码片 ```<script src="verify.js"></script> <style type="text/css"> #div{ margin-top: 40px; margin-left: 1800px; font-size: 50px; height: 40px; ...

失去焦点验证

tianranran的博客

12-08

298

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单

参与评论您还未登录，请先登录后发表或查看评论

失焦验证

b04330230的博客

06-01

516

<body> 账号：<input type="text"><span style="color: red"></span> <p>密码：<input type="password"><span style="color: red"></span></p> <p><...

js登陆表单正则表达式

weixin_45756606的博客

10-27

299

代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.js"></script> </head> &...

Bootstrap实现input控件失去焦点时验证

09-01

在用户离开(input)控件，即失去焦点时进行验证是一种常见的做法，可以及时反馈错误，提高用户体验。在Bootstrap中，我们可以使用内置的表单验证功能或者自定义JavaScript/jQuery代码来实现这一功能。以下是一个...

文本框获得焦点和失去焦点的判断代码

12-09

这段代码使用`focus()`和`blur()`分别绑定获得焦点和失去焦点的事件。在获得焦点时，文本框前的标签文本清空；失去焦点时，若文本框内容为空，则恢复标签文本。除此之外，还有示例代码展示了如何在JavaScript中...

Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)

12-29

AngularJS提供了表单验证，但是验证的过程交互体验很不好，比如重设密码...一，点击提交验证 <form action= class=form-horizontal col-md-9 name=reset_pwd ng-submit=resetPwd()> 密码 <input type=

JS正则表达式-登陆注册

匿名丶OC

05-15

2566

要求：用户名只能是字母或者数字或者下划线，不能以数字开头，用户名长度在6到20之间密码两次验证必须一致，用户名密码不能为空。<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" > <title>模拟注册</title>

失焦校验真SB，尝试使用ES6的Proxy来做校验。

dongnihao的博客

02-09

1117

背景：这两天准备优化表单代码，公司规定的是失焦校验。问题描述：表单里有个input框，只能输入数字。使用Ant desgin的表单前缀加了一个“PT”，此时的PT是一个icon。并不是字符串。传入数据库的时候，需要拼接字符串加上“PT”（这个是字符串）。关闭模态窗口表单重新校验了，而且校验的是最新值，如“PT1234” 。项目统一失焦校验，导致了交互方面出问题，视图层会优先改变。举例， “1234”,点击保存变成会拼接前缀变成“PT1234”并且传入数据库。这时候视图层也会变成“PT1234

html正则表达式登录验证,使用正则表达式验证登录页面输入是否符合要求

weixin_39645306的博客

05-30

943

先给大家展示下效果图：废话不多说了，直接给大家贴代码了，具体代码如下所示：$(function() {$("input[name='uname']").blur(function() { //失去焦点var namestr = $(this).val();var regstr = /^[\u4e00-\u9fa5]{2,4}$/;if(!regstr.test(namestr)) {$(this)...

js项目实战（一）登录界面正则表达式信息验证

qq_45868384的博客

06-09

1008

效果展示：当中使用了鼠标移入移出效果：正则验证： index.html编写 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/index.css" /> ...

input失去焦点验证格式_JS使用正则表达式判断输入框失去焦点事件

weixin_42512159的博客

01-17

1467

效果图项目的正则表达式规则1:用户名: 大写字母开头 6-20位字符(不允许有符号但是允许有_)2:密码大写开头数字字母符号混合 8-15位3:确认密码大写开头数字字母符号混合 8-15位4:邮箱邮箱格式5:手机号手机号格式6:身份证号身份证号格式7:地址中文开头数字 - 字母中文混合项目目录html代码由于无法上传bootstrap.min.css需要样式的需要前往官网下载b...

whxweb的博客

12-24

872

ajax 失去焦点验证,jquery ajax：获取焦点后新的输入字段失去焦点

weixin_29065659的博客

08-05

440

我试图在ajax更新期间专注于新创建的输入元素，但焦点以某种方式丢失。jquery ajax：获取焦点后新的输入字段失去焦点var options = {url: aURL,type: "POST",dataType: "xml",data: params,success: function(responseData, status, xhr) {// replace DOM element$("...

JS正则表达式页面登录校验效果

weixin_45746054的博客

10-15

479

**JS正则表达式页面登录校验效果代码效果图校验错误提示 HTML代码展示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </style> </head> <body> ...

element-ui 表单校验，失去焦点/框内值改变，校验

最新发布

szzlh123456789的博客

04-01

1113

前提：在el-form表单中，框中有值，失去焦点或者框内值改变的时候，校验提示，依旧没有消失el-select校验失效问题。层级太深了，form检测不到addform的变化，这个时候要么change事件里面强制更新dom触发（视图更新）form表单里面，el-select会出现失效的情况，尤其是我这个el-foem-item 里面又嵌套了。奇怪的是，我表单里面有三个el-select，其他两个生效了，只有另外一个没有生效。

android表单失去焦点校验,Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)...

weixin_42350314的博客

05-31

678

AngularJS提供了表单验证，但是验证的过程交互体验很不好，比如重设密码，重复密码的时候一键入就会提示密码不正确，现整理了两种方法，仅供借鉴。一，点击提交验证密码重复密码密码不一致确认取消当用户试图提交表单时，你可以在作用域中捕获到一个submitted值，然后对表单内容进行验证并显示错误信息。JS代码$scope.submitted = false;$scope.resetPwd = fun...

前端学习之JS+正则表达式（写一个简单的注册页面）

前端水獭的博客

06-18

4231

注册页面在日常生活中我们常常需要在各种软件中注册账号信息。包括社交软件，游戏等等。他们对于账号密码的需求也大不一样。有的较为官方的软件机构网址等需要比较复杂的账号密码，而有的则比较宽松。我们知道注册页面其实就是一个表单，用户填写完表单后提交然后注册。正则表达式那么如何让用户按照程序猿规定的规则进行注册呢？一般会用到正则表达式，正则表达式在百度百科上是这样介绍：正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概

jq input失去焦点时验证

06-10

您可以使用 jQuery 的 blur() 方法来实现在输入框失去焦点时进行验证。具体步骤如下： 1. 获取需要验证的输入框元素。 2. 绑定 blur() 方法。 3. 在 blur() 方法中编写验证函数。 4. 根据验证结果做出相应的处理，比如提示错误信息或者提交表单。下面是一个简单的示例代码： ``` // 获取需要验证的输入框元素 var input = $('#input'); // 绑定 blur() 方法 input.blur(function() { // 在 blur() 方法中编写验证函数 if (input.val() === '') { alert('请输入内容！'); input.focus(); } }); ``` 在这个示例中，当输入框失去焦点时，会检查输入框中是否有内容。如果没有内容，则弹出提示信息，并将焦点重新定位到输入框中。您可以根据自己的需求编写不同的验证函数。