javascript - 在表单上设置规则

Question

因此，我需要一个函数来检查我制定的规则是否适用于表单中的选项。

第一个框是名称框，它需要至少包含三个字母并包含至少一个空格才能传递。另一个框是年龄，它需要有一个 1 到 125 之间的数字，我可以自己做，但我想可能有一个很好的方法来一次设置所有规则，所以我想我应该包括它。

第三个选项是一组三个单选按钮，其中必须选择一个，第四个框是一个信息框，应包含至少 30 个字母的文本。这些规则应该通过按下按钮来检查，这是我自己已经取得的进展:

var sendButton = $("button:first").addClass("sendButton");
var age = document.getElementsByName('age')[0].value;

sendButton.click(function(){
    var infoName = document.getElementsByName('infoName')[0].value;
    if (infoName.length<3){
    console.log("Your name must consist of at least three letters and contain a whitespace");
    };
    }
});


        <section class="column">
        <h2>Contact us</h2>
        <form action="#">
            <fieldset>
                <legend>Form</legend>
                <div class="textinput">
                    <label for="infoName">Ditt namn:</label>
                    <input type="text" name="infoName" placeholder="ex. John Doe">
                </div>

                <div class="textinput">
                    <label for="infoName">Din ålder:</label>
                    <input type="text" name="age" placeholder="ex. 25">
                </div>

                <div class="radioSelection">
                    <label>Choose your favorite</label>            
                    <input type="radio" name="favorite" id="html" value="html">
                    <label for="html">HTML</label>
                    <input type="radio" name="favorite" id="js" value="js">
                    <label for="js">JavaScript</label>
                    <input type="radio" name="favorite" id="css" value="css">
                    <label for="css">CSS</label>
                </div>

                <div class="textareainput">
                    <label for="info">Info about you:</label>
                    <textarea placeholder="Type something about yourself, this area must contain 30 letters or more"></textarea>
                </div>

                <div class="action">
                    <button>Send</button>
                </div>

Answer 1

function validateForm(){
    var infoName = document.getElementsByName('infoName')[0].value;
    var age= document.getElementsByName('age')[0].value;
    var favourites = document.getElementsByName('favorite');

    var problems = 0;

    if(infoName.length < 3){
        // Failed length validation
        problems++;
    }

    var spaceIndex = infoName.indexOf(' ');

    if(spaceIndex === -1){
        // Name does not contain a space.
        problems++;
    }
    else if(spaceIndex === 0){
        // Name begins with space
        problems++;
    }
    else if(spaceIndex === infoName.length - 1){
        // Space is last character.
        problems++;
    }         

    var hasCheck = false;
    for(var i = 0; i < favourites.length; i++){
        if(favourites[i].checked){
            hasCheck = true;
            break;
        }
    }

    if(!hasCheck){
        // No radio button has been checked.
        problems++;
    }

    var ageNum = parseInt(age);
    if(isNaN(ageNum)) {
        // Age is not a number
        problems++;
    }
    else if(ageNum < 1 || ageNum > 125){
        // Age is not within boundaries
        problems++;
    }

    /// etc etc, for all your validations.

    return problems === 0;
}

验证结束时，如果检测到任何问题，则不会提交表单(因为 problems === 0 为 false)。另外，我在那里放置的数字验证不是很可靠。查看this question其中详细介绍了数字验证。

验证方法应该在提交表单时调用，而不是在单击按钮时调用

$('form').submit(function(e){
    var valid = validateForm();
    if(!valid){
        e.preventDefault();
        return false;
    }
});