Question

我正在尝试为我的网站设置一些表单验证。我想要实现的是：

当JS检测到空字段时，它会在其周围放置一个红色边框;然后，当用户聚焦（将光标放在输入字段中）时，边框将被删除并且不会返回。我尝试使用CSS，因为它可能是一种较短的方式，但是一旦用户移除了焦点输入字段，红色边框就会返回。

似乎问题在于函数参数。如果JS位于方法的中间，JS是否无法使用参数（fieldName）？（document.contactForm.的 fieldName .style.border="none !important";）

以下链接指示 jsfiddle 上我的问题：http://jsfiddle.net/sonbrL2r/

在表单提交时调用第一个函数。如果它检测到空表单，则会在文本字段周围添加红色边框;

然后第二个功能是在该文本字段的焦点上删除所述边界。

HTML：

<body>
    <form name="contactForm" onSubmit="return formValidate();">
        <table>
            <tr>
                <td><label>Your Name:</label></td>
                <td><input type="text" name="realname" size="44" maxlength="60" onFocus="removeBorder(realname);"/></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="SEND" /></td>
            </tr>
        </table>
        </form>
</body>

JS：

var formValidate = function() {
    var formValid = true;
    var errorMsg = "Oops! Looks like you didn't complete the form properly: \n";

        if (document.contactForm.realname.value == "") {
            document.contactForm.realname.style.border="2px solid #cc3333";
            errorMsg+="The name field is empty.\n";
            var formValid = false;

    if(!formValid) {alert(errorMsg)};   
    return formValid;
};

var removeBorder = function(fieldName) {
    document.contactForm.fieldName.style.border="none !important";
};

Answer 1

我的问题不明确，但是，因为fieldName是一个变量，所以：

document.contactForm.fieldName.style.border

应该这样写：

document.contactForm[fieldName].style.border

JS表单验证：在输入字段上添加带有错误的红色边框;在焦点上删除它？

1 个答案: