首页 > 其他分享 >问题--清空输入框表单

问题--清空输入框表单

时间:2023-08-15 18:55:28浏览次数:127  
标签:span -- 验证码 表单 codeInput 输入框 innerText 清空

1.问题--想要清空输入框表单

// 3. 验证的是验证码
// 3.1 获取验证码表单
const codeInput = document.querySelector('[name="code_login"]')
//3.2 使用change事件监听器,邮箱输入框值发生变化的时候,执行verify_Code函数
codeInput.addEventListener('change', verify_Code)
// 3.3 verify_Code函数
function verify_Code() {
const span = codeInput.nextElementSibling
// const span = span0.nextElementSibling
// 3.4 定规则 验证码
const reg = /^\d{6}$/
if (!reg.test(codeInput.value)) {
span.innerText = '输入不合法,6 位数字'
/* 清空验证码输入框 */
codeInput.innerText= ''
return false
}
// 3.5 合法的 就清空span
span.innerText = ''
return true
}
我这里 codeInput.innerText= ''想要清空表单但是并没有自动清空?

2.解决

您在清空验证码输入框时使用了 codeInput.innerText = '',但这是不正确的方法来清空输入框的内容。innerText 属性适用于设置元素的文本内容,但对于输入框元素,应该使用 value 属性来设置或获取其值。

正确的做法是使用 codeInput.value = '' 来清空验证码输入框的内容。这样,您的代码应该像这样:

javascript
Copy code
if (!reg.test(codeInput.value)) {
span.innerText = '输入不合法,6 位数字';
/* 清空验证码输入框 */
codeInput.value = '';
return false;
}
这将会清空验证码输入框的值,并在验证不通过时显示错误消息。

请注意,对于输入框来说,要修改输入框的值,您应该使用 value 属性,而不是 innerText 属性。

标签:span,--,验证码,表单,codeInput,输入框,innerText,清空
From: https://www.cnblogs.com/trmbh12/p/17632162.html

相关文章

  • Go - A Tour of Go Exercise: Fibonacci closure
    packagemainimport"fmt"//fibonacciisafunctionthatreturns//afunctionthatreturnsanint.funcfibonacci()func()int{f0,f1:=0,1returnfunc()int{f:=f0f0,f1=f1,f+f1returnf}}......
  • 【Java】从头开始的Java复健day7
    用的书:《Java从入门到精通》day1(3.1-3.3):【Java】从头开始的Java复健day1day2(3.4-3.8):【Java】从头开始的Java复健day2day3(4.1-4.4):【Java】从头开始的Java复健day3day4(4.5-5.2):【Java】从头开始的Java复健day4day5(5.3-5.4):【Java】从头开始的Java复健day5da......
  • [LitCTF 2023]1zjs
    [LitCTF2023]1zjs题目来源:nssctf题目类型:web涉及考点:信息搜集1.题目给了一个魔方游戏,检查源代码:在/dist/index.umd.js里发现线索:直接访问看看:经查询发现是JSFuck编码,特征为[]+!(),对其解码得到:将[]去掉即可得到flag:NSSCTF{11c9e8fe-03f7-4bc1-bfed-b8277cd55964}......
  • TDengine 3.1.0.0 版本成功发布,涉及五大板块功能更新!
    自3.0版本发布以来,在研发人员和社区用户的不断努力下,时序数据库(TimeSeriesDatabase)TDengine 做了大量更新,产品性能、稳定性和易用性都在不断提升。近期,TDengine3.1.0.0 终于成功发布,下面我们向大家介绍一下这一版涉及到的重大更新。查询性能优化(开源版+企业版)主要优化......
  • Raspberry Pi OS 开启 root 用户并设置为默认自动登录
    1、设置密码#sudopasswdroot2、启用root 用户#sudopassd--unlockroot3、开启root 用户ssh登录的权限。修改/etc/ssh/sshd_config文件,新增一行  PermitRootLoginyes,(此步骤可忽略)PermitRootLoginyesUsePAMyes4、修改 /etc/systemd/system/autolo......
  • Linux——杀死进程
    PS命令-a:显示所有进程,包括其他用户的进程。-u:显示指定用户的进程信息。-x:显示没有控制终端的进程。-e:显示所有进程,等效于-A。-f:显示进程的详细信息,包括进程名称、进程状态、PID、PPID、CPU占用率等。--pid:指定显示某个进程的信息。#查看进程ps-aux|grepja......
  • 2023RISC-V中国峰会,澎峰科技成果发布抢先看!
    2023RISC-V中国峰会(RISC-VSummitChina2023)将于8月23日至25日在北京香格里拉饭店举行。本届峰会将以“RISC-V生态共建”为主题,结合当下全球新形势,把握全球新时机,呈现RISC-V全球新观点、新趋势。本届峰会采用“主会议+技术研讨会+展览展示+同期活动”的方式,预计将举办超过2......
  • web端相关
    1什么是认证和授权 2 ......
  • 物联网平台卷蒙圈了,集体不要钱,白嫖的到底能不能用?
    物联网平台可太卷了,百度随便一搜“免费物联网平台”,厂商集体不要钱全都免费用,点广告一注册,白嫖的物联网平台就到手了。然而,用着用着就会发现,使用是免费的,但一直使用就需要付费了……因为平台通常是阉割版的,或者是在用户数和节点上有限制。这些平台背后使用逻辑,大致可以分为以下三种......
  • 阿里云容器服务 ACK 产品技术动态(202307)
    ......