是否可以将 jquery.validate 错误代码写入本地存储？

Question

我不确定这是否可能。因此，我将把它介绍给任何在该领域具有知识的专业人士。是否可以将 jquery.validation 错误代码写入本地存储？我的大部分网站都使用 jquery.validation。如果用户输入了错误的电子邮件，则会弹出错误 "please put in a valid email"。如果用户刷新页面，错误的电子邮件仍然存在，但弹出错误不再存在。有没有专业人士知道这是否可行，如果可行我该怎么做？

我已成功获得验证码，可用于我的所有表单。但是，我不喜欢在没有适当知识的情况下操纵脚本的源代码。

    // validate signup form on keyup and submit
    $("#email_preference").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            username: {
                required: true,
                minlength: 2
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            my_email: {
                required: true,
                email: true
            },
            topic: {
                required: "#newsletter:checked",
                minlength: 2
            },
            agree: "required"
        },
        messages: {
            firstname: "Please enter your firstname",
            lastname: "Please enter your lastname",
            username: {
                required: "Please enter a username",
                minlength: "Your username must consist 
                of at least 2 characters"
            },
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at 
                least 5 characters long"
            },
            confirm_password: {
                required: "Please provide a password",
                minlength: "Your password must be at 
                least 5 characters long",
                equalTo: "Please enter the same 
                password as above"
            },
            my_email: "Please enter a<br>valid 
            email address",

            confirm_password: {
                required: "Please provide a password",
                minlength: "Your password must be at 
                least 5 characters long",
                equalTo: "Please enter the same 
                password as above"
            },
            agree: "Please accept our policy",
            topic: "Please select at least 2 topics"
        }
    });

我附上了我页面上的选项代码。该脚本的源代码太长，无法粘贴到此处。但是，这是脚本的 link。 https://jqueryvalidation.org/ 如果可能的话，我希望在页面上出现弹出错误时，将错误电子邮件中的错误代码写入本地存储，这样它就会在可能的页面刷新后出现。如果电子邮件已更正，我希望删除 localstorage 条目。对于少数知道如何做到这一点的人，我提前感谢你。

Answer 1

您可以使用JSON.stringify和JSON.parse存储到localStorage。

在 SO 中不起作用，您需要在您的环境中尝试以下操作。

let codes = {
  rules: {
    firstname: "required",
    lastname: "required",
    username: {
      required: true,
      minlength: 2
    }
    agree: "required"
  },
  messages: {
    firstname: "Please enter your firstname",
    lastname: "Please enter your lastname",
    password: {
      required: "Please provide a password",
      minlength: "Your password must be at least 5 characters long "
    }
  }
};

localStorage.setItem('your_codes', JSON.stringify(codes));
console.log(JSON.parse(localStorage.getItem('your_codes')));

Answer 2

转到文档并查看 the showErrors option。此函数包含一个 errorMap 和 errorList，您可以将其写入本地存储。

$("#email_preference").validate({
    rules: {
        ....
    },
    messages: {
        ....
    },
    showErrors: function(errorMap, errorList) {
        // insert your function here to write the errorMap and errorList into local storage
        // errorMap = Key/value pairs, where the key refers to the name of an input field, values the message to be displayed for that input.
        // errorList =  An array for all currently validated elements. Contains objects with the following two properties: message and element

        localStorage.setItem('Error_Map', JSON.stringify(errorMap));
        localStorage.setItem('Error_List', JSON.stringify(errorList));

        // the following line inserts the default inline error messages back into the form.
        this.defaultShowErrors();
    }
});

演示: jsfiddle.net/4o50mLty/

EDIT：您可以使用 submitHandler 或 success 回调来实现类似的功能，当形式 and/or 元素有效。但是，如果您检查上面演示中的控制台，您会看到本地存储在验证表单字段时被自动清除。

再一次，看看所有 available options in the docs。

Answer 3

jquery.validate 的作者 (Brahim Arkni.) 建议我使用突出显示功能以便在触发错误时设置本地存储项目。使用突出显示的好处是您可以使用取消突出显示来触发本地存储项的删除。所以执行这部分的代码（由 Brahim 提供）是给定的。

//'''
highlight: function(element, errorClass, validClass) {
        // Check for your email input
            if (element.type === "email" && element.name === "input_name") {
            // `errorMap` is an internal Key/value store, where the key refers to the
            // name of an input field, values the message to be displayed for that
            // input.
            localStorage.setItem("email_error", this.errorMap[element.name]);
            }

            // Call the default highlight to keep the original behaviour
            $.validator.defaults.highlight(element, errorClass, validClass);
        },
          unhighlight: function(element, errorClass, validClass) {
            // Check for your email input
            if (element.type === "email" && element.name === "input_name") {
              localStorage.removeItem("email_error");
            }

现在，为了在页面刷新或浏览器崩溃时调用代码，您可以使用此代码。

    // Show the error at startup if it was already set
    if (localStorage.hasOwnProperty("email_error")) {
        $("div_holding_input").after('<span id="id_given_by_jquery.validate-error" class="error">Please enter a<br>valid email address</span>');
    };
    $('#input_id').click(function() {            
        $("#id_given_by_jquery.validate-error").remove();
        localStorage.removeItem("email_error");
    });

您正在输入 jquery.validate 生成的整个跨度以在页面刷新时显示。一旦用户再次开始输入，您将需要删除整个跨度和本地存储，因为 jquery.validate 将初始化并向页面添加第二个错误。我不是专家，但我确实致力于此以使其正常运行。如果有人可以使代码更好，我一定会很乐意学习。谢谢

是否可以将 jquery.validate 错误代码写入本地存储？

Is it possible to write jquery.validate error codes into localstorage?

jquery

jquery-validate