項目中經常會遇到需要后臺驗證問題,如用戶名、用戶賬號是否存在等。使用jQuery Validate插件可以使用remote校驗規則完成驗證。
示例:
一.基本用法
1.需要驗證的表單
<form id="registForm"> <input type="text" id="username" name="username"> </form>
2.js
使用remote校驗規則,最簡單粗暴的寫法是remote: url,此時請求的url后面自動拼接當前驗證的值,例如下面的寫法,請求的url為:xxx/checkUsername.do?username=test
// 導入jquery、validte庫略 $(function() { $.validator.setDefaults({ submitHandler: function(form) { // 驗證通過處理 ... } }); $("#registForm").validate({ rules: { username: { required: true, remote: "checkUsername.do" }, }, messages: { username: { required: "用戶名不能為空", remote: "用戶名已經存在" } } }); });
3.后臺(Spring MVC測試)
后臺響應只能輸出true或false,不能有其他數據,true:驗證通過,false:驗證失敗;設置返回類型為boolean或String都可以
(1).返回boolean
@RequestMapping("/checkUsername") public @ResponseBody boolean checkUsername(@RequestParam String username) { // 測試 return !"test".equals(username); }
(2).返回String
@RequestMapping("/checkUsername") public @ResponseBody String checkUsername(@RequestParam String username) { // 測試 return !"test".equals(username) ? "true" : "false"; }
二.其他用法
上面的用法不能滿足實際的需求,有時候會有需要提交其他參數、參數名和屬性名不一致或請求方式為POST的情況,寫法如下:
1.js
使用data選項,也就是jQuery的$.ajax({...})的寫法;
提交的數據需要通過函數返回值的方式,直接寫值有問題;
默認會提交當前驗證的值,也就是下例中的 username: xxx會被默認作為參數提交
.... username: { required: true, remote: { url: "checkUsername.do", type: "post", //數據發送方式 dataType: "json", //接受數據格式 data: { //要傳遞的數據 username: function() { return $("#username").val(); }, extra: function() { return "額外信息"; } } } }
2.后臺
限制了必須為POST方式請求
@RequestMapping(value = "/checkUsername", method = RequestMethod.POST) public @ResponseBody boolean checkUsername(User user, @RequestParam String extra) { // 測試 System.out.println(extra); return !"test".equals(user.getUsername()); }
參考文章:http://www.runoob.com/jquery/jquery-plugin-validate.html
以上這篇jQuery Validate插件ajax方式驗證輸入值的實例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com