JQuery驗證 - 如何在“遠程”方法中正確檢索表單字段值？

Question

使用jQuery驗證插件，我一直在嘗試檢索表單的輸入字段值，將其與一些url前綴連接以生成REST URL，然后通過remote方法向生成的URL發出GET請求。

下面是REST接口的方法（ 服務器端是java ）

@Path("/user")
public interface UserResource {

    @GET
    @Path("/registered/email/{value}")
    public boolean isRegistered(@PathParam("value") String value);
}

這是要驗證的輸入字段的樣子

<form id="registerForm" action="/register" method="POST">
    <input class="form-control" id="email" name="email" type="email" value='${email}' required/>
    ...
</form>

然后是jQuery驗證腳本;

$('body #registerForm').validate({
    rules : {
        'email': {
            required: true,
            email: true,
            remote: "/user/registered/email/" + $(this).find('#email').val()
        },
    },
    messages : {
        'email': {
            required: 'Please enter your email address',
            email: 'Please provide a valid email address',
            remote: 'Email has already been taken',
        },
    },
});

請注意傳遞給remote方法的值如何只是REST URL，因為根據http://jqueryvalidation.org/remote-method/ ，默認請求type是GET ...還要注意如何指定dataType和data ，因為這種情況不一定需要它們。

目標： ...現在，說用戶輸入的電子郵件是username@email.com我通常希望生成的URL看起來如下所示;

http://localhost:8080/user/registered/email/username@email.com

問題： ......但是這就是我得到的;

http://localhost:8080/user/registered/email/?email=username@email.com

問題： ...請注意url中的?email= before username@email.com ...我想知道為什么$(this).find('#email').val()的結果被串聯作為查詢param？...有人可以向我解釋為什么會這樣嗎？還有我如何解決這個問題？

謝謝。

Answer 1

問題 ：...請注意url中的?email= before username@email.com ...我想知道為什么$(this).find('#email').val()的結果被串聯作為查詢param？...有人可以向我解釋為什么會這樣嗎？還有我如何解決這個問題？

默認情況下，查詢字符串?field="value"&field2="value2".... ，正是數據與GET請求一起發送的方式。 通常，您不會使用URL段在服務器端獲取此值，只需使用GET數組。

jQuery Validate插件的remote方法使用與jQuery .ajax()相同的選項。 參考.ajax()文檔 ......

數據
鍵入： PlainObject或String或Arra y
要發送到服務器的數據。 如果不是字符串 ， 它將轉換為查詢字符串。 它附加到GET請求的URL。 請參閱processData選項以防止此自動處理。 對象必須是鍵/值對。 如果value是一個數組，jQuery會根據傳統設置的值使用相同的鍵序列化多個值（如下所述）。

...

processData （默認值：true）
類型： 布爾值
默認情況下 ，作為對象傳入數據選項的數據（技術上，不是字符串）將被處理並轉換為查詢字符串 ，適合默認內容類型“application / x-www-form-urlencoded” 。 如果要發送DOMDocument或其他未處理的數據，請將此選項設置為false。

---

OP標題： JQuery驗證 - 如何在“遠程”方法中正確檢索表單字段值？

要獲取字段的值，只需選擇字段並將其附加到jQuery .val() 。 沒有必要使用$(this).find(...

$('#email').val()

---

試試這個...

rules : {
    'email': {
        required: true,
        email: true,
        remote: {
            url: "/user/registered/email/" + $('#email').val(),
            processData: false
        }
    },
},

Answer 2

目標：...現在，說用戶輸入的電子郵件是username@email.com我通常希望生成的URL看起來如下所示;

HTTP：//本地主機：8080/user/registered/email/username@email.com

問題：......但是這就是我得到的;

HTTP：//本地主機：8080 /用戶/注冊/電子郵件/ email=username@email.com

這里有兩個問題。 第一個是驗證方法在執行時解析url路徑 - 默認情況下不會動態地重新檢查它。 當它運行時，基本上在呈現表單時，您的電子郵件輸入字段為空。 因此，路徑被解析為' http：// localhost：8080 / user / registered / email / '+''（您開始使用的靜態字符串，與空輸入字段中的空字符串連接）。

第二個問題是jQuery.validate的遠程方法默認沿着驗證字段的'name'和'value'屬性作為查詢參數發送 - 當然，這不是REST的做事方式。 這些被展平為'？email = username @email.com'，它放在URL的其余部分之后，因為它在第一步中被解析。

要解決第一個問題，並構建一個REST值得路徑，您必須將URL構建包裝在一個函數中，每次在該輸入上請求驗證時都會執行該函數。

$('body #registerForm').validate({
    rules : {
        'email': {
            required: true,
            email: true,
            remote: function() {
                return '/user/registered/email/' + $('#email').val()
            }
        }
    }
});

這將產生一個正確的REST API URL，但它仍然會附加查詢字符串。 它看起來像這樣：

HTTP：//本地主機：8080/user/registered/email/username@email.com email=username@email.com

當然，這很難看，但是你的API很可能會默默地忽略查詢字符串，並按預期執行。

但是為了獲得更清晰，更RESTful的url，您需要重置ajax調用的data屬性。 您可以通過讓步驟1中的遠程函數返回一個對象，並將之前的url字符串作為url參數，並將數據參數設置為空字符串來實現。

$('body #registerForm').validate({
    rules : {
        'email': {
            required: true,
            email: true,
            remote: function() {
                return {
                    url: '/user/registered/email/' + $('#email').val(),
                    data: ''
                }
            }
        }
    }
});

這將產生所需的RESTful URL

HTTP：//本地主機：8080/user/registered/email/username@email.com

Answer 3

您正在向網站上的文件夾或位置發出獲取請求。 您需要提供執行檢查的腳本。 所以你的遠程網址應該是“/user/registered/email/check_email.php”。

此外，GET請求的整個想法是參數作為名稱/值對傳遞，在“？”之后添加到查詢字符串上。 分隔器。 請參閱http://www.w3schools.com/tags/ref_httpmethods.asp 。 您沒有提供實際的遠程腳本，也沒有為您的值提供參數名稱，因此您只需獲取網址+“？” +你的價值。

最后，我建議你使用POST方法。 在您提供鏈接的資源中，請查看第二個示例。 它向您展示了如何指定POST。

這一切都有意義嗎？

Answer 4

我使用此代碼來解決REST服務問題：

$("#mailingAddress").rules("add", {
    required: true,
    remote: function () { 
        var r = {
            url: "/Api/Address/ValidateAddressSimple/" + $("#mailingAddress").val(),
            type: "post",
            cache: false,
            dataFilter: function (response)
            {
                return response;
            }
        };
        return r;
    },
    messages: {
        remote: "* not valid"
    }
});

取自這篇文章： https ： //stackoverflow.com/a/22467664