javascript - jquery validate - 可以更改提交的字段值吗？

Question

我有一个自定义方法

$.validator.addMethod("lettersandspaces", function(value, element) {
    var value = this.elementValue(element).replace(/\s+/g, ' ').trim();
    return this.optional(element) || /^[a-zA-Z][a-zA-Z\s]*$/i.test(value);
}, 'Your name may only contain letters');

这里我正在 trim 空白并仅用一个替换任何重复的空白。然后我进行验证以确保只有字母和空格。

是否可以将 trim 后的值与表单一起提交，而不是用户输入的内容？

Answer 1

使用submitHandler您可以在提交表单之前进行任何操作，(form.submit())

请参阅下面的工作片段

$.validator.addMethod("lettersandspaces", function(value, element) {
    var value = this.elementValue(element).replace(/\s+/g, ' ').trim();
    return this.optional(element) || /^[a-zA-Z][a-zA-Z\s]*$/i.test(value);
}, 'Your name may only contain letters');

$(document).ready(function () {
    $("#form").validate({
        rules: {
            "name": {
                required: true,
                minlength: 5,
                lettersandspaces: true
            },
            "age": {
                required: true,
            }
        },
        messages: {
            "name": {
                required: "Please, enter a name"
            },
            "age": {
                required: "Please, enter your age",
            }
        },
        submitHandler: function (form) { // for demo
            var newName  = $("#name").val().replace(/\s+/g, ' ').trim()
            $("#name").val(newName);
            $(form).valid();
            alert("Name = '"+newName+"'");
            
            // comment return and uncomment form.submit(
            return false;  //form.submit();
        }
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"></script>

<form id="form" method="post" action="#">
    <label for="name">Name :</label>
    <input type="text" name="name" id="name" /><br><br>
    <label for="age">Age :&nbsp;&nbsp;&nbsp;</label>
    <input type="age" name="age" id="age" /><br><br>
    <button type="submit">Submit</button>
</form>