Home > Article > Web Front-end > Introduction to JavaScript regular expressions starting with a letter

Introduction to JavaScript regular expressions starting with a letter

coldplay.xixiforward: 2021-02-22 09:33:063992browse

Free learning recommendation: javascript video tutorial

Form Verification: Create a form and use JavaScript dom to add verification to the form.

Requirements:

Verify the user name, which must start with a letter and be between 2-6 characters in length.
The verification password cannot be empty.
The confirmation password cannot be empty and must be consistent with the password.

<!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>

Related free learning recommendations: javascript(Video)

The above is the detailed content of Introduction to JavaScript regular expressions starting with a letter. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:csdn.net. If there is any infringement, please contact admin@php.cn delete

Previous article：Detailed explanation of structural directives, modules and styles in AngularNext article：Detailed explanation of structural directives, modules and styles in Angular

See more

Introduction to JavaScript regular expressions starting with a letter

Related articles