如何在jQuery的密码确认中使两条消息生效？

Question

我的html代码是这样的：

<form class="validatedForm" id="commentForm" method="get" action="">
    <fieldset>
        <input name="password" id="password" />
        <input name="password_confirmation" />
    </fieldset>
</form>
<button>Validate</button>

我的用jquery验证的javascript代码验证如下：

jQuery('.validatedForm').validate({
    rules: {
        "password": {
            minlength: 6
        },
        "password_confirmation": {
            minlength: 6,
            equalTo : "#password"
        }
    },
      messages: {
            "password": 'Please enter a password, minimal 6 characters',
            "password_confirmation": 'Please confirm your password'
    },
});

演示和完整代码如下： http : //jsfiddle.net/oscar11/fEZFB/609/

如果用户输入密码： abcdef ，然后单击“验证”按钮，则出现消息：“请确认您的密码”

如果用户输入密码确认： ghijkl ，则显示消息：“请确认您的密码”

如果用户输入的密码确认不相同，我想更改消息

这样的消息：“确认您的密码不相同”

因此，存在两个消息：

1. 如果用户未输入密码确认，则消息：“请确认您的密码”
2. 如果用户输入密码确认，但与密码不同，则显示消息：“确认密码不相同”

我该怎么做？

Answer 1

我认为这将满足您的需求。 您不受限于每个输入一条消息-您可以为每个输入的每个规则设置一条消息。 我在您的HTML中添加了一个中断，以使其更具可读性。

<form class="validatedForm" id="commentForm" method="get" action="">
    <fieldset>
        <input name="password" id="password" /><br/>
        <input name="password_confirmation" id="password_confirmation" />
    </fieldset>
</form>
<button>Validate</button>

更新的脚本：

jQuery('.validatedForm').validate({
    rules: {
        "password": {
            minlength: 6,
            required: true
        },
        "password_confirmation": {
            equalTo: "#password"
        }
    },
      messages: {
            "password": {
            minLength: "Password must be at least 6 charachters",
            required: "Password is required."
        },
            "password_confirmation": {
            equalTo: "The password and confimation fields don't match"
        }
    },
});

$('button').click(function () {
    console.log($('.validatedForm').valid());
});

我在密码中添加了必需的规则，因此单击带有空白表格的验证会生成一条消息。 我在确认中删除了最小长度-它仅需要等于密码，并且具有最小长度。 密码太短会带有自己的消息，当密码足够长时，如果确认字段为空或不等于密码，则会收到另一条消息。 您可以在这里的小提琴中看到它： http : //jsfiddle.net/oscar11/fEZFB/609/