Question

我正在尝试创建检查以验证用户的输入，例如他是否填写了它，以及它是否正确。我希望它突出显示包含错误的字段。我已经问过了，并被告知要创建一个类，但是我不知道该怎么做。还有

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>Form Validation</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="styles/styles.css">
    <link rel="stylesheet" type="text/css" href="styles/forms.css">
    <script type="text/javascript">

    window.onload=init;
    var form;
        function init() {
            form = document.getElementById('testform');
            form.addEventListener("submit", checkSubmit, false);
            form.addEventListener("reset", checkReset, false);

            form['colour'].addEventListener("change", checkSubmit, false);

            form['name'].focus();
        }
        String.prototype.trim=function() {
            return this.replace(/^\s+1\s+$/g, '');
        }
        function whichButton(name) {
            var buttons=document.getElementsByName(name);
            for (var i in buttons) {
                if(buttons[i].checked) return buttons[i].value
            }
            return false;
        }
        function showOtherColour() {
            document.getElementById('othercolour').style.visibility=
                form['colour'].value=='other' ? 'visible' : 'hidden';
        }
        function checkSubmit() {
            error = new Array();
            //Fill the array with the error value

            form['name'].value=form['name'].value.trim();
            form['email'].value=form['email'].value.trim();
            form['town'].value=form['town'].value.trim();
            form['state'].value=form['state'].value.trim();
            form['postcode'].value=form['postcode'].value.trim();
            form['dob'].value=form['dob'].value.trim();
            form['height'].value=form['height'].value.trim();


            //Check required fields
            if(!form['name'].value)
                error.push('Missing Name');
            if(!form['email'].value)
                error.push('Missing Email Address');
            if(!form['password'].value)
                error.push('Missing Password');

            //Check valid email address
            var pattern=/^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+(\.[a-zA-Z]{2,4})$/;
            if(!form['email'].value.match(pattern))
                error.push('Invalid Email Address');

            //Check State

            //Check Post Code has 4 digits
            var pattern=/^\d{4}$/;
            if(!form['postcode'].value.match(pattern))
                error.push('Invalid Post Code');
            //Check password matches confirmation
            //var password = ;
            /*
            if(!form['passwordConfirm'].value.match(password)){
                error.push("Passwords don't match");
            }*/

            console.log(form['confirm'].value);
            console.log(form['password'].value);
            if(!form['confirm'].value.match(form['password'].value)){
                error.push('Passwords do not match');
            }
            //passwords is too short
            if (!form['password'].value.length < 4) {
                error.push("Password is too short (Minimum 4 characters)");
            }
            //height is not a number
            if (isNaN(Number(form['height'].value))) {
                error.push("Height is not a number");
            }
            //Check that one Gender item is selected
            if(whichButton('gender')===false)
                error.push('Please choose a Gender');

            //Check that "Other" field is filled
            if (!form['colour'].value ||
                (form['colour'].value=='other' && !form['othercolour'].value))
                error.push('Colour is not selected');

            if(error.length) { // if there are errors
            alert(error.join("\n"))
            return false;
            }
            else return true;

            //return confirm("This will submit the form"); //Temporary placeholder
        } 
        function checkReset() {
            return confirm("This will clear the form data");
        }
    </script>
<style type="text/css">
body,td,th {
    font-size: 0.9em;
}
</style>
</head>
<body>
<div id="body">
    <h1>Form Validation</h1>
    <form action="http://test.miform.net" method="post" id="testform">
    <fieldset>
        <label>Name<br><input type="text" name="name" class="wide"></label>
        <label>Email Address<br><input type="text" name="email" class="wide"></label>
    </fieldset>
    <fieldset>
        <label>Address<br><input type="text" name="street" class="wide"></label>
        <label>Town<br><input type="text" name="town" class="narrow"></label>
        <label>State<br><input type="text" name="state" class="narrow"></label>
        <label>PostCode<br><input type="text" name="postcode" class="narrow"></label>
    </fieldset>
    <fieldset>
        <label>Password<br><input type="password" name="password" class="medium"></label>
        <label>Confirm Password<br><input type="password" name="confirm" class="medium"></label>
    </fieldset>
    <fieldset>
        <label>Date of Birth<br><input type="text" name="dob" class="medium"></label>
        <label>Height<br><input type="text" name="height" class="medium"></label>
    </fieldset>
    <fieldset>
        <legend>Gender</legend>
        <label><input type="radio" name="gender" value="f">Female</label>
        <label><input type="radio" name="gender" value="m">Male</label>
    </fieldset>
    <fieldset>
        <label>Colour
            <select name="colour">
                <option value="">Select...</option>
                <option value="black">Black</option>
                <option value="white">White</option>
                <option value="red">Red</option>
                <option value="green">Green</option>
                <option value="blue">Blue</option>
                <option value="cyan">Cyan</option>
                <option value="magenta">Magenta</option>
                <option value="yellow">Yellow</option>
                <option value="other">Other</option>
            </select>
        </label>
        <input type="text" id="othercolour">
    </fieldset>
        <input type="reset" name="reset" value="Clear Form">
        <input type="submit" name="send" value="Send Off">
    </form>
</div>
</body>
</html>

CSS（form.css）：

body {
    font-family: sans-serif;
    font-size: .9em;
}
form {
    width: 26em;
}
label {
    font-weight: bold;
    float: left;
}
input.wide {
    padding: .125em;
    width: 25.125em;
}
input.medium {
    padding: .125em;
    width: 12em;
}
input.narrow {
    padding: .125em;
    width: 8em;
}
#othercolour {
    visibility: hidden;
}

style.css

body {
    font-family: sans-serif;
    font-size: .9em;
    background-color: rgb(166, 183, 183);
    color: black;
}
div#body {
    width: 30em;
    margin: auto;
    padding: 1em 2em;
    background-image: url(background.png);
    background-repeat: repeat-x;
    background-color: rgb(224, 230, 230);
}

h1,h2 {
    color: rgb(47, 79, 79);
}
h2 {
    margin: .25em 0em .25em 0em;
}
a {
    text-decoration: none;
    color: rgb(132, 156, 156);
    color: white;
    font-weight: bold;
}
a:hover {
    color: yellow;
}
td, th {
    vertical-align: top;
    text-align: left;
}
img {
    border: 0px;
}
p, .clear {
    qclear: both;
}
#catalog {
    float: left;
    width: 50%;
}
#content {
    float: right;
    width: 46%;
}
#cart {
    border: 1px solid #cccccc;
    padding: 0em .5em;
}
#cart form {
    display: inline;
}
#cart input.text {
    width: 2em;
    text-align: right;
}
#welcome {

}

#navigation {
}

#navigation span {
    color: rgb(131, 155, 155);
}

#navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#navigation li {
    float: left;
    background-color: pink;
    border-bottom: solid 1px;
}
#navigation li a {
    display: block;
    width: 8em;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    padding: .25em;
    background-color: rgb(97, 124, 124);
}
#navigation li a:hover {
    background-color: rgb(47, 79, 79);
}

Answer 1

您可以设置input的CSS border-color属性以突出显示该字段。

var input = document.querySelector('input'),
form = document.querySelector('form');
form.addEventListener('submit', function(e){
  e.preventDefault();
  if(!input.value.trim()){//if value of input is empty
    input.style.borderColor = "red";
  } else {
    input.style.borderColor = "green";
  }
});

<form>
<input placeholder="Enter something">
<br/>
<button>Validate</button>
</form>

Answer 2

要添加类，请使用JavaScript的classList.add()函数。

示例

function check() {
  var element = document.getElementById("input");
  if (element.value != "") {
    document.write("Valid!");
  } else {
    element.classList.add("invalid");
  }
}

.invalid {
  background-color: rgba(255,0,0,.7);
  color: white;
}
.invalid::placeholder {
  color: white;
}

<input type="text" placeholder="Type Something..." id="input">
<button onclick="check();">Check</button>

Answer 3

如果您使用HTML5验证属性，则只需使用：invalid伪类设置CSS规则：

:invalid { . . . }

如果未正确填写特定的盒子，如何更改其颜色

3 个答案: