出错时更改文本字段边框的最简单方法

Simplest way to change the border of a textfield on error

本文关键字：边框 最简单 方法 字段 文本 出错      更新时间：2023-09-26

我正在尝试找出在文本字段周围放置红色边框的最简单方法，如果它不遵循特定格式。我的代码是属性检测文本格式是否正确，但是当检查失败时，我在更改边框颜色时遇到问题。如果可能的话，我宁愿只使用 html/css 和 JavaScript，但我似乎不知道该怎么做。

这是我的文本框的 html：

<p class="fieldtitle"> First Name </p>
<span><input type="text" class="textinput" id="fname" name="fname" /></span>

这是我的JavaScript，用于检查它是否具有正确的格式：

function chkfName() {
    var myfname = document.getElementById("fname");
    var pos = myfname.value.search(/^[A-Z][a-z]+$/);
    if (pos != 0) {
        //this is where I want to change the border around the text box
        return false;
    } else
        return true;
}

您可以像这样轻松更改它！

function chkfName() {
var myfname = document.getElementById("fname");
var pos = myfname.value.search(/^[A-Z][a-z]+$/);
if (pos != 0) {
    fname.style.borderColor = "red";
    return false;
} else
    return true;

}

以下是一些文档：http://www.w3schools.com/js/js_htmldom_css.asp

创建样式表类.error
使用Element.classlist.toggle文档使用 JS 切换它

function chkfName() {
  var fname = document.getElementById("fname");
  var pos = /^['w'-]{2,32}$/.test(fname.value);
  fname.classList.toggle("error", !pos);
  return pos;
}
document.forms[0].addEventListener("submit", chkfName);
.error{border:2px solid red;}
<form>
  <p class="fieldtitle"> First Name </p>
  <span><input type="text" class="textinput" id="fname" name="fname" /></span>
  <input type="submit" value="Test">
</form>

我恳请您不要使用 [A-Z][a-z]+ ，像 Đuro 这样的人名会返回一个很好的错误，因为不是A-Z字符。
此外，我会使用 .trim() 并将第一个字符自动转换为大写 - 以获得更好的用户体验。看到roko自动转换为程序的Roko - 不会抛出废话错误并停止我的进度 - 将是一次非常好的体验。
无论如何，你应该找到一个更好的正则表达式。

有关信息，因为它没有给出任何javascript提示：

HTML5允许使用属性模式测试模式：

如果可能还没有在现实生活中使用，这是测试正则表达式的快速方法。

https://www.w3.org/TR/html-markup/datatypes.html#form.data.pattern

https://www.w3.org/wiki/HTML/Elements/input/text

http://caniuse.com/#feat=input-pattern

input:valid {/* empty doesn't trigger errors, so it is valid :( unless required */
  border-color:green;
  box-shadow:0 0 0 3px green;
    }
input:invalid {
  border-color:red;
  box-shadow:0 0 0 3px tomato
  }
<form>
  <p>The pattern from your question</p>  
  <input type="text" name="test" pattern="^[A-Z][a-z]+$" placeholder="^[A-Z][a-z]" required />
  </form>

相关文章：