开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

无法在表单验证js脚本上设置null的属性“”className“”

在JavaScript中，如果你尝试设置一个对象的属性为null，并且这个属性名是一个空字符串（""），这通常意味着你在尝试访问或修改一个不存在的DOM元素的类名。这种情况可能发生在表单验证脚本中，当你试图操作一个不存在的元素时。

基础概念

DOM（文档对象模型）：一个编程接口，它表示HTML和XML文档的结构，并允许程序和脚本动态地访问和更新文档的内容、结构和样式。
类名（className）：HTML元素的class属性的值，可以通过JavaScript进行读取和修改。

可能的原因

元素不存在：尝试操作的DOM元素在页面上不存在。
选择器错误：使用的选择器（如document.getElementById、document.querySelector等）没有正确地选中目标元素。
脚本执行顺序：JavaScript代码在DOM元素加载之前执行，导致无法找到元素。

解决方法

检查元素是否存在：在设置类名之前，先检查元素是否存在。
检查元素是否存在：在设置类名之前，先检查元素是否存在。
确保DOM完全加载：将JavaScript代码放在<body>标签的底部，或者使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
确保DOM完全加载：将JavaScript代码放在<body>标签的底部，或者使用DOMContentLoaded事件确保DOM完全加载后再执行脚本。
调试选择器：确保使用的选择器正确无误。可以通过console.log输出选择器的结果来调试。
调试选择器：确保使用的选择器正确无误。可以通过console.log输出选择器的结果来调试。

应用场景

这种问题常见于表单验证脚本中，当你需要根据验证结果动态修改表单元素的样式时。例如，当用户输入无效数据时，你可能希望移除某个元素的类名以改变其样式。

参考链接

通过以上方法，你应该能够解决在表单验证js脚本上设置null的属性className的问题。

相关搜索:无法在id中为和id设置null的属性“”className“”无法在Firebase上设置null的属性'variable‘Vue JS无法设置null的innerHTML的属性 “未捕获TypeError:无法在模式脚本中设置属性'onclick‘of null”无法在HTMLInputElement.onkeydown处验证时设置null的属性“innerHTML”无法在javascript中设置null的属性'value‘无法在反应式表单的“”HTMLInputElement“”上设置“”value“”属性无法在WordPress插件上读取null的属性“%1”无法在ReactJs中设置null和getUserMedia的属性“”srcObject“”无法在React Native引用中设置null的属性“0”未捕获的TypeError:无法设置null的属性'innerText‘-用于倒计时脚本 Javascript:无法在divToHide的Else上读取null的属性“style”jQuery验证-无法读取动态表单上未定义的属性“”settings“”重定向时，无法在laravel中设置null的属性'onsubmit‘未捕获(在promise中) TypeError:无法设置null的属性“”textContent“”无法在dice.js:5读取null的属性“”addEventListener“”用于验证登录表单的HTML/JS脚本在提交时失败测试套件无法运行TypeError:无法设置在Jest中运行的null的属性“content”在赋值之前，Vue.js无法读取null/undefined的属性 TypeError:无法在连续的v-for上读取null vuejs的属性“”indexOf“”

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JQuery 学习—JQuery Validation表单验证范例[通俗易懂]

jQuery Validato表单验证插件，它是基于jQuery类库，实现了js脚本于页面html代码的分离。你可以划分多个校验组，每个组的校验都是互不影响。对一个表单对象，你只需要写一行代码就可以轻松实现无数种（理论上）脚本控制。

02

Node.js建站笔记-使用react和react-router取代Backbone

斟酌之后，决定在《嗨猫》项目中引入react，整体项目偏重spa模式，舍弃部分server端的模板渲染，将一部分渲染工作交给前端react实现。 react拥有丰富的组件，虽然不如Backbone和underscore这对老基友成熟，但考虑到嗨猫的前端并不需要很多的MV*架构，目前使用到Backbone的地方只有hash路由而已，所以最终决定使用react-router取代Backbone，underscore也从项目依赖中移除。下面就以登录&注册页为例，简单讲述整个替代过程。 1. 安装并二次编译rea

09

React Form组件杂谈

对于网页系统来说，表单提交是一种很常见的与用户交互的方式，比如提交订单的时候，需要输入收件人、手机号、地址等信息，又或者对系统进行设置的时候，需要填写一些个人偏好的信息。表单提交是一种结构化的操作，可以通过封装一些通用的功能达到简化开发的目的。本文将讨论Form表单组件设计的思路，并结合有赞的ZentForm组件介绍具体的实现方式。本文所涉及的代码都是基于React v15的版本。

01

HTML5表单及其验证

将原本type为text的input控件声明为以上特殊类型，是为了给用户呈现不同的输入界面（移动平台上支持这些不同的输入界面，这里就不细说），而且表单提交时会对其值做进一步的验证。下面展示这些新表单元素，请用支持这些表单元素的浏览器查看，IE对其支持最差。

04

前端基础-什么是正则表达式

正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来对字符串的进行匹配。

01

Angularjs基础(一)

(一) 模型——视图——控制器　　　　端对端的解决方案，AngularJS 试图成为WEB 应用中的一种段对端的解决方案。AngylarJS 的出众　　　　　　之处如下：数据绑定，基本模板标识符，表单验证，路由，深度连接，组件重用，依赖注入。测试包括　　　　　　单元测试，段对端测试，模拟和自动化测试框架。 Hello World 　　　　<Doctype html> 　　　　<html ng-app> 　　　　　　<head lang="en"> 　　　　　　　　<m

【分享】纯 js 表单控件 —— 让 “增改查” 更轻松！

我们在做增删改查的时候，必可避免的要做表单，那么表单是怎么弄出来的呢？拖拽控件、手写、js创建还是第三方控件（包括js版）？以前用服务器控件写了一套表单控件，用起来感觉也挺方便的，只是效率太低，太占用服务器的资源。想了好久也没想到如何提高效率，最后改成了纯js版的。　　js属于初学，代码还很简陋，大家见笑了。现在是越学习js，越是感到js的强大！需求、目的： 1、在前台网页，使用js自动创建表单 2、可以控制表单里的控件类型，比如文本框、下拉列表框、在线编辑器等。 3、可以获取用户输入的数据

08

vue10CRUD+表单验证

目录 1. 准备工作 2. 弹出窗口 3. 新增更新功能 4. 删除功能编辑 5. 表单验证 5. 接口文档 ---- 1. 准备工作后台服务接口，对书本的增删改查操作 2. 弹出窗口进入ElementUi官网，找到Dialog对话框，可以参考“嵌套表单的dialog”实现。该步骤先实现弹出窗口的前端逻辑，并不会调用后台接口服务进行实际的业务操作。 BookList.vue

02

Element Plus 表单验证详解

Element Plus 是基于 Vue 3 的一套组件库，它提供了许多组件帮助开发者快速构建现代 Web 应用。本文将详细介绍如何在 Element Plus 中进行表单验证，并通过具体示例解释每个部分的用法。

01

Angular17 使用 ngx-formly 动态表单

ngx-formly 是 Angular 应用实现响应式的动态表单框架，不仅支持自动生成表单、易于上手的自定义字段扩展、自定义验证扩展、支持 Formly Schema 和 JSON Schema，还有开箱即用的内置表单主题。

01

laravel 学习笔记

1 每个控制器都需要配置web.php中配置路由 2 配置好数据库后，在命令行中 php artisan migrate 数据表迁移

03

Validform jquery

在前端开发中，表单验证是非常重要的一环，能够有效地提升用户体验和数据完整性。Validform 是一个基于 jQuery 的表单验证插件，它简单易用，功能强大，广泛应用于各类网站和Web应用中。本篇文章将详细介绍 Validform jQuery 插件的用法和功能。

01

ElementUI el-switch 使用详解

在前端开发的世界里，UI 库的选择是决定项目成败的关键因素之一。ElementUI 作为一个基于 Vue.js 的组件库，以其高效、简洁、美观的组件设计深受开发者喜爱。在这篇文章中，我们将深入探讨 ElementUI 中的 el-switch 组件，详细介绍其原理、使用方法以及在实际项目中的应用。希望通过这篇文章，您能对 el-switch 组件有一个全面的了解，从而更好地在项目中运用它。

00

【工具】15个非常实用的 JavaScript 表单验证库

客户端验证在任何项目都是不可缺少的，很多时候我们需要在用户提交到服务器之前给予提示。表单验证库允许开发人员自定义样式、错误消息和样式以及简化验证规则的创建。

02

hook框架-frida简单使用模板以及frida相关接口

用途:确认当前进程的java虚拟机是否已经启动，虚拟机包括Dalbik或者ART等。虚拟机没有启动的情况下不要唤醒其他java的属性或者方法。

02

好大一棵树，新春的祝福（二）：功能节点的数据结构和页面展示

1、数据结构在原有的基础上，把noteID改成FunctionID，去掉code字段，增加三个字段。 NoteLevel ：表示第几级的节点，可以和css配合，“美化”显示效果。 ParentIDPath：父节点的路径，用于找到一个节点的子节点和子子节点（及所有子节点）。也可以找到一个节点的所有父节点。 OrderID ：所有节点的总排序，大家一起来排序，一个SQL语句就可以提取出来直接绑定控件，而不需要在使用递归了。由于用功能节点作为例子，所以再增加两个字段 WebUR

05

使用原生 JavaScript 手写一个高效的表单验证系统

我们将使用HTML、CSS和JavaScript来实现这个表单验证功能。首先，让我们看看HTML代码：

01

做Java开发，你需要了解这些前言

在开发中，我们写的代码肯定是越少越好，代码层次越清晰越好。那么下面就介绍一些可以减少代码量、可以让结构更清晰的好东西。本文涉及vo、dto的使用、全局异常处理、表单验证以及一些小工具的使用。

03

用jquery实现表单验证_jquery验证插件

功能强大的 jQuery 表单验证插件，适用于日常的 E-mail、电话号码、网址等验证及 Ajax 验证，除自身拥有丰富的验证规则外，还可以添加自定义的验证规则。

04

接口的安全性测试，应该从哪些方面入手？

Hi，大家好。我们在开展接口测试时也需要关注安全测试，例如敏感信息是否加密、必要参数是否进行校验。今天就给大家介绍接口安全性测试应该如何开展，文末附年终总结模板，需要年末汇报的童鞋们，走过路过不要错过。

01

JavaScript入门

2看文字样式 T 单击目标文字，菜单栏下面查看文字效果---释放选择：ctrl + enter或选择其他工具

02

浅析 Vue 的 `watch` 函数

在 Vue.js 中，响应式系统是其核心特性之一，通过它可以轻松地跟踪数据变化并自动更新视图。而 watch 函数则是 Vue 提供的一种用于监听和响应数据变化的高级方法。在这篇博客中，我们将深入探讨 watch 函数的使用方法、应用场景以及一些常见的陷阱。

01

angularjs学习第四天笔记（第一篇：简单的表单验证）

您好，我是一名后端开发工程师，由于工作需要，现在系统的从0开始学习前端js框架之angular，每天把学习的一些心得分享出来，如果有什么说的不对的地方，请多多指正，多多包涵我这个前端菜鸟，欢迎大家的点评与赐教。谢谢！

02

angularjs学习第四天笔记（第一篇：简单的表单验证）

您好，我是一名后端开发工程师，由于工作需要，现在系统的从0开始学习前端js框架之angular，每天把学习的一些心得分享出来，如果有什么说的不对的地方，请多多指正，多多包涵我这个前端菜鸟，欢迎大家的点评与赐教。谢谢！

01

input属性bypass csp

前两天看到一篇文章，可以通过input标签的某些属性，来控制form获取crsftoken并且完美bypass csp。

02

SpringBoot 进阶

如果对象的年龄满足 18 岁，将可以添加数据，如果 age < 18, 将无法添加数据。

02

windsformvalid-表单验证JQuery插件

每次表单每个页面提交都要自己写脚本验证信息，老是复制粘贴的很烦，改起来也很麻烦，网上也有大把的表单验证插件，但是感觉用起来不灵活，这就出现了windsformvalid.

02

web前端之锋利的jQuery八：jQuery插件的使用（表单验证、表单提交）

插件也称扩展，是一种遵循一定规范的应用程序接口编写出来的程序。 1.jQuery表单验证插件－Validation：最常使用JavaScript的场合就是表单的验证，而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件－Validation，其拥有以下优点：内置验证规则：拥有必填、数字、email、URL和信用卡号等19类内置验证规则。自定义验证规则：可以很方便地自定义验证规则简单强大的验证信息提示：默认了验证信息提示，并提供自定义覆盖默认提示信息的功能实时

05

JavaScript之ClassName属性学习

在前面的style属性学习中,知道了通过style属性可以控制元素的样式,从而实现了行为层通过DOM的style属性去干预变现层显示的目地,但是这种就是不好的,而且为了实现通过DOM脚本设置的样式，你就不得不花时间去研究JavaScript函数,去寻找对应修改和设置样式的有关语句。而且每添加或修改js脚本的代码量远大于我们修改css样式的代码量。所以与其使用DOM直接改变莫个元素的样式,不如通过JavaScript代码去更新这个元素的class属性。下面通过代码来比较这两种方式的差别: fun

09

ElementUi中的Dialog对话框——弹出窗口与新增更新功能为例

进入ElementUi官网，找到Dialog对话框，可以参考“嵌套表单的dialog”实现。该步骤先实现弹出窗口的前端逻辑，并不会调用后台接口服务进行实际的业务操作。 BookList.vue

03

java学习与应用（4.2）--JavaScript、bootstrap

JavaScript，弱类型脚本语言，增强交互和用户体验提高效率等。JavaScript=ECMAScript+JavaScript特有的内容（BOM对象+DOM对象） ECMAScript：与html结合：内部JS（script标签定义，在html文档内部，按位置先后执行），外部JS（script标签引入src元素），注释：当行//，多行/**/，数据类型：原始数据类型（基本，number[整数，小数，NaN not a number]，string，boolean，null，undefined），引用数据类型（对象）变量，var定义，开辟空间不定义类型。赋值可改变类型。document.write输出，添加标签
字符串换行。typeof(变量)关键字，打印数据类型（null是一个object的bug）。运算符，一元运算符：++，--，+-（正号,负号[可以将其他类型转number，无法转换为NaN]），算数运算符：+-*/%，赋值运算符=，+=，-=，比较运算符：>，>=，<，<=，==，!=，类型不同则转换类型比较，===（不转换类型比较）。

01

纯CSS实现表单验证

在我们的日常业务中，表单验证是个很常见设计需求，像一些登录注册框，问卷调查也都需要用到表单验证。

04

JavaScript表单基础

我们应该知道JavaScript设计的的初衷很大程度上是为了处理表单验证，因为在那个远古时代表单验证是通过后台来验证的，网速都比较慢，我们向后台发送数据都需要很长时间才能接收返回数据，动则几分钟少则几十秒，用户体验极其不佳。JavaScript在设计在网页校验，直接就能告诉用户结果，它还增加了很多表单控件的默认行为，这直接让这门语言火了起来。

02

Vue3组件（九）Vue + element-Plus + json = 动态渲染的表单控件单列多列

把表单需要的属性，统统放入json里面，然后用require（方便）或者aioxs（可以热更新）加载进来，这样就可以实现动态渲染了。比如要实现公司信息的添加、修改，那么只需要加载公司信息需要的json即可。想要实现员工信息的添加、修改，那么只需要加载员工信息需要的json。

02

React 支持 form action 是在作妖？不，它是一种重磅回归

在 html 的基础知识中，表单是很重要的一个环节。但是由于各种原因，原生的表单开发方式相关知识被部分前端开发所遗忘，他们对 form action，formdata 有一种陌生感。

01

jQuery validate 表单验证插件

最近写了两个组表单提交的页面，好久没用jQuery，在写的时候总遇到一些莫名其妙的为难题，这里记录一下。

00

Python Tornado之跨域请求与Options请求方式

公司的项目是前后端分离，前端Vue+后端JavaSpringBoot为主，部分功能是PythonTornado，那么需要支持一个是跨域以及Options请求。

03

ASP.NET MVC编程——验证、授权与安全

1 验证一般采用表单验证完成登陆验证，建议结合SSL使用。为限制控制器只能执行HTTPS，使用RequireHttpsAttribute 2 授权对账户的权限的控制可以通过在控制器或控制器操作上加AuthorizeAttribute 属性。扩展授权过滤器扩展授权过滤器可以定义继承自AuthorizeAttribute的类，也可以定义同时继承自FilterAttribute, IAuthorizationFilter接口的类。 [AttributeUsage(AttributeTargets

06

使用Map批量赋值进行表单验证的实践

在Web应用程序中，表单验证是一个必不可少的环节，它可以确保用户提交的数据合法且完整。然而，传统的表单验证方法往往需要手动设置每一个验证规则，这无疑增加了开发者的负担。通过使用Map批量赋值功能，我们可以更高效地将表单数据批量赋值给验证对象，然后根据验证对象的属性进行验证。

01

js基础-表单验证和提交

基础知识：原始提交如下： 1 <form action="/login" method="post" id="form1"> 2 用户 3 <input type="text" name="username" id="username"/>
4 密码 5 <input type="password" name="password" id="passsword"/>
6 　　 7

06

浅谈 React 中的 XSS 攻击

前端一般会面临 XSS 这样的安全风险，但随着 React 等现代前端框架的流行，使我们在平时开发时不用太关注安全问题。以 React 为例，React 从设计层面上就具备了很好的防御 XSS 的能力。本文将以源码角度，看看 React 做了哪些事情来实现这种安全性的。

03

脚本化HTTP 取得响应指定请求

下面将会说明在没有导致web浏览器重新加载任何窗口或者窗体的情况下，脚本实现web浏览器和服务器之间的通信。

04

关于后端代码的总结_辐射4最强防具代码

JavaScript 是脚本语言，是一种解释性脚本语言(代码不进行预编译) JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 HTML 页面的编程代码 JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行 JavaScript 很容易入门

02

HTML-CSS基础学习

HTML代表了结构，结构是网页的骨架，从语义的角度，描述页面结构。 CSS代表了样式，样式是网页的外观，从审美的角度，美化页面。 JavaScript代表行为，行为是网页的交互逻辑，从交互的角度，提升用户体验。

03

若依框架中的login函数

总体来说，这段代码处理了用户登录的逻辑，包括表单验证、加载状态显示、Cookies 操作和 Vuex action 的调用。在验证通过后，尝试登录，根据登录结果进行相应操作。如果登录失败，会调用 this.getCode() 来获取验证码。

04

Node.js的介绍

作者：sagittarius-rev 链接：https://www.zhihu.com/question/31305968/answer/116439739 来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

00

web前端开发初学者十问集锦（5）

（1）立即执行函数的定义立即执行函数(Immediately Invoked Function)是在页面加载时立即被执行的函数。

02

【问题解决】如何在 Vue <component> 切换子组件时优雅地进行 Form 表单校验

在项目中使用 Vue <component> 遇到了一些挑战，特别是在需要对子组件中的表单进行校验时。问题在于，通过点击 <el-aside> 标签切换子组件时，并不能自动触发表单校验，这就需要在父组件中集成对子组件表单的校验逻辑。因此写下本篇博文记录这个问题并分享相关思考以及解决方法。

01

推荐一个基于 Node.js 的表单验证库 [每日前端夜话0x23]

API 在执行过程中的一个基本任务是数据验证。在本文中，我想向你展示如何为你的数据添加防弹验证，同时返回风格良好的格式。

04

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭