最简单的方法来改变错误

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

与JS创建样式类.error
拨动它Element.classlist.toggle^Docs

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 - 没有抛出废话错误，停止我的进步 - 将是相当不错的体验。
以任何方式，你应该找到一个更好的正则表达式。

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

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>