开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

无法在表单验证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“”

相关搜索:

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

有帮助

没帮助

相关·内容

yii2开发后记

在安全模式下，要进行安全验证，即每一个属性都要在rules里验证，如果没有特定规则，也要添加'safe'验证。否则验证失败，存入数据库也会失败。...标签设置在处理表单时，多用$model->attributes属性来表示全部的属性。...13.使用ActiveForm创建表单 yii2中使用小部件创建view视图的步骤：设置一个Model设置其属性 public $username; public $password; 设置其rule...然后在脚本中用Yii::$app->params['key']来引用。...在ActiveForm中如果数据表中有了此字段，就不要再用public声明一个属性了，会导致attribute无法赋值。。。。（血泪）。

3.2K5 0

React入门学习笔记

React学习笔记安装 1、通过js文件引入React的js文件 2、npm部署React环境详情请参考官方文档组件 Props数据传递数据可以通过Props在两个组件间传递（父组件流向子组件...JSX语法中，可以在大括号内放置任何有效的JS表达式； import React, { Component } from 'react'; import ReactDOM from 'react-dom...; ReactDOM.render(element, document.getElementById('root')); React元素是不可变对象，创建后无法改变Ta的子元素/属性；想要改变元素只有重新渲染创建一个权限的元素并传入...受控组件在HTML表单元素中，表单元素会自己维护自己的状态而在React中可变状态通常是有state属性控制的，并且只可以使用setState()更新属性；为了适应React的state成为“唯一数据源...”，渲染表单的组件还控制着输入过程中表单发生的操作，被React以这种方式控制取制的表单输入元素称之为“受控组件”。

2.5K2 0

《前端那些事》从0到1开发动态表单

无疑是包含了form数据的收集、验证及提交等等功能，让我们看看下面这个基于iview组件库的form表单 ❞ 这个简单的表单，如果我们用手写模版的方式撸出来，模版部分就是如下所示数据初始化定义和验证提交逻辑如下...（比如Input、Select）可以通过获取JSON的配置所需的去渲染，上一小节提到的模版渲染显然就不适用这次场景了，虽然vue官方推荐在绝大多数情况下使用模板来创建你的temlate，但是一些场景还是需要用到渲染函数...render 官方文档点我 ❞ 2.2 关于渲染函数 ❝ 我们先看看这个例子，Vue.js 的 mount 函数，将h()生成的VNode节点函数，渲染成真实 DOM 节点，并挂载到根节点上 ❞...函数接受三个参数，分别是：参数一：标签名、组件的选项对象、函数等等（必选）；参数二：设置这个对象的样式、属性、传的组件的参数、绑定事件等（可选）；参数三：该节点下的其他节点，即子级虚拟节点，可以是字符串形式或数组形式...❝ 实现好组件的动态生成逻辑，这个时候需要一个入口(formBuild.js)，就是根据配置去映射相应的组件并生成合并，组合成为最终要的表单 ❞ // form-build.js import componentObj

1.1K3 2

《前端那些事》从0到1开发动态表单

无疑是包含了form数据的收集、验证及提交等等功能，让我们看看下面这个基于iview组件库的form表单 ? 这个简单的表单，如果我们用手写模版的方式撸出来，模版部分就是如下所示? ?...，上一小节提到的模版渲染显然就不适用这次场景了，虽然vue官方推荐在绝大多数情况下使用模板来创建你的temlate，但是一些场景还是需要用到渲染函数render 官方文档点我 2.2 关于渲染函数...我们先看看这个例子，Vue.js 的 mount 函数，将h()生成的VNode节点函数，渲染成真实 DOM 节点，并挂载到根节点上 ?...，分别是：参数一：标签名、组件的选项对象、函数等等（必选）；参数二：设置这个对象的样式、属性、传的组件的参数、绑定事件等（可选）；参数三：该节点下的其他节点，即子级虚拟节点，可以是字符串形式或数组形式...实现好组件的动态生成逻辑，这个时候需要一个入口(formBuild.js)，就是根据配置去映射相应的组件并生成合并，组合成为最终要的表单 // form-build.js import componentObj

2.1K2 0

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

引入React并编写前端组件以下改的均是在登录注册页的主要js文件/assets/components/passport/js/dev/main.es中进行。...，并且类似margin-top这种属性，必须写成与js语法相同的驼峰式marginTop。...；表单中的验证码图片需要请求接口获取。...isNotEmpty规则的应用场景简单来说，isNotEmpty规则存在的唯一目的，是保证进入页面之后初始状态没有错误提示信息。因为formsy的在表单创建成功之后立即进行验证。...经本人验证，只有在组件中state以某个属性直接使用（比如className={{this.state.emptyError}}这种）的情况下，setState才会触发重绘。

2.3K9 0

「React 基础」关于组件属性（props）与状态（state）的入门介绍

接下来我们将基于上一节的例子，分别创建以下组件：头部组件（ Header）, 内容组件（Content）, 和底部组件（Footer），将其分组放置在 layout 文件夹中，通过 props 传递属性...（属性或子组件），并验证属性值的合法性。...prop-types 4、PropTypes 最初是作为 React 核心模块之一一起发布的，将其应用到 React 组件中，我们用来判断组件的属性传递是否符合设置的预期，如果传递的属性与其不匹配，将会有警告提示...每个组件都可以设置自己的 local state，你可以在组件内部初始化值，值如果发生改变时，将触发组件重新渲染。Local state 可以用于组件内部的 DOM 交互，表单的处理。...那我们应该在哪合理安全只调用一次呢，这里我们用到了组件的生命周期方法，componentDidMount()方法（在组件已经完全加载到网页上才会调用被执行，所以可以保证数据的加载。

1.5K1 0

JavaScript入门

“选中的切片或所有用户切片” .psd后缀为ps打开的文件（分层图） 4.了解JavaScript 1995年，那个年代，没有任何一个脚本语言是运行在浏览器端，当时为了把表单验证（当时是在服务器端完成的...）在浏览器端完成所以开始研发js JavaScript 开始叫livesript，为了推广改名雷锋和雷峰塔的关系 js 抱 java 大腿出来的，和java没有关系 5.js的书写方法...标签的属性 k='v' 标签的css属性 k:v; 如果控制class属性js写法为className，其余html属性写法和js控制的时候写法一样 oBox .className = 'xx...js写为className,其余html属性写法和js控制的时候写法一样 document.getElementById('img').src = 'img3.jpg'...，再对其进行赋值 js命名变量的时候会在原有标识符的基础上加入数据类型的体现标签存储到js，数据类型用o（object）命名的时候数字、字母下划线，或者$ 命名用小驼峰不能和内置的关键字冲突、符合标识符的命名规则

3.3K2 0

「React 基础」关于组件属性（props）与状态（state）的入门介绍

接下来我们将基于上一节的例子，分别创建以下组件：头部组件（ Header）, 内容组件（Content）, 和底部组件（Footer），将其分组放置在 layout 文件夹中，通过 props 传递属性...（属性或子组件），并验证属性值的合法性。...prop-types 4、PropTypes 最初是作为 React 核心模块之一一起发布的，将其应用到 React 组件中，我们用来判断组件的属性传递是否符合设置的预期，如果传递的属性与其不匹配，将会有警告提示...每个组件都可以设置自己的 local state，你可以在组件内部初始化值，值如果发生改变时，将触发组件重新渲染。Local state 可以用于组件内部的 DOM 交互，表单的处理。...那我们应该在哪合理安全只调用一次呢，这里我们用到了组件的生命周期方法，componentDidMount()方法（在组件已经完全加载到网页上才会调用被执行，所以可以保证数据的加载。

1.4K3 0

浅谈 React 中的 XSS 攻击

XSS 攻击通常指的是利用网页的漏洞，攻击者通过巧妙的方法注入 XSS 代码到网页，因为浏览器无法分辨哪些脚本是可信的，导致 XSS 脚本被执行。..., className: 'greeting' } ... } 我们可以看到，最终渲染的内容是在 Children 属性中，那了解了 JSX 的原理后，我们来试试能否通过构造特殊的...用户提供的 URL 需要在前端或者服务端在入库之前进行验证并过滤。...在输出时对数据进行转义，根据输出语境 (html/javascript/css/url)，进行对应的转义对关键 Cookie 设置 http-only 属性，JS脚本就不能访问到 http-only...，忽略所有的其他脚本 (包括内联脚本和 HTML 的事件处理属性) 总结出现 XSS 漏洞本质上是输入输出验证不充分，React 在设计上已经很安全了，但是一些反模式的写法还是会引起安全漏洞。

2.7K3 0

在外部网站中嵌入Vue 组件

主要应用程式我们将设置一个Vue（或React）项目，这将是BLAH的电子商务网站，并创建一个多步骤表单，允许用户输入其个人和地址详细信息以进行Geeky Glasses的预预订。...要创建vue项目，请运行： vue create vue-widge 选择默认或手动设置所需的功能，然后设置应用程序。现在，我们可以创建具有基本验证和成功屏幕的表单。...该脚本将附加在文件的head标记中html。该脚本实际上作为静态资产驻留在我们的主应用程序中，可以使用该应用程序的绝对URL对其进行访问。让我们在外部网页中添加脚本。...JS文件将为小部件指定实际的HTML代码，而CSS文件将为其设置样式。...InitializeEvent在的innerHTML对象中添加html属性，containerID并InitializeEvents添加提交和按钮点击事件。

1.3K2 0

Angular17 使用 ngx-formly 动态表单

ngx-formly 是 Angular 应用实现响应式的动态表单框架，不仅支持自动生成表单、易于上手的自定义字段扩展、自定义验证扩展、支持 Formly Schema 和 JSON Schema，还有开箱即用的内置表单主题...Validation 表单验证主要包括：Formly 内置验证、自定义验证消息及自定义验证函数三大块，自定义验证消息和验证函数分别还可以正在全局注册和指定字段注册，在不同的场景可以考虑不同的自定义方式...；使用 Formly 内置验证：在新用户注册表单的基础上增加输入年龄字段的配置，再为每个字段配置的 props 增加 required 属性，表示这是一个必填的字段，就像新用户注册表单中用户名字段一样...：到目前不通过验证的字段仅仅是通过边框颜色的改变的区分，现在就为字段添加自定义的验证消息，自定义验证消息同时支持字符串和函数两种方式设置；全局注册自定义验证消息，需要在 FormlyModule 注册时通过...label}最大是: ${error.max}岁`; }, } ], }), 指定字段注册自定义验证消息，使用正则验证字段需要在字段定义时通过 validation 属性设置：

7141 0

CodeSmith系列（二）——使用CodeSmith生成ASP.NET后台代码

因为表单的后台代码都差不多，所以采用了CodeSmith生成。由于表单的控制是基于XML的，所以可以根据XML自定义生成。由于没时间，就不多写了，具体模板代码见最后。在这里，先选择变量。...IsPostBack) { //设置审批列表的加载路径和参数 pnlExamineList.AutoLoad.Url...=null) { //设置控件的值 this.SetControlValues...，用于配置Ext控件） this.LoadConfigs("ClassName%>", Context); //TODO:设置参数...=null) { //设置控件的值 this.SetControlValues

3.1K1 0

使用 TypeScript 编写 React.js 应用 | 笔记

创建表单以编辑数据创建表单组件添加以下 CSS 样式以设置表单的宽度。...，以便我们可以在组件的 state 中保存表单错误。...单击表单上的保存按钮验证卡片是否显示更新的数据刷新浏览器验证项目是否仍处于更新状态注意: 更新后卡片会被排到最后, 目前没有在代码中排序错误推断, 发现并不对, db.json 保存更新并不会重新排序...可以将任何标记改为，并添加 to 属性以设置 href 。...将应用部署到 Web 服务器运行以下命令以启动 Web 服务器并提供在上一步中创建的 build 目录的内容 serve build 假设你想要提供单页应用程序或仅提供静态文件（无论是在你的设备上还是在本地网络上

8799 0

JS魔法堂：那些困扰你的DOM集合类型

有length属性，可以用下标索引来访问其中的元素，但没有Array的slice等方法；　　　　2. 只读。无法增删其中的元素；　　　　3. 实时同步DOM树的变化。...不过其value属性就值显示其中被选中的单选项表单元素的value值，若没有单选项表单元素，或没有选中单选项表单元素，那么value值为空字符串。...(); //通过名称和命名空间返回指定的属性节点 setNamedItem(); //通过名称设置指定的属性节点 setNamedItemNS(); //通过名称和命名空间设置指定的属性节点 removeNamedItem...html标签上的属性，或通过setAttribute设置的属性，具体请看《JS魔法堂：不要再被Attribute和Property困扰我们了》）十、DOMTokenList——HTML5新特性classList...length; //表示类的个数 // 无法通过[{Number} 索引]的方式来设置类，只能通过该方式来获取类　　那么现在我们就着手polyfill吧，注意难点在实时同步这一块，解决办法就是用

2K9 0

JavaScript 笔记

(因为面向对象需要具有封装、继承、多态的特征) 在浏览器上执行的脚本 1. JavaScript 2....(js中的每条语句之间的分割符可以是回车换行也可以是";"分号(推荐)) 4. 脚本注释： // 单行注释 /* 多行注释 */ 5. 括号表示代码块:{} 6....*with 语句用于设置代码在特定对象中的作用域。 //扩充知识： 1....在函数内部没有使用var定义的=变量则为全局变量， *在函数内使用var关键字定义的变量是局部变量，即出了函数外边无法获取。 ...父节点拥有子节点，位于相同层级上的子节点称为同级节点（兄弟或姐妹）。 1. 在节点树中，顶端的节点成为根节点 2.

1.8K6 0

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

parseInt将字符串转为数字（和正号的区别在于其转换前面的数字串转为数字）。isNaN判断值是否为NaN（NaN和其他任何值直接比较都为false）。eval方法将JS字符串转换为JS脚本执行。...事件：某些组件执行后触发执行的代码，标签上添加事件onclick属性点击执行js（也可以在js中获取标签对象，然后添加onclick事件）。...值进行自动转到，可能影响js执行效果，可以使用href中添加JavaScript:void(0)消除） HTML DOM HTML DOM：对标签体内容的获取，设置，追加使用innerHTML属性，更方便修改和控制...，onsubmit，onreset的表单事件 BootStrap bootstrap前端框架（CSS和JS插件）。...表单form-xxx（见手册实例代码，class的设置需要阅读）。组件：导航条navbar-xxx，汉堡按钮和平铺导航的设置，阅读代码，修改和移植。翻转导航条（反色等）。

2.2K1 0

DOM 和 BOM

(文档节点)：undefined 或 null ②. element(元素节点)：undefined 或 null ③. attribute(属性节点)：属性值 ④. text(文本节点)：文本本身 2...问题 3: 仅能获得内联样式无法获得样式表中的样式解决: 计算后的样式－最终应用到元素上的完整样式，分两步完成 A....任何方式提交表单之前自动触发 form.onsubmit 常用于在提交之前，验证所有表单元素的内容 (7). 让 elem 获得焦点 elem.focus() (8)....name 属性来标示一个窗口，浏览器规定，相同 name属性的窗口只能打开一个，其实 html 中的 target 属性就是在设置新窗口的 name 属性值，如果 target 中使用自定义的窗口名，则只能打开一个...在 HTML 中绑定: js 语句"> 问题: 不符合内容与行为分离的原则，不便于维护 (2). 在 js 中动态绑定，2 种 ①.

2.3K1 0

JavaScript—Element元素对象

Element元素上一篇介绍了Element对象，Element对象表示HTML里的元素。...然后拿其中几个示例一下： getElementById和className，getElementById可以通过元素的id值来获取元素对象，className可以返回元素对象的类样式选择器的名称或给元素对象设置一个类样式选择器...顺便介绍一下onload事件，这个事件能够先加载完标签中的内容，再去执行脚本代码，例如我在种写上这个事件，那么标签就可以写在标签上面了，不用担心加载顺序的问题，因为写上这个事件后...设置的title属性： ? 点击后title属性就会被删除掉，就不会显示这个内容了： ? removeChild可以删除添加的子节点： ? 运行结果： ?...使用JavaScript进行表单提交的验证：在这里需要用到一个事件：onsubmit，这个事件会在表单中的确认按钮被点击时触发，然后会根据函数的返回值来决定提不提交表单。

9451 0

邮件狂欢：Next.js和Resend SDK的电子邮件魔法

在本教程中，您将学习如何使用 React-Email、Next.js 和 Resend 从经过验证的域发送电子邮件。先决条件以下是您在本教程中需要遵循的内容：Node.js 安装在您的计算机上。...验证发送电子邮件的域必须验证将用于发送电子邮件的域。在仪表板的左侧，选择域并单击添加域按钮：出现一个新页面。通过在输入字段中输入域来添加域。然后单击“添加”按钮。...在 Next.js 项目中设置重新发送要在 Next.js 项目中设置重新发送，请单击此处根据现有模板存储库生成起始文件。...该组件接收name、email、和message作为 type 的属性MessageUsEmailProps。该Head组件用于在电子邮件部分中包含元信息。...使用重新发送 SDK 发送电子邮件到目前为止，您已经验证了域，在 Next.js 项目中设置了重新发送，并实现了动态电子邮件模板。是时候使用重新发送来发送电子邮件了。

2K0 0

React 组件优化

用法下面写个例子，一个表单，我们需要表单做验证，验证不通过就提示用户为什么不对。...），在使用时，也应设置如 type、name 等属性。... 组件比较复杂，在构建 Formik 表单程序时，Formik 和下面它的几个属性是需要设置的： initialValues 接收一个对象，表示初始化的表单控件的值，对象的键应是表单的...span 中展示的是验证不通过时的提示 */} className="warning">在 Formik 官网，作者也举例了使用 redux-form 的缺陷：表单状态本质上是短暂的和局部的，并不需要 redux 对其进行跟踪；使用 redux 管理状态时，状态更新要派发 action

7.2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭