Maison > interface Web > js tutoriel > Introduction aux expressions régulières JavaScript commençant par une lettre

Introduction aux expressions régulières JavaScript commençant par une lettre

coldplay.xixi
Libérer: 2021-02-22 09:33:06
avant
4051 Les gens l'ont consulté

Introduction aux expressions régulières JavaScript commençant par une lettre

Recommandations d'apprentissage gratuites : Tutoriel vidéo javascript

Formulaire Validation : créez un formulaire et utilisez JavaScript+dom pour ajouter une validation au formulaire

Exigences :

  • Pour vérifier le nom d'utilisateur, il doit commencer par une lettre et être compris entre 2. -6 caractères de longueur.
  • Le mot de passe de vérification ne peut pas être vide.
  • Le mot de passe de confirmation ne peut pas être vide et doit être cohérent avec le mot de passe.
    Introduction aux expressions régulières JavaScript commençant par une lettre
    Introduction aux expressions régulières JavaScript commençant par une lettre
<!DOCTYPE html><html lang="en"><!-- 表单校验:创建表单,使用JavaScript为表单添加校验.
    1.验证用户名称,必须以字母开头,长度2-6位之间.
    2.验证密码不能为空.
    3.确认密码不能为空,要与密码一致. --><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        function checkForm() {
            //获得用户名对象
            var username = document.getElementById("username");
            //---获得用户名输入框中的value值
            var usernamevalue = username.value;
            var Reg = /^[a-zA-Z][-_a-zA-Z0-9]{1,5}/;//JavaScript中的正则与Java的正则略有不同
            if (usernamevalue.length >= 2 && usernamevalue.length <= 6 && Reg.test(usernamevalue)) {
                //为span设置提示语
                document.getElementById("usernameSpan").innerHTML = "<font color=&#39;green&#39;> 用户名可用<font>";
            } else {
                document.getElementById("usernameSpan").innerHTML = "<font color=&#39;red&#39;> 用户名必须以字母开头且长度在2-6之间<font>";
            }

            //获得密码value
            var password = document.getElementById("password").value;
            if (password == "") {
                document.getElementById("passwordSpan").innerHTML = "<font color=&#39;red&#39;>密码不能为空</font>";
            } else {
                document.getElementById("passwordSpan").innerHTML = "<font color=&#39;green&#39;>密码可用</font>";
            }

            //获得确认密码
            var repassword = document.getElementById("repassword").value;

            if (repassword == password) {
                document.getElementById("repasswordSpan").innerHTML = "<font color=&#39;green&#39;>输入一致</font>";
            } else {
                document.getElementById("repasswordSpan").innerHTML = "<font color=&#39;red&#39;>两次输入密码不一致</font>";
            }
        }
    </script></head><body>
    <h2>新用户注册</h2>
    <p style="border: 1px solid sandybrown; width: 300px; height: 260px;">
        <form action="">
            <table cellspacing="15">
                <tr>
                    <td>
                        用户名称:
                    </td>
                    <td>
                        <input type="text" id="username">
                        <span id="usernameSpan"></span>
                    </td>

                </tr>

                <tr>
                    <td>
                        密      &nbsp码:
                    </td>
                    <td>
                        <input type="password" id="password">
                        <span id="passwordSpan"></span>
                    </td>

                </tr>

                <tr>
                    <td>
                        确认密码:
                    </td>
                    <td>
                        <input type="password" id="repassword">
                        <span id="repasswordSpan"></span>
                    </td>
                </tr>
            </table>
        </form>
    </p>
    <input type="button" value="确认注册" onclick="checkForm()" /></body></html>
Copier après la connexion

Recommandations d'apprentissage gratuites associées : javascript(vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal