如何在jQuery验证中通过密码确认生成两条消息?

时间:2017-11-03 00:52:42

标签: javascript jquery jquery-validate

我的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://www.django-rest-framework.org/api-guide/requests/

如果用户输入密码:abcdef,然后点击按钮验证,则存在消息:“请确认您的密码”

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

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

这样的信息:“确认你的密码不一样”

所以有两条消息:

  1. 如果用户未输入密码确认,则会显示消息:“请确认您的密码”
  2. 如果用户输入密码确认,但与密码不一致,则显示消息:“确认密码不一样”
  3. 我该怎么办?

1 个答案:

答案 0 :(得分:0)

我认为这将涵盖您正在寻找的内容。每个输入不限于一条消息 - 您可以为每个输入设置一条消息。我在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());
});

我在密码中添加了必需的规则,因此单击“使用空白表单验证”会生成一条消息。我在确认中删除了minlength - 它只需要等于密码,并且它有一个minlength。密码太短有自己的消息,当密码足够长时,当确认字段为空或不等于密码时,您将收到不同的消息。你可以在这里看到它:http://jsfiddle.net/oscar11/fEZFB/609/