【问题标题】：jquery compare two fields valuesjquery比较两个字段值
【发布时间】：2023-03-05 11:09:01
【问题描述】：

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

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>

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

jquery 代码

$(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

【问题讨论】：

为什么不用jquery validate插件
今天有10多人建议我使用它，但我真的没有时间学习jquery，我对jquery知之甚少:(
讨厌这样的事情，首先回答它有效，我什至没有得到 1 票！
对不起@infinity 但你的答案在哪里？
在这里查看我的解决方案：stackoverflow.com/a/10566234/464552 它包含检查空密码 pass1 != '' 所以如果两个密码都是空的，它会抛出一个错误

标签： php javascript jquery html css

【解决方案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>

【讨论】：

我知道你了，但是我有没有调用一个 js 函数并将你的代码放入其中？
在表单上，添加 onsubmit="return checkForm();"。在您的
酷，我用所有的实现细节和代码更新了帖子。

【解决方案2】：

我想这可能会起作用。

 var password= $('input[name="Password"]').val();
 var repass= $('input[name="RePassword"]').val();

 if(password!=repass){
  var error = 'Password not matching';
       $('input[name="RePassword"]').next('span').text(error);
       $('input[name="Password"]').next('span').text(error);
         errorCount = errorCount + 1;  
  }else if(password=="" || repass==""){
            if(password==""){
        var error = 'Please enter a password.';
       $('input[name="Password"]').next('span').text(error)
         errorCount = errorCount + 1;  
    }else{
           var error = 'Please enter a repassword.';
       $('input[name="RePassword"]').next('span').text(error)
         errorCount = errorCount + 1;  
  }
   }
   }else{
     continue;
    }

【讨论】：

你是一个人，是的，它有效:) :) 谢谢你，我会接受你的回答，真的谢谢你
这不是可靠的解决方案，检查有问题。
感谢伙伴，乐于助人。 =) @infinity，你能建议什么是错的，因为我是一个新手，还在学习。这会很有帮助。
您需要检查空密码值，例如：password != ''

【解决方案3】：

你可以这样做：

var pass1 = $('input[name=Password]').val();
var pass2 = $('input[name=RePassword]').val();
if(pass1 != '' && pass1 != pass2) {
    //show error
    var error = 'Password confirmation doesn\'t match.';
    $('input[name=Password]').next('span').text(error);
    $('input[name=RePassword]').next('span').text(error);
    errorCount = errorCount + 1;   
}

标签中的“for”属性使用如下：

<label for="myPasswordField">
    <input type="password" id="myPasswordField" name="Password" />
</label>

因此，当您单击标签时，会将焦点设置在具有该 ID 属性的相关元素上。

要检查电话字段是否为您需要的号码：

var mobile = $('input[name=MNumber]').val();
if(isNaN(parseFloat(mobile )) && !isFinite(mobile )) {
    var error = 'Mobile number incorect.';
    $('input[name=MNumber]').next('span').text(error);
    errorCount = errorCount + 1; 
}

【讨论】：

我还建议威廉为他的每个表单输入分配一个 id，因为这样他的标签可以有一个指向每个表单的 for 属性。
但是如何在两个密码输入栏左侧打印错误信息？
标签中的属性是什么？
好的，谢谢你，真的谢谢你，我在 1 分钟前得到了完全相同的答案 :)，我真的很感谢你
这将验证一些格式：07888999555 但如果它有空格它将失败

【解决方案4】：

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


if ( $("input[type=password][name='Password']").val() == $("input[type=text][name='RePassword']").val(){
    //Do this
}

【讨论】：

是的，你是对的，但是如何在每个密码输入字段的左侧打印错误消息？作为我的演示

【解决方案5】：

这样的？ http://jsfiddle.net/K5CMC/

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;   
            }else if($this.attr('id') === 'Password'){
                //compare the two fields
                if($('#Password').val() !== $('#RePassword')){
                    //they don't match, do stuff

                }
            }

【讨论】：

检查了 jsFiddle？它在那里工作......用警报更新了它；当'不相等时，警报会显示。 jsfiddle.net/K5CMC/2
不客气。仔细查看已给出的所有解决方案。我的建议：结合最好的

【解决方案6】：

你可以这样做Demo on JsFiddle

$(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;   
            }
            else
            if($(this).attr('name') == "RePassword")
                if($('input[name=Password]').val() != $(this).val())
                    alert("must have same password");
        });
        if(errorCount === 0){
            $(this)[0].submit(); // submit form if no error
        }
    });
});

【讨论】：

【解决方案7】：

 $(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($('input[name="Password"]').val() != $('input[name="RePassword"]').val())
        {
            var error = 'Password not match'; // take the input field from label
            $('input[name="RePassword"]').next('span').text(error);
            errorCount = errorCount + 1;   
        }
        if(errorCount === 0){
            $(this)[0].submit(); // submit form if no error
        }
    });
});

【讨论】：