Bug solution for jQuery Validation plug-in remote verification method_jquery

But the strange thing is that it feels a bit weird when I use it recently, because it seems a bit rigid, the adaptability of existing functions is not strong enough, and there is even a strange bug. It is normal for any project to have bugs, but this bug is actually a function that has been recorded in the document but has not been implemented, which is a bit unreasonable. This problem lies in the remote verification method. Fortunately, it is very easy to modify. I will record it here for future reference.
During form verification, sometimes it is necessary to send an AJAX request to the server for judgment, such as checking whether the user name exists when the user registers. The jQuery Validation plugin provides a remote way to achieve this. For example, I can validate the form like this:

Copy code The code is as follows:

In this way, jQuery Validation will request a URL such as "/account/verify?userName=jeffz" to obtain true/false. Unfortunately, when we use ASP.NET MVC, we often write the input name in a specific form in order to take advantage of the powerful binding function of DefaultModelBinder. For example:

At the same time, the parameter name of the Action method we use for verification may also be different:

Copy code The code is as follows:

public ActionResult Verify(string name) { ... }

According to the document description, at this time we should write like this:

Copy code The code is as follows:

$('#regForm').validate({
'rules': {
'user.Name': {
'remote': {
url: '/account/verify',
data: {
name: function( ) { return $("#userName").val(); }
}}}}});

However, from the actual effect, jQuery is still requesting "/account /verify?user.Name=jeffz", I am puzzled. After three confirmations, I had to turn to the jquery.validation.js source code. I almost fainted after reading it:

Copy the code The code is as follows:

remote: function(value, element, param) {
if ( this.optional(element) )
return "dependency-mismatch";
...
param = typeof param == "string" && {url:param} || param;
if ( previous.old !== value ) {
previous.old = value;
var validator = this;
this.startRequest(element);
var data = {};
data[element.name] = value; // data should still be based on element.name?
$.ajax($.extend(true, {
url: param,
mode: "abort",
port: "validate" element.name,
dataType: "json" ,
data: data,
success: function(response) {
...

I am very strange, I don’t know why this is done, this does not have the specified effect at all The role of the parameter name. Then, change it:

Copy the code The code is as follows:

remote: function(value, element, param) {
if (this.optional(element))
return "dependency-mismatch";
...
param = typeof param == "string" && {url:param} || param;
if (previous.old !== value) {
previous.old = value;
var validator = this;
this.startRequest(element);
var data = {};
data[element.name] = value;
$.ajax($.extend(true, {
// url: param,
url: param .url,
mode: "abort",
port: "validate" element.name,
dataType: "json",
// data: data,
data: param.data || data,
success: function(response) {
...

Just modify two places and the problem will be solved. Unfortunately, jquery.validate.min.js is similar. The files can only be compressed by myself.
It is really puzzling that such a problem occurs.