Javascript 在表单上设置规则

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

第一个框是名称框，它需要至少有三个字母，并至少包含一个空格才能传递。 另一个框是年龄，它需要有一个介于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>

var sendButton=$（“按钮：第一”）.addClass（“sendButton”）；
var age=document.getElementsByName（'age'）[0]。值；
sendButton.单击（函数（）{
var infoName=document.getElementsByName（'infoName'）[0]。值；
如果（infoName.length）那么你的问题是如何检查第二个框中的数字1到125？什么？不，问题是如何检查所有规则，如何检查第二个框中的数字，我可以自己做，因为这与检查infoName的长度完全相同。第一部分是如何检查第二个框中是否有空格“信息名"，然后查看年龄是否在1-125之间，然后查看是否选择了单选按钮，然后检查信息框是否包含至少30个字母，所有这些字母都很好。或者我必须单独编写每个if语句吗？好的，我想我只是在努力理解你所说的好方法的含义。编写5或6个if语句来验证表单非常容易。没有plu为了提供一个略短的语法，我认为您应该为每个验证检查编写一个if语句。如果您确实想要一个可以使其“更好”的验证库，请检查，谢谢，看起来很干净，这就是我所说的“好方法”，我不会自己想出问题计数器。顺便说一句，你错过了一个细节，我想确保infoName中有一个“空格”或“空白”，这是可能的吗？还有，我怎么看用户是否选择了其中一个单选按钮？谢谢你，非常感谢你的帮助，你刚刚救了我一晚。：）不过，我不能投票给你，我只有不到15个代表。不用担心，我还添加了收藏夹检查。我实际上还没有运行所有这些代码，我只是在键入，希望你不会出现任何语法错误。如果我这样做，我打赌它们至少不会太过强大。：）所以，我有一个问题，当我大部分时间按下按钮时，我的页面正在重新加载，所以我看不出我的验证是否有效。
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;
}

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