php - jquery 比较两个字段值

Question

嗨，我有一个注册表单，它有六个输入字段

html代码

<div id="signup">
    <form  id="suform" method="POST" action="signup/newUser">
        <p>
            <label>Frist Name</label>
            <input type="text" name="fName"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Last Name</label>
            <input type="text" name="lName"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Email</label>
            <input type="text" name="Email"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Mobile Number</label>
            <input type="text" name="MNumber"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Password</label>
            <input type="password" name="Password"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <label>Re Password</label>
            <input type="password" name="RePassword"/>
            <span class="errorMessage"></span>
        </p>
        <p>
            <input type="submit" class="button" value="sign up"/>
        </p>
    </form>
</div>

当用户单击注册按钮时，首先我确保没有输入字段为空，如果我发现任何输入字段为空，那么我会在该输入字段中打印一条错误消息，

j查询代码

$(document).ready(function(){
    $('#suform').on('submit', function(e){
        e.preventDefault();
        var errorCount = 0;
        $('span.errorMessage').text(''); // reset all error mesaage
        $('input').each(function(){
            var $this = $(this);
            if($this.val() === ''){
                var error = 'Please fill ' + $this.prev('label').text(); // take the input field from label
                $this.next('span').text(error);
                errorCount = errorCount + 1;   
            }
        });
        if(errorCount === 0){
            $(this)[0].submit(); // submit form if no error
        }
    });
});

我希望用户输入他的密码两次以确保他保存它

我的问题是如何检查两个密码输入字段是否相等，如果不相等，我想在这两个输入字段的左侧打印一条消息错误

code

Answer 1

检查字段并显示错误没有 jQuery:

if (document.forms[0].Password.value != document.forms[0].RePassword.value) {
    document.forms[0].Password.parentNode.getElementsByClassName("errorMessage")[0].innerHTML="Passwords aren't the same!";
    document.forms[0].RePassword.parentNode.getElementsByClassName("errorMessage")[0].innerHTML="Passwords aren't the same!";
}

如果页面上有多个表单(即使只是一个搜索表单)，您需要相应地调整 document.forms[0]。

要在您的表单中使用此代码，请将 onsubmit="return checkForm();" 添加到表单标记中，例如:

<form  id="suform" method="POST" action="signup/newUser" onsubmit="return checkForm();">

然后，在您的脚本标记中，创建函数 checkCode，如果出现问题，该函数将返回 false(换句话说，停止提交表单):

<script type="text/javascript">
<!--
    function checkCode() {
        if (document.forms[0].Password.value != document.forms[0].RePassword.value) {
            document.forms[0].Password.parentNode.getElementsByClassName("errorMessage")[0].innerHTML="Passwords aren't the same!";
            document.forms[0].RePassword.parentNode.getElementsByClassName("errorMessage")[0].innerHTML="Passwords aren't the same!";
            return false;
        }
    }
//-->
</script>