javascript input输入框 实现一边输入一边校验

最新推荐文章于 2024-07-02 09:55:49 发布
最新推荐文章于 2024-07-02 09:55:49 发布
阅读量7.8k 收藏 5
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangt85/article/details/8797135
版权

jsp页面中的input 中添加一个onkeyup 的响应事件,他的值为需要帮你处理校验工作的function

<input type="text" id="cityName" name="custom.cityName" value="${cityName}" οnkeyup="cityNameTrim()"></input>


比如说你想去掉用户输入的空格，functuon 可以这么写，用jquery的写法

function cityNameTrim()

{

            var cityName = $("#cityName").val();  
            $("#cityName").val(cityName.trim());
}


这样就实现了用户一边输入一边校验的功能

zhangt85
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 校验多个input框右侧提示
10-18
引用vueValidate插件，做到多个input框的同时校验，右侧提示同时显示
vue3 antd项目实战——input输入框限制输入内容和长度，Form表单动态校验规则
热门推荐
XSL_HR的博客
12-27 1万+
vue3 antd项目实战中，限制input输入框的输入内容和输入长度，并为From表单添加动态校验规则，设置输入框输入内容不能为空。
JavaScript编写规范
最新发布
会思想的苇草i的博客
07-02 702
永远遵循同一套编码规范 —— 可以参考其他规范，也可以是自己总结制定的。不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。本文主要介绍JavaScript代码规范。
聊一聊实际项目中输入框的校验的几种优化方案
xiaosongxiaozi的博客
01-19 345
前言 表单控件，可以说是在前端所有控件中的绝对的基石之一，几乎任何网站都逃脱不了增、删、改、查这个四个基础接口，而为了实现这四个接口对应的功能，在前端几乎必不可少的就是需要输入框来做一些数据的输入和选择 ，比如新增用户时的用户名、密码、地址等等，而为了验证输入信息的有效性，自然就有了对输入信息的校验； ​ 有的小伙伴可能会说，信息的校验不应该是后台在做吗？确实是，不可否认的是后台确实需要做信息的校验，但是如果验证仅仅是在后端做，那么是不是在体验上会有很大的问题，比如：用户名，用户名仅允许数字加字母，如果
JS输入框验证信息提示
qq_45387575的博客
02-19 4300
描述： 1、首先输入框默认显示手机号，下面提示：请输入你的手机号 2、光标放上去的时候开始填写，填写完毕后（那么就要先提取鼠标失去光标这个事件）如果手机号码不正确： 文本框变红，并且下方用红字提示：请填写正确的手机号码 如果输入的手机号码正确：文本框属性不发生变化 问题：怎么判断输入的手机号码是否复合要求？？？ 未写完？？ <!DOCTYPE html> <html lang="en"> <head> <meta charse...
JS判断输入框输入的信息是否符合要求，并将结果显示在输入框后。
Lou__Lan的博客
11-05 483
JS判断输入框输入的信息是否符合要求，并将结果显示在输入框后。
Vue ElementUI实现:限制输入框只能输入正整数的问题
11-19
在Vue和ElementUI框架下，实现输入框(input)只能输入正整数的需求，可以通过多种方式来达成。这里介绍四种不同的方法： ### 方法一：利用禁止按键的方法 此方法通过监听`keyup`事件来阻止用户输入非正整数的字符。...
javascript实现前端input密码输入强度验证
10-15
JavaScript部分，我们可以监听输入框的`oninput`事件，当用户输入密码时调用`passValidate`函数。该函数会检测当前密码是否匹配上述正则表达式，并根据结果更新密码强度条的样式。同时，还需要处理显示/隐藏密码的...
layui实现车牌号输入框
06-06
本篇文章将详细讲解如何利用layui实现车牌号输入框，并特别关注对新能源车牌的支持。 首先，layui是一个轻量级、模块化的前端框架，它提供了丰富的UI组件，如表格、表单、按钮、弹窗等，使得开发者可以快速搭建界面...
微信小程序 input输入框控件详解及实例（多种示例）
08-31
在微信小程序中，`input`输入框控件是用户交互的重要组成部分，用于接收用户输入的文字、数字或其他文本信息。在登录、注册、搜索等功能中，输入框是必不可少的元素。本文将详细介绍微信小程序的`input`输入框控件，...
js 点击侧边栏展示内容_侧栏菜单点击其中一项，在右侧显示如何通过js实现？...
weixin_39806808的博客
12-22 885
菜鸟教程(runoob.com)angular.module('starter', ['ionic']).run(function($ionicPlatform) {$ionicPlatform.ready(function() {// Hide the accessory bar by default (remove this to show the accessory bar above th...
js input输入框校验
zmyalh的博客
01-21 4732
若想在文本框里不能右键弹出菜单和不能粘贴进复制的信息的话就要在里输入 onKeyDown=“fncKeyStop(event)” οnpaste=“return false” οncοntextmenu=“return false;只能输入数字和点号(注意:在[^\d.]里的d不能写成大写D,否则就变成除了数字以外的所有字符)中、英文和数字加@符号加点符号：\a-\z\A-\Z0-9\u4E00-\u9FA5@.然后在(/[\X]/g,‘’)里的X换成你想输入的代码就可以了。只能输入，负数，小数，整数。
多个输入框联动校验：怎么让一个输入框改动，触发另一个校验？
cindy647的博客
04-02 5578
在项目的表单输入中，可能会遇到这种情况，我们需要限制一个最大最小值的范围。如 文本可范围：最小值：【】- 最大值：【】 这两个分别绑定了两个字段，拥有自己的校验方式，当最小值大于最大值时，两个都会报错。怎么让我们修改其中一项，就能够让两个表单都校验，而不需要我们再手动触发一下再校验呢？ 解决方案如下 <el-form ref="limitCommit" :rules="number...
多个输入框的输入校验
smallteddy.blog.csdn.net
05-13 1782
1、代码 <template> <div> <el-popover placement="top-start" title="已占用端口" width="290" trigger="click"> <p>{{ this.ip_list ? this.ip_list.join(', ') : '无'}}</p> <el-input slot="reference" v-model="ip1" placehol
js 、jquery 实现input边输入边搜索，实时搜索功能
web_wq
11-13 4973
1.实现这个功能主要是 keyup() 事件，input框的值有变化时，会实时获取input的值value，并传给getData(value)方法， getData()是发起我们自己ajax数据请求的方法。 $('.search-box input').keydown(function(event){ if(event.keyCode == 13) { let value = th...
前端实时搜索实现（input框边输入边查询）
mu66mu的博客
05-25 8318
实现效果 使用ajax提交数据。 代码如下 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Autocomplete - Default functionality&
Js 写一个表单，验证用户名是否已填写，长度是否满足3个字符到8字符之间（正则完成）
琅枫的博客
04-20 1795
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function check() { var user_name = form.user.value; //获取表单form1的用户名的值 var reg = /^\w{3,8}$/;
js 页面输入判断
wujunlongsy4的专栏
06-02 812
1 数字输入判断 ：http://blog.163.com/mende_001/blog/static/611304352008810115037503/
js 校验括号——括号不可嵌套且需成对出现
朝阳39的博客
11-17 809
实现原理 最终效果 完整代码 <template> <div style="padding: 30px"> <p>校验规则 ：</p> <ol> <li>括号不能嵌套</li> <li>括号必须成对出现</li> </ol> <el-input clearable placehol.
正则校验input-tag输入框只能输入数字
04-26
你好，我可以通过编写一段 JavaScript 代码来实现对输入框的限制，以下是一种可能的实现方式： ``` // 获取输入框 var inputTag = document.getElementById("input-tag"); // 监听输入事件 inputTag.addEventListener("input", function() { // 获取输入框的值 var inputValue = inputTag.value; // 使用正则表达式进行校验 if (/^[0-9]*$/.test(inputValue)) { // 如果输入的是数字，则不做处理 return; } // 如果输入的不是数字，则将输入框的值设置为空字符串 inputTag.value = ""; }); ``` 这段代码会在输入框的输入事件发生时进行校验，如果输入的内容符合正则表达式 `/^[0-9]*$/`，即只包含数字，则不做处理，否则将输入框的值设置为空字符串，实现了校验输入框只能输入数字的功能。 希望我的回答能够帮助您！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值