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

时间:2017-06-08 12:25:50

标签: javascript jquery jquery-validate

我有自定义方法

$.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');

这里我修剪空白并用只有一个替换任何重复的空格。然后我验证确保只有字母和空格。

是否可以使用表格而不是用户输入的内容提交剪裁value

2 个答案:

答案 0 :(得分:2)

使用submitHandler,您可以在提交表单之前采取任何措施,(form.submit())

请参阅beleow一个工作片段

$.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>

答案 1 :(得分:1)

以jquery的验证形式。如果要在验证之前更改值输入名称。试试看:

$('#form').validate({
    rules: {
        'name': {
            normalizer: function(){
                return $('#name').val().(/\s+/g, ' ').trim();
            }
        }
    }    
})