0

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

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

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

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

代码

4

7 回答 7

3

检查字段并在没有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>
于 2012-05-12T18:16:08.837 回答
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;
    }
于 2012-05-12T18:18:12.730 回答
1 
 $(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
        }
    });
});
于 2012-05-12T18:27:45.260 回答
1

你可以这样做：

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; 
}
于 2012-05-12T18:13:00.963 回答
1

像这样的东西？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

                }
            }
于 2012-05-12T18:17:11.743 回答
1

你可以像JsFiddle 上的这个 Demo 那样做

$(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
        }
    });
});​
于 2012-05-12T18:25:23.460 回答
1 
    <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
}
于 2012-05-12T18:14:03.410 回答