Question

我试图找出在文本字段周围放置红色边框的最简单方法，如果它不遵循特定格式。我的代码是属性检测文本是否格式正确但我在检查失败时更改边框颜色时遇到问题。如果可能的话，我宁愿只使用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;
}

Answer 1

你可以很容易地改变它！

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

Answer 2

创建样式表类.error
使用Element.classlist.toggle^Docs

用JS切换它

＆＃13;

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);

＆＃13;

.error{border:2px solid red;}

＆＃13;

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

＆＃13;

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

Answer 3

有关信息，因为它没有提供任何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

＆＃13;

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
  }

＆＃13;

<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>

＆＃13;

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

3 个答案: