JavaScript验证 - 关于“确认密码”字段

Question

我正在制作注册页面，并且我被指示添加客户端验证和javascript验证。在HTML文件（signup.html）中，我有8个输入字段，其中7个具有正则表达式，但只有4个具有必填字段。我对“确认密码”字段有疑问。即使输入与“密码”字段不同，验证过程仍会继续，而不是提醒用户密码必须相同才能继续。

以下是表单的HTML代码：

            <form method="POST" action="http://webdevfoundations.net/scripts/formdemo.asp" id="signUp" onSubmit="confirmForm(this);">
                <fieldset id="personalInfo">
                    <legend>
                        Personal Information
                    </legend>
                    <table class="userInput">
                        <tr>
                            <td class="label">
                                <label for="firstName">
                                    First Name 
                                </label>
                            </td>
                            <td>
                                <input type="text" name="first" id="firstName" pattern="[a-zA-Z]{2,}" title="Must have at least 2 characters of alphabet" maxlength="50" autofocus/>
                            </td>
                        </tr>
                        <tr>
                            <td class="label">
                                <label for="lastName">
                                    Last Name
                                </label>
                            </td>
                            <td>
                                <input type="text" name="last" id="lastName" pattern="[a-zA-Z]{2,}" title="Must have at least 2 characters of alphabet" maxlength="50"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="label">
                                <label for="email">
                                    Email<span class="asterisk">*</span>
                                </label>
                            </td>
                            <td>
                                <input type="email" name="email" id="email" pattern="\w.*+\@+[a-z]+\.[a-z]{2,7}" title="Example: abc@yahoo.com" required/>
                            </td>
                        </tr>
                        <tr>
                            <td class="label">
                                <label for="age">
                                    Age
                                </label>
                            </td>
                            <td>
                                <input type="number" name="age" id="age" pattern="[1-9]{1,2}" title="Numeric value must be used" min="3"/>
                            </td>
                        </tr>
                    </table>
                </fieldset> 

                <br/>

                <fieldset id="genderField">
                    <legend>
                        Gender
                    </legend>
                    <input type="radio" name="gender" id="genderM" value="Male">
                    <label for="genderM">
                        Male
                    </label>

                    <input type="radio" name="gender" id="genderF" value="Female">
                    <label for="genderF">
                        Female
                    </label>                                
                </fieldset>

                <br/>

                <fieldset id="logInfo"> 
                    <legend>
                        Log In Information
                    </legend>
                    <table class="userInput">
                        <tr>
                            <td>
                                <label for="userName">
                                    Username<span class="asterisk">*</span>
                                </label>
                            </td>
                            <td>
                                <input type="text" name="user" id="userName" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{5,}" title="Must have at least 5 characters, including UPPER/lowercase letters and number" required/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="password">
                                    Password<span class="asterisk">*</span>
                                </label>
                            </td>
                            <td>
                                <input type="password" name="pword" id="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{5,}" title="Must have at least 5 characters, including UPPER/lowercase letters and number" required/>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <label for="confirmP">
                                    Confirm Password<span class="asterisk">*</span>
                                </label>
                            </td>
                            <td>
                                <input type="password" name="pwordConfirm" id="confirmP" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{5,}" title="Must be the same password as above" required/>
                            </td>
                        </tr>
                    </table>
                </fieldset>

                <br />
                <input type="submit" value="Sign Up"/>
            </form>

以下是JavaScript代码：

function confirmForm(form)
{
        if(!(form.first.value.match(/^[a-zA-Z]{2,}$/))) {
        alert("Invalid First Name");
        form.first.focus();
            return false;
    }

    if(!(form.last.value.match(/^[a-zA-Z]{2,}$/))) {
        alert("Invalid Last Name");
        form.last.focus();
        return false;
    }

    if(!(form.email.value.match(/^\w.*+@[a-z]+\.[a-z]{2,7}$/))) {
        alert("Invalid Email");
        form.email.focus();
        return false;
    }

    if(!(form.age.value.match(/^[1-9]{1,3}$/))){
        alert("Invalid Age");
        form.age.focus
        return false
    }

    if(!(form.user.value.match(/^\w{5,}$/))) {
        alert("Invalid Username");
        form.user.focus();
        return false;
    }

    if(!(form.pword.value.match(/^.\w{5,}$/))){
        alert("Invalid Password");
        form.pword.focus();
        return false;
    }

    if(!(form.pwordConfirm.value == form.pword.value)){
        alert("Password must be the same");
        form.pwordConfirm.focus();
        return false;
    }
    else {
        return true;
    }
}

Answer 1

您需要在confirmForm()标记上执行返回函数form。

id="signUp" onSubmit="return confirmForm(this);">
//-----use return here--^

还可以使用test代替match，它会在数字成功或失败时返回 true 或 false 。

var patt1 = /^[a-zA-Z]{2,}$/;
if(!(patt1.test(form.first.value)

emal验证模式也是错误的，从电子邮件模式中删除 *

应该是

/^\w.+\@+[a-z]+\.[a-z]{2,7}$/

而不是

/^\w.*+@[a-z]+\.[a-z]{2,7}$/

以下是完整的JSfiddle DEMO