个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有 5 个输入字段，我希望它们在模糊时进行验证，并显示错误或成功消息，但通过 DOM 脚本而不是警告框。我尝试了几种不同的代码，甚至只是一小部分代码，看看它是否能正确地与我的 html 交互，但它似乎不起作用。到目前为止，我有一个小代码来测试它是否运行，它应该显示一个警报框，但它没有。我宁愿不使用任何innerHTML，而只使用javascript 中的所有功能。我的 HTML:
<div id=fNID>
<label for="firstNameID">First Name: </label>
<input id="firstNameID" type="text" name="firstNameA" value="" />
<span> </span>
</div>
<div id=lNID>
<label for="lastNameID">Last Name: </label>
<input id="lastNameID" type="text" name="lastNameA" value="" />
<span> </span>
</div>
我的 JavaScript:
firstNameID = document.surveyForm.getElementById("firstNameID");
document.surveyForm.getElementById(fN).addEventListener("blur", validateName);
function validateName() {
var nameRegEx = /[a-zA-Z]+/;
var firstNameID = document.getElementById("firstNameID");
if (fN.matches(nameRegEx)) {
alert("Success!")
} else {
alert("error")
}
}
window.addEventListener("load", setupForm, false);
}
最佳答案
Bootstrap 有一个很好的模式 input validation 。他们在输入后面使用 div:一个用于有效输入，一个用于无效输入，使相应的一个可见:
<div class="form-group">
<label for="uname">Username:</label>
<input class="form-control" id="uname">
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
Bootstrap 的 CSS 类根据输入的伪类 :valid 和 :invalid 修改显示。
您可以使用 setCustomValidity() 方法在 JavaScript 中设置这些伪类。
input.setCustomValidity("input is invalid")
会将 :invalid 伪类分配给输入。
input.setCustomValidity("")
将分配 :valid 伪类。
一个工作示例:
const input = document.getElementById('uname');
function makeValid() {
input.setCustomValidity('');
}
function makeInvalid() {
input.setCustomValidity('a problem');
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<h3 class="m-2">Bootstrap input with validation</h3>
<form class="was-validated mx-2">
<div class="form-group">
<label for="uname">Username (required):</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname">
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">This field is invalid.</div>
</div>
</form>
<div class="m-2">
<p>Use setCustomValidity() to change input state:</p>
<button onclick="makeValid();">:valid</button>
<button onclick="makeInvalid();">:invalid</button>
</div>还值得注意的是，大多数浏览器都原生支持在输入上显示验证消息。下面是一个不使用任何 Bootstrap 功能的示例:
const input = document.getElementById('uname');
function makeValid() {
input.setCustomValidity('');
}
function makeInvalid() {
input.setCustomValidity('this is invalid');
}body {
background-color: #aaa;
}
.m-2 {
margin: .5rem;
}
.mt-5 {
margin-top: 1rem;
}<body>
<h3 class="m-2">Generic input with validation</h3>
<form class="mt-5">
<label for="uname">Username:</label>
<input type="text" id="uname" placeholder="Enter username" name="uname">
<p>Use setCustomValidity() to change input state:</p>
<button onclick="makeInvalid();">input:invalid</button>
</form>
<div class="m-2">
<button onclick="makeValid();">input:valid</button>
</div>
</body>关于javascript - 模糊时的表单验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61235354/
24
4
0
我正在学习 Javascript，我正在尝试创建一个简单的下拉菜单。我想要的功能的示例可以在 Google 主页的顶部菜单中看到，其中包含“更多”和“设置”下拉菜单。 我有一个使用 onclick()
我尝试捕捉 tinyMce 编辑器的模糊和焦点事件。 我为此找到了以下方法。 ed.onInit.add(function(ed) { tiny
这里完全被难住了。尝试一些很简单的东西，但它不起作用: $("input.input1, textarea.input1").focus(function(){ $(this).addClas
我有以下 jQuery 函数: 提交表单 $(".content").delegate('.entryButton','click', function() {var form = $(this).c
如何使用 jQuery 在焦点/模糊上切换元素的 CSS？ $('.answerSpace').bind('blur', function(){ $('.normProf').toggleClass(
在我的 iPhone 应用程序中，我有一个黑白 UIImage。我需要模糊该图像(高斯模糊即可)。 iPhone 显然知道如何模糊图像，如 it does that when it draws sha
这个问题已经有答案了: Blurring an image via CSS? (6 个回答) 已关闭 7 年前。 我有一个场景。我想随着循环的进行模糊我的图像。我怎样才能做到这一点？这是我的代码。
这个错误是在子字符串方法上抛出的，我发现很多线程都在处理这个问题，但我遇到的问题似乎有所不同。我知道如果您的字符串短于子字符串(开始，结束)大小，它会抛出此错误，但在任何内容传递到方法调用之前都会抛出
是否有简单的解决方案可以在 Qt 中为图像添加运动模糊？还没有找到任何关于模糊的好教程。我需要一些非常简单的东西，我可以理解，如果我可以改变模糊角度，那就太好了。 最佳答案 Qt 没有运动模糊过滤器。
我的搜索框在正常状态下很小。焦点对准时，它会展开，并显示一个提交按钮。这样做是为了节省空间。现在，在模糊时，搜索框再次缩小，提交按钮消失。 问题是，通过使提交按钮成为“竞赛”以在正确的位置单击它，对提
您好，我正在使用 PngBitmapEncoder 从 Canvas 在内存中创建图像。 public void CaptureGraphic() { Canvas canvas = new
我已经搜索过谷歌、这个和其他论坛，但无济于事……太棒了，有没有可能有像 onMiddleClick="blur();"这样的东西？在单击鼠标中键时隐藏链接的焦点边框？ 最佳答案 $('a').clic
我无法在我的应用程序中正确渲染我的纹理。我使用的艺术品是精确的，并且已经缩放且尺寸合适，但是当我在手机上渲染它时，我的纹理突然不如原始艺术品清晰/精确，我不明白为什么。 有人遇到过这个问题吗？ 最佳答
这里有与上述主题相同的问题但没有得到答复 我这里有布局 我需要在底部布局中使用与顶部布局相同的图像，但使用模糊样式 设置 alpha 没有帮助 - TextView 也会影响 如何虚化down布局的背
我已经搜索了一段时间，但到目前为止没有找到适合我需要的东西。 ( This was helpful, but not convincing ) 从两个不同的来源，我得到两个不同的字符串。我想检查较短的
我有这样的代码: var passwordTextBox = angular.element("#password"); passwordTextBox.blur(function()
设置此 JQuery 函数无法正常工作。有时，如果我单击元素，什么也没有发生，并且它会触发隐藏可折叠菜单的功能，如果单击文档上的任意位置，则不会重定向到正确的 href。有什么更好的方法吗？ HTML
尝试通过将坐标列表保存到数组来在多个位置裁剪我的图像后，裁剪区域中的字母变得非常模糊，我无法弄清楚原因。 原图看起来像 裁剪后的图像看起来像 题中代码如下: import numpy as np im
我知道我们可以调暗/模糊屏幕，如 this post 所示. 我应该怎么做才能使它的一部分变暗/模糊，使单个(或多个) View 没有任何效果，从而使整个屏幕具有突出显示 View 的效果？ 此外，即
如果有人曾经向 digg 提交过故事，它会检查该故事是否已经提交，我假设是通过模糊搜索。 我想实现类似的东西，想知道他们是否使用开源的 php 类？ Soundex 不这样做，句子/字符串的长度可达
我是一名优秀的程序员,十分优秀！