jquery 验证插件 - 仅当字段之一不为空时才验证

Question

我应该能够在不更改密码的情况下保存用户名。并且仅当当前密码不为空时才验证 #frmMyprofile。如何做到这一点？

Javascript 验证代码：

$('#frmMyProfile').validate({
        rules: {
            "user[current_password]": "required",
            "user[password]": {
                required: true,
                minlength: 6
            },
            "user[password_confirmation]": {
                required: true,
                minlength: 6,
                equalTo: "#user_password"
            }
        },
        messages: {
            "user[current_password]": "Please enter your current password",
            "user[password]": {
                required: "Please enter new password",
                minlength: "Please enter at least 6 characters"
            },
            "user[password_confirmation]": {
                required: "Please enter confirm password",
                equalTo: "Please enter the same value as the new password."
            }
        }
});

HTML： 我应该只能保存用户名或密码或两者都保存。如果当前密码不为空，它应该只验证。

<form accept-charset="UTF-8" action="/users" class="form-stacked" id="frmMyProfile" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="?"><input name="_method" type="hidden" value="put"><input name="authenticity_token" type="hidden""></div>          <div class="form-horizontal">
                  <div class="form-row control-group">
                    <div class="input">
                      <label class="control-label" for="user_id">Email ID</label>
                      <div class="controls">
                        <input disabled="disabled" type="email" value="test+1@gmail.com">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-horizontal">
                  <div class="form-row control-group">
                    <div class="input">
                      <label class="control-label" for="user_name">User Name</label>
                      <div class="controls">
                        <input name="user[name]" type="text" value="test" class="valid">
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-horizontal">
                  <div class="form-row control-group">
                    <div class="input">
                      <label class="control-label" for="user_current_password">Current Password</label>
                      <div class="controls">
                        <input id="user_current_password" name="user[current_password]" size="30" type="password">
                      </div>
                    </div>
                  </div>
                  <div class="form-row control-group">
                    <div class="input">
                      <label class="control-label" for="user_password">New Password</label>
                      <div class="controls">
                        <input id="user_password" name="user[password]" size="30" type="password">
                      </div>
                    </div>
                  </div>
                  <div class="form-row control-group">
                    <div class="input">
                      <label class="control-label" for="user_password_confirmation">Confirm Password</label>
                      <div class="controls">
                        <input id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password">
                      </div>
                    </div>
                  </div>
                  <div class="form-row control-group">
                    <div class="input">
                      <label></label>
                    </div>
                    <div class="controls">
                      <input name="version" type="hidden" value="v2">
                      <button class="btn btn-primary qbol-button-save" type="submit">Save</button>
                      <button class="btn qbol-button-clear" type="reset">Clear</button>
                    </div>
                  </div>
                </div>
      </form>

Answer 1

尝试

function passwordRequired() {
    return $('#user_current_password').val().length > 0;
}
$('#frmMyProfile').validate({
    rules: {
        "user[current_password]": {
            required: function () {
                return $('#user_password').val().length > 0 || $('#user_password_confirmation').val().length > 0;;
            }
        },
        "user[password]": {
            required: passwordRequired,
            minlength: {
                param: 6,
                depends: passwordRequired
            }
        },
        "user[password_confirmation]": {
            required: passwordRequired,
            minlength: {
                param: 6,
                depends: passwordRequired
            },
            equalTo: {
                param: "#user_password",
                depends: passwordRequired
            }
        }
    },
    messages: {
        "user[current_password]": "Please enter your current password",
        "user[password]": {
            required: "Please enter new password",
            minlength: "Please enter at least 6 characters"
        },
        "user[password_confirmation]": {
            required: "Please enter confirm password",
            equalTo: "Please enter the same value as the new password."
        }
    }
});

演示：小提琴