使用jQuery Validate时非必填百分比字段始终触发验证求助

问题描述 #

使用jQuery Validate的addMethod自定义了percent验证规则，百分比字段并非必填，但该字段即使为空也会触发验证，导致表单无法提交。

原始代码 #

JS #

$(document).ready(function () {
  $.validator.addMethod("percent", function (value, element, param) {
    var parts = value.split(".");
    if (typeof parts[1] == "string" && (parts[1].length == 0 || parts[1].length > 2)) {
      return false;
    }

    var n = parseFloat(value);
    if (isNaN(n)) {
      return false;
    }

    if (n < 0 || n > 100) {
      return false;
    }

    return true;
  }, "Please enter valid percentage number");
    
    $("#form").validate({
        rules: {
            name: {
                required: true,
                minlength: 5
            },
            development_percentage: {
              percent: true
            }
        },
        messages: {
            "name": {
                required: "Please, enter Project Name"
            },

        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });

});

HTML #

<form id="form" method="post" action="#">
    <label for="name">Project Name</label>
    <input type="text" name="name" id="name" />
    <label for="percent">Percentage</label>
    <input type="text" name="development_percentage" />
    <button type="submit">Submit</button>
</form>

CSS #

body {
    padding: 20px;
}

label {
    display: block;
}

input.error {
    border: 1px solid red;
}

label.error {
    font-weight: normal;
    color: red;
}

button {
    display: block;
    margin-top: 20px;
}

问题原因 #

自定义的percent验证方法未处理空值场景：当输入框为空时，value是空字符串，执行parseFloat(value)会得到NaN，触发isNaN(n)判断返回false，导致空值被判定为验证不通过。

解决方案 #

在自定义验证方法的最开头添加空值判断：如果字段值为空，直接返回true（非必填字段的空值应视为有效）。同时可将提示信息改为中文，提升友好性。

修改后的JS代码 #

$(document).ready(function () {
  $.validator.addMethod("percent", function (value, element, param) {
    // 空值直接通过验证（非必填字段）
    if (!value) {
      return true;
    }
    var parts = value.split(".");
    if (typeof parts[1] == "string" && (parts[1].length == 0 || parts[1].length > 2)) {
      return false;
    }

    var n = parseFloat(value);
    if (isNaN(n)) {
      return false;
    }

    if (n < 0 || n > 100) {
      return false;
    }

    return true;
  }, "请输入有效的百分比数值");
    
    $("#form").validate({
        rules: {
            name: {
                required: true,
                minlength: 5
            },
            development_percentage: {
              percent: true
            }
        },
        messages: {
            "name": {
                required: "请输入项目名称"
            },
            "development_percentage": {
                percent: "请输入有效的百分比数值"
            }
        },
        submitHandler: function (form) { // 演示用
            alert('表单验证通过'); // 演示用
            return false; // 演示用
        }
    });

});

内容的提问来源于stack exchange，提问作者sg552