如何在不使用表单的情况下将输入字段设置为无效，以便根据条件使底部轮廓显示为红色
在不使用表单的情况下，将输入字段设置为无效并使底部轮廓显示为红色，可以通过以下步骤实现：
- 使用HTML和CSS创建一个输入字段的容器，例如一个
<div>元素。 - 在该容器中添加一个
<input>元素，用于接收用户的输入。 - 使用CSS样式设置该容器的底部轮廓为红色，可以通过设置
border-bottom属性来实现。 - 使用JavaScript监听输入字段的值变化，可以通过
addEventListener方法绑定input事件。 - 在事件处理程序中，根据条件判断输入字段的有效性。如果输入字段无效，可以通过修改容器的CSS样式将底部轮廓显示为红色。
以下是一个示例代码：
HTML:
<div id="inputContainer">
<input type="text" id="inputField">
</div>CSS:
#inputContainer {
border-bottom: 2px solid black; /* 默认底部轮廓颜色为黑色 */
}
.invalid {
border-bottom-color: red; /* 无效时底部轮廓颜色为红色 */
}JavaScript:
var inputField = document.getElementById("inputField");
var inputContainer = document.getElementById("inputContainer");
inputField.addEventListener("input", function() {
if (/* 根据条件判断输入字段的有效性 */) {
inputContainer.classList.add("invalid");
} else {
inputContainer.classList.remove("invalid");
}
});在上述代码中，通过给容器添加或移除invalid类来改变底部轮廓的颜色。根据具体的条件判断逻辑，可以自定义判断输入字段是否有效的规则。
请注意，以上代码仅为示例，实际应用中可能需要根据具体需求进行适当的修改和扩展。
腾讯云相关产品和产品介绍链接地址：
相关·内容
1回答
角反应窗体.无效输入上的字段颜色造型
html、angular、angular-reactive-forms、angular-forms
我使用的是ReactiveForms，当输入无效时，我似乎找不到改变表单字段轮廓颜色的方法。
我需要更改这个颜色，因为考虑到背景梯度，当前的红色并不是最优的，如您所见：
这是我的模板：
<mat-form-field appearance="outline" hideRequiredMarker>
<mat-label>{{ matLabel }}</mat-label>
<input
#input
matInput
type="{{ inputType
浏览 1提问于2021-06-06得票数 1
回答已采纳
4回答
提交失败后更改输入字段的颜色
html、css、input、colors、submit
我想知道在单击submit按钮后是否有方法更改输入字段的颜色，比如如果输入无效，则将其颜色更改为红色。由于我当前的css代码，我的当前解决方案在开始时将每个输入标记为红色。
input:invalid {
background: #FF3300;
}
我希望输入字段保持白色，直到您点击submit按钮，然后正确的输入应该变成绿色，而不正确的输入应该变成红色。
提前谢谢。
很小的例子。
HTML：
<html><!DOCTYPE html>
<head>
<title>Example</title>
浏览 11提问于2015-05-28得票数 2
回答已采纳
2回答
单击元素之外的任何位置时移除类
javascript、html、css
我是BSIT一年级的学生.尽管在我们的程序中没有教授web开发(至少还没有)，但我正在尝试自学HTML、CSS、JavaScript，并且列表还在继续。
所以问题是，我试着用CSS转换的方式使边界底部动画化。我还不太了解事件侦听器和它的事件类型，所以我希望如果我在这里询问，我可以学习。这些守则是：
var inputFieldtrigger = document.getElementById("searchFld");
var inputFieldtarget = document.getElementById("border-bot
浏览 7提问于2020-10-13得票数 2
回答已采纳
3回答
输入:在页面加载时应用无效的css规则
html、css、forms、html5-validation
看看这两个在火狐或Chrome中的摆弄。在 1中，我只有一个简单的表单，它有一个required属性和一个submit按钮。当方框为空时，按下"submit“将其样式设置为invalid (在火狐中，它是红色的轮廓)。但是它要等到您按submit来显示它是无效的。
现在试试 one。它是相同的，只是有一些css：
input:invalid{
border-color:orange
}
除了这一次，在按下提交之前，甚至还会应用橙色边框颜色。因此，如果并且只有当您手动设置表单的invalid样式时，浏览器才会应用它，这不是直观的行为。当然，在输入任何内容之前，必需的字段将无效。
浏览 0提问于2014-11-19得票数 8
回答已采纳
2回答
使用Onchange添加css
javascript、jquery、html、css
如何在JavaScript中更改CSS`代码？
HTML :
<input type="text" name="text_field" value="text" id ="hd" />
<div id="color">
<input type="text" name="color" class ="border-bottom" value=""/>
</div>
Javascript :
$(
浏览 2提问于2016-03-02得票数 2
回答已采纳
4回答
如何在输入后立即更改输入字段的背景色？
javascript、html、css
我写了下面的代码，我试图改变输入字段的背景颜色，只要我输入什么东西。我有4个输入字段。如果在第一次单击submit，并且任何字段都是空的，则该字段的颜色将更改为红色，但我需要在填充此空字段时将颜色更改为绿色。
const submitButton = document.getElementById("submit")
const inputField = document.querySelectorAll(".input")
let requiredField = document.querySelectorAll(".requiredField"
浏览 8提问于2022-05-11得票数 1
回答已采纳
1回答
AngularJS:仅使用CSS将指示符添加到无效字段
angularjs
我正试图做一些在我脑海中很简单的事情，但我所有的努力都失败了。
使用ng-model和$setValidity()，我可以使任何字段有效或无效，角将添加‘ng-无效’类到任何无效字段，这是很好的。我使用的是引导，它为‘输入:无效’内置样式，当这些元素聚焦时，它在所有无效元素周围添加红色边框。
我的问题是，我想在表单中的每个无效输入之后添加一个***，这样用户就可以快速地看到哪些字段需要修复。我认为只使用CSS就可以做到这一点，方法如下：
input.ng-invalid{
border: 2px solid red;
}
input.ng-invalid:after{
con
浏览 3提问于2013-10-25得票数 2
回答已采纳
1回答
来自AngularJS的字段数组
css、angularjs
我可以得到一个数组，其中包含对表单中的字段的引用(比如输入、文本区域等等)。在我的代码中，对它们运行一个函数，比如addClass()
为了解释我想做什么-在用户提交表单(并调用控制器中的submit()函数)之后，我想在无效输入上添加红色边框颜色。
ng-class="{'has-error':form.input.$invalid}"
但这不起作用
浏览 0提问于2017-08-17得票数 1
回答已采纳
3回答
求形角场
javascript、jquery、html、css、angularjs
我有一个表格，里面有一些字段。
我正在用css类验证字段：(如果字段无效并且用户触摸了它，那么输入的边框颜色=红色。)
select.ng-invalid.ng-touched,
input.ng-invalid.ng-touched,textarea.ng-invalid.ng-touched {
border-color: red;
}
如果用户提交表单时没有填写一个或多个字段，则会出现危险警报。
HTML:
<div ng-show="formInvalid>
error!
</div>
JS:
if ($scope.pni
浏览 2提问于2017-08-16得票数 5
1回答
CSS输入:无效应用
css、html、validation
我有把小提琴：
代码只是一个带有模式的数字类型的输入字段。
pattern="[0-9]+(\.[0-9]+)?"
如果输入无效，CSS将添加红色边框：
input:invalid { border:1px solid red; }
但是，如果我键入1.3，然后退出字段，就会得到一个红色边框，尽管根据模式，这是正确的。这里怎么了？
PS :这是在狩猎。。
编辑:好的，我添加了step="any“，这似乎解决了它。你们能确认一下吗？
浏览 1提问于2014-04-16得票数 7
回答已采纳
2回答
带有冒号的CSS类
javascript、css
我正在使用 CSS库。您可以看到我对有问题的代码片段。
在样式表中，当输入无效时，可以在输入周围放置红色边框：
.topcoat-text-input--large:invalid {
border: 1px solid #EC514E;
}
我的HTML内容是：
<input type="text" class="topcoat-text-input--large" id="email" placeholder="email" value="<%= model.email %>">
如
浏览 7提问于2014-03-24得票数 3
回答已采纳
3回答
JavaScript或jQuery中的HTML表单验证逻辑
javascript、html、jquery、validation
我有一个表单，我应该为它编写验证逻辑。
假设有这样一个输入字段。
<div class="group1"><label>Product code</label> <input id="code" name=""code" type="text" class="control1"></div>
如果我想让它成为必填字段，我该如何写逻辑呢？
我没有访问CSS文件的权限。但是有一个像这样的输入，我可以使用它，它有一个红色的轮廓。
<div clas
浏览 24提问于2021-06-04得票数 0
1回答
原始角度的样式输入元素
css、angular
嗨，我有这个css类，它在需要输入字段而输入字段无效时给出红色边框。当输入字段生效时，这将更改为绿色。
CSS
.ng-valid[required], .ng-valid.required {
border-left: 5px solid #42A948; /* green */
}
.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
<input
type="text"
class="form-contro
浏览 1提问于2020-09-27得票数 0
1回答
在AngularJS中将表单标记为未提交
angularjs
在AngularJS中，是否有一种方法将已经提交的表单标记为未提交(因此失去了ng-submitted类？)
背景：
在我的css中，我使用角验证类来完成以下工作：
最初，所有输入都有一个正常的边框颜色。
如果用户修改输入以具有无效值，则将边框颜色设置为红色。
如果用户单击submit按钮，则将所有无效输入的边框颜色设置为红色。
我是这样做的：
input.ng-dirty.ng-invalid, .ng-submitted .ng-invalid {
border-color: #F00;
}
效果很好。现在，我有了一个提交异步请求的表单，如果服务器以成功状态进行
浏览 2提问于2014-12-24得票数 8
回答已采纳
2回答
如何通过CSS设置无效的p-inputNumber PrimeNg表单组件的红色边框？
css、angular、sass、primeng、javascript-framework
我正在使用PrimeNG进行一个角度项目，并且我要尝试正确地设置一些无效表单字段的样式。
在我的表单中，我有这样的字段：
<input id="commessa" class="p-invalid" aria-describedby="commessa-help" formControlName="commessa" type="text" pInputText required/>
与此CSS相关联：
:host ::ng-deep {
.ng-invalid:not(form) {
浏览 11提问于2020-08-26得票数 3
回答已采纳
我是一个CSS新手，我很难弄清楚如何解决这个问题。如果输入无效，则只需在左侧用红色边框标记输入。
我的CSS看起来如下：
input.ng-invalid {
border-left-width: 10px;
border-left-color: red;
}
它工作得很好，只是它确实将10 is添加到输入的宽度中，并且无效的输入比有效的输入要大。
是否有办法使有效输入和无效输入的宽度完全相同？我相信，我没有用适当的财产来实现我想要的。
浏览 8提问于2017-01-26得票数 1
回答已采纳
1回答
带有angularjs的引导工具提示不工作
angularjs、tooltip、angular-ui-bootstrap
我是新来的天使。尝试使用引导工具提示实现表单验证。如果输入字段无效并获得焦点，带有工具提示的文本将出现。验证工作正常，即如果输入字段有无效的值，但是工具提示文本没有显示，则输入字段会变红。以下是html：
<form role="form" name="form" ng-controller="registerController">
<div class="col-sm-12">
<div class="form-group" ng-class
浏览 5提问于2016-03-12得票数 0
回答已采纳
1回答
AngularJS验证添加“有效”类值，即使$valid返回false
javascript、angularjs、validation
背景
我正在维护一个现有的AngularJS应用程序。
我有一个基于regex模式的具有验证的文本字段。
<input type="text" class="validate" name="recipientContact" id="recipientContact" ng-model="orderdata.recipient_contact" ng-pattern="/[(]([0-9]{3})[)]\s([0-9]{3})[-]([0-9]{4})/g" required>
reg
浏览 2提问于2017-07-26得票数 0
3回答
jquery用户名验证不起作用
javascript、jquery
你好，我正在为我的网站编写用户验证脚本，但是我有些地方不对，因为它不能正常工作。
*我的代码jscript：
$(document).ready(function() {
$('input[name*="username"]').keyup(validateuser);
});
function validateuser() {
var username = $('input[name="username"]').val();
if(username == ""){
$(
浏览 2提问于2016-05-20得票数 0
回答已采纳
3回答
如果我没有在Vuejs中输入数据，如何用红色突出显示输入字段的边框？
html、css、vue.js
.input-section {
border-radius: 4px;
width: 359px;
height: 42px;
line-height: 42px;
padding: 0 45px;
border-radius: 4px;
border: solid 1px #b1b8c9;
background-color: #ffffff;
}
<input type="text" name="fullname" id="fullname" v-model="fullname" v-
浏览 0提问于2021-04-21得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
