html代码

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>

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

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

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>

Answer 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;
    }

Answer 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; 
}

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

Answer 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

                }
            }

Answer 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
        }
    });
});

Answer 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
        }
    });
});

jquery比较两个字段值

html代码

jquery代码

7 个答案: