使用Javascript

时间:2017-05-27 02:33:36

标签: javascript html forms validation bootstrap-4

我正在尝试使用javascript中的正则表达式验证我的引导程序表单。我已经启动了javascript,但不知道用正则表达式继续验证的正确方法。在提交之前,我正在尝试验证表单中的每个输入。

如果有人能帮我解决我的问题,我们将不胜感激。

非常感谢您提前。 在javascript中没有Jquery

John Simmons

HTML(这是我的html引导表单)

<div class="col-md-6">
        <div class="well well-sm">
            <form class="form-horizontal" id="form" method="post" onsubmit="return validerForm(this)">
                <fieldset>
                    <legend class="text-center header">Contact</legend>
                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-1">
                            <input id="lastName" name="LN" type="text" placeholder="Nom" autofocus class="form-control">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-1">
                            <input id="firstName" name="FN" type="text" placeholder="Prenom" class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-1">
                            <input id="email" name="email" type="text" placeholder="Courriel" class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-1">
                            <input id="phone" name="phone" type="text" placeholder="Téléphone" class="form-control">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-1">
                            <textarea class="form-control" id="message" name="Message" placeholder="Entrez votre message. Nous allons vous répondre le plus tôt que possible." rows="7"></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-md-12 text-center">
                            <button type="submit" class="btn btn-primary btn-lg">Submit</button>
                            <input class="btn btn-primary btn-lg" type="reset" onclick="clearForm()" value="Clear">
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>

Javascript(这是我的javascript与我的正则表达式,我正在考虑做一个函数,将验证使用正则表达式输入的每个值)

var nameregex = /(^[A-Z][a-z]{1,24})+$/;
var emailregex= /^([A-Za-z])([A-Za-z0-9])+\@([a-z0-9\-]{2,})\.([a-z]{2,4})$/;


function validerForm(form) {
    window.onload = function(){
        document.getElementById('lastName').focus();
    }

    var valName = Formulaire.name.value;
    var valFirst = Formulaire.firstname.value;
    var valEmail = Formulaire.email.value;

    var nameValide = validationName(valName);
    var firstValide = validationFirstName(valFirst);
    var emailValide - validationEmail(valEmail);


}

function validationName(valName){
    if(nameregex.test(valName) == true){

    }else{

    }
}

function clearForm() {
    document.getElementById("form").reset();
}

1 个答案:

答案 0 :(得分:0)

您可以使用string.match()

i.e.: if (valEmail.match(emailregex)) { do stuff!; }