Maison > Article > interface Web > Comment utiliser JavaScript pour valider les formulaires

Comment utiliser JavaScript pour valider les formulaires

PHPzavant: 2016-05-16 15:57:471680parcourir

1. Principe

Le formulaire est vérifié en ajoutant l'événement onblur dans la zone de saisie. Lorsque la zone de saisie perd le focus, la fonction js est appelée. et modifie le contenu derrière la zone de saisie via l'attribut innerHTML. L'invite s'affiche.

Enfin, ajoutez l'événement onsubmit dans la balise form et appelez la fonction js lorsque vous cliquez sur le bouton d'enregistrement. Uniquement lorsque les valeurs de toutes les zones de saisie répondent aux exigences, true sera renvoyé et le. le formulaire sera soumis. Sinon, renvoyez false et le formulaire ne sera pas soumis.

2. Images

Comment utiliser JavaScript pour valider les formulaires

3. Notes

Pour créer des expressions régulières en js, vous devez utiliser "/^... $/" , ^ signifie correspondre depuis le début, $ signifie correspondre au dernier caractère. Par exemple, var reg=/^w [@]w [.comn]{3,4}$/;

regular expression Le w représente a-z, A-Z, 0-9 comprend également des traits de soulignement.

Utilisez généralement la méthode de test régulière pour déterminer si la chaîne correspond à l'expression régulière. Si la valeur de retour est vraie, la correspondance est réussie. Si false est renvoyé, la correspondance échoue.

4. Code d'implémentation

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用JavaScript完成表单的校验</title>
        <script>
            //校验用户名
            function checkName(){
                var name=document.getElementById("name").value;
                var nameSpan=document.getElementById("nameSpan")
                //正则表达式判断用户名
                var reg=/^\w+$/;
                if(name.length<1){
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>用户名不能为空</font>"
                    }else if(name.length<=6){
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>用户名要至少六位</font>"
                    }else if(!reg.test(name)){
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>只能由字母数字下划线组成</font>"
                    }else{
                        nameSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>符合要求</font>"
                        return true;
                    }
                }
            //校验密码
            function checkCode(){
                var code=document.getElementById("code").value;
                var codeSpan=document.getElementById("codeSpan")
                if(code==&#39;&#39;){
                    codeSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>密码不能为空</font>"
                }else if(code.length<6){
                    codeSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>密码至少六位</font>"
                }else{
                    codeSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>符合要求</font>"
                    return true;
                }
            }
            //校验邮箱
            function checkEmail(){
                var email=document.getElementById("email").value;
                var emailSpan=document.getElementById("emailSpan")
                //用正则判断邮箱格式
                var reg=/^\w+[@]\w+[.comn]{3,4}$/;
                if(email==&#39;&#39;){
                        emailSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>邮箱不能为空</font>"
                }else if(!reg.test(email)){
                    emailSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>邮箱格式不正确</font>"
                }else{
                    emailSpan.innerHTML="<font size=&#39;1&#39; color=&#39;red&#39;>符合要求</font>"
                    return true;
                }
            }
            //校验所有信息，决定表单是否提交
            function checkForm(){
                if(checkName()&&checkCode()&&checkEmail()){
                    return true;
                }
                return false;
            }
        </script>
    </head>
    <body>
            <form id="regist" onsubmit="return checkForm()" action="http://www.baidu.com" method="get" style="margin-left: 520px;width: 400px;padding-left: 20px; height: 280px;border: 1px solid darkgray;">
                <h3>注册表单</h3>
                用户名：<input type="text" id="name" name="username" onblur="checkName()"/>
                    <span id="nameSpan" ></span><br/><br />
                 密码：<input type="password" id="code" name="password" onblur="checkCode()"/>
                    <span id="codeSpan"></span><br/><br />
                 邮箱：<input type="text" id="email" name="email" onblur="checkEmail()"/>
                    <span id="emailSpan"></span><br/><br />
                      <input type="submit" value="注册"/>
                 <input type="reset" value="重置"/>
            </form>
    </body>
</html>

Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Javascript obtient les coordonnées du document et les compétences viewport coordinates_javascriptArticle suivant：Javascript obtient les coordonnées du document et les compétences viewport coordinates_javascript

Articles Liés

Voir plus