jquery.validate.js 的 remote 后台驗證
之前已經有一篇關於jquery.validate.js驗證的文章，還不太理解的可以先看看：jQuery Validate 表單驗證(這篇文章只是介紹了一下如何實現前台驗證，並沒有涉及后台驗證remote方法)。
有時候我們不僅僅對表單所錄入的信息進行驗證還需要將錄入的值與數據庫進行比較，這時我們就需要借助remote方法來實現。這篇文章就是介紹 jquery.validate.js的后台驗證的remote方法，准備工作，前台頁面：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<!
DOCTYPE
html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<
html
>
<
head
>
<
meta
http-equiv
=
"Content-Type"
content
=
"text/html; charset=UTF-8"
>
<
title
>Insert title here</
title
>
<
style
type
=
"text/css"
>
form{max-width:800px; margin:0 auto;}
form label{display:inline-block;width:150px; text-align:right;}
fieldset{margin-bottom:25px;}
legend {
border: 1px solid #77848D;
font-family: "Arial";
font-size: 14px;
margin-left: 15px;
padding: 5px;
}
em.error{font-weight:normal; color:red;}
</
style
>
<
script
src
=
"test/jquery.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"test/jquery.validate.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"test/jquery.validate.message_cn.js"
type
=
"text/javascript"
></
script
>
</
head
>
<
body
>
<
form
name
=
"test"
id
=
"testform"
method
=
"get"
action
=
"get.php"
>
<
fieldset
>
<
legend
title
=
"用戶注冊(User Register)"
>用戶注冊(User Login)</
legend
>
<
p
>
<
label
for
=
"name"
>用戶名：</
label
>
<
input
id
=
"name"
name
=
"name"
type
=
"text"
/>
</
p
>
<
p
>
<
label
for
=
"mail"
>郵箱:</
label
>
<
input
id
=
"mail"
name
=
"mail"
type
=
"password"
/>
</
p
>
<
p
>
<
label
for
=
"password"
>密碼：</
label
>
<
input
id
=
"password"
name
=
"password"
type
=
"password"
/>
</
p
>
<
p
>
<
label
for
=
"repassword"
>重復密碼：</
label
>
<
input
id
=
"repassword"
name
=
"repassword"
type
=
"password"
/>
</
p
>
<
p
>
<
label
for
=
"hash"
>邀請碼：</
label
>
<
input
id
=
"hash"
name
=
"hash"
type
=
"text"
/>
</
p
>
<
p
>
<
label
for
=
"sel"
>選擇：</
label
>
<
select
id
=
"sel"
name
=
"sel"
>
<
option
value
=
""
>請選擇</
option
>
<
option
value
=
"1"
>選擇1</
option
>
<
option
value
=
"2"
>選擇2</
option
>
<
option
value
=
"3"
>選擇3</
option
>
<
option
value
=
"4"
>選擇4</
option
>
</
select
>
</
p
>
<
p
>
<
label
for
=
"type"
>用戶類型：</
label
>
<
span
><
input
name
=
"type"
type
=
"radio"
value
=
"1"
/>類型1</
span
>
<
span
><
input
name
=
"type"
type
=
"radio"
value
=
"2"
/>類型2</
span
>
<
span
><
input
name
=
"type"
type
=
"radio"
value
=
"3"
/>類型3</
span
>
</
p
>
<
p
>
<
label
for
=
"submit"
> </
label
>
<
input
class
=
"submit"
type
=
"submit"
value
=
"注冊"
/>
</
p
>
</
fieldset
>
</
form
>
</
body
>
</
html
>
|
要實現的效果：
由圖可知我們要准備三個遠程驗證的文件(這里只是做到這種效果，就不連接數據庫查找數據了，如果要和數據庫的數據進行匹配原理是一樣的，在這里就不贅述查找數據的方法了，相信程序員們都該掌握數據庫的操作才行。在這里我們直接定義一個變量來進行匹配)：
1.checkhash.php
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<?php
if
(
$_GET
)
{
$hash
=
$_GET
[
'hash'
];
if
(
$hash
==
'123456'
)
{
echo
'true'
;
}
else
{
echo
'false'
;
}
exit
();
}
|
2.checksel.php
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<?php
if
(
$_GET
)
{
$sel
=
$_GET
[
'sel'
];
if
(
$sel
== 2)
{
echo
'true'
;
}
else
{
echo
'false'
;
}
exit
();
}
|
3.changeusertype.php
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<?php
if
(
$_GET
)
{
$type
=
$_GET
[
'type'
];
if
(
$type
== 2)
{
echo
'true'
;
}
else
{
echo
'false'
;
}
exit
();
}
|
驗證代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
<
script
type
=
"text/javascript"
>
$(function(){
$("#testform").validate({
rules : {
name : {
required : true
},
password: {
required: true,
minlength: 5
},
repassword: {
required: true,
minlength: 5,
equalTo: "#password"
},
hash: {
required: true,
remote: 'checkhash.php'
},
sel: {
remote: 'checksel.php'
},
type: {
remote:{
url: "changeusertype.php",
type: "get",
dataType: 'json',
data: {
'type': function(){return $('input[name="type"]:checked').val();}
}
}
<
span
></
span
>}
},
messages : {
name : {
required : '必填'
},
password: {
required: '必填',
minlength: '最少5個字符'
},
repassword: {
required: '必填',
minlength: '最少5個字符',
<
span
></
span
>equalTo: '兩次輸入的密碼不一樣'
},
hash: {
required: '必填',
remote: '邀請碼不正確'
},
sel: {
remote: '選擇不正確'
},
type: {
remote: '類型不可更改'
}
},
focusInvalid: true,
/*指定錯誤信息位置*/
errorPlacement: function (error, element) {
error.appendTo(element.closest("p"));
},
//設置錯誤信息存放標簽
errorElement: "em",
submitHandler: function(form) {
}
});
})
</
script
>
|
預覽效果是這樣的：
這樣似乎已經達到了要求，但是有一個小問題當我們輸入正確的值里點擊提交出現了這樣的問題(邀請碼和選擇的驗證沒有問題，但是單選按鈕的出現了問題)：
這是為什么？查閱了一些資料，在驗證時會判斷之前有沒有驗證過，當有驗證過並有previousValue值時它就會忽略再次提交的值而是取上一次驗證結果顯示，有很多解決方法都是說更改源碼，其它可以不用，我們在提交表單之前先清空之前一次驗證綁定的previousValue值，這樣就解決問題了。我們在驗證方法之前加一個清空previousValue值的函數：
|
1
2
3
4
5
6
|
function
emptyValue()
{
if
($(
'input[name="type"]'
).data(
"previousValue"
))
$(
'input[name="type"]'
).data(
"previousValue"
).old =
null
;
return
true
;
}
|
在提交表單之前調用這個方法：
|
1
|
<
input
class
=
"submit"
onclick
=
"emptyValue()"
type
=
"submit"
value
=
"注冊"
/>
|
現在應該是這樣的效果了(選擇正確的用戶類型點擊提交應該可以通過驗證)：
這個問題是在工作時碰到的，糾結了好久是改源碼呢還是不改呢，最后找到了解決方法，在閑暇的時間整理了一下，現在貼出來以作參考，如果你有更好的方法也可以告訴我哦！