JQueryプラグインvalidateのRemote使用
14749 ワード
JQuery.validate.jsはフォーム検証でよく使われているので、初心者で、その中のRemoteの使用について説明します.
1.基本的な説明
JQueryは主にDOMツリーとCSSツリーの検索と後の操作の一連の方法に用いられ、JQuery.validate.jsはJQueryに対するプラグインであり、JQueryのある特殊なシーンでの拡張と考えられ、Validateはフォーム検証に提供される拡張である.
2.シーン解釈
ユーザがユーザ登録を行う場合は,ユーザ名が存在するか否かを非同期で判断し,提示情報を与える.
3.ケーススタディ
HtmlとJavaScriptを組み合わせたスクリプト.
バックグラウンドPHPコードBaseFunction.php
1.基本的な説明
JQueryは主にDOMツリーとCSSツリーの検索と後の操作の一連の方法に用いられ、JQuery.validate.jsはJQueryに対するプラグインであり、JQueryのある特殊なシーンでの拡張と考えられ、Validateはフォーム検証に提供される拡張である.
2.シーン解釈
ユーザがユーザ登録を行う場合は,ユーザ名が存在するか否かを非同期で判断し,提示情報を与える.
3.ケーススタディ
HtmlとJavaScriptを組み合わせたスクリプト.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <head>
5 <script src="../includes/libraries/javascript/jquery.js" type="text/javascript" charset="utf-8" ></script>
6 <script src="../includes/libraries/javascript/jquery.plugins/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
7
8 <script type="text/javascript">
9 $().ready(function() {
10 $("#signupForm").validate({
11
12 debug: false,
13 onkeyup:false,
14 /* */
15 //ignore: ".ignore",
16
17 /*
18 Default:
19 errorPlacement: function(error, element) {
20 error.appendTo(element.parent());
21 }
22 error.appendTo(element.parent());
23 */
24 /*
25 submitHandle: function(form){
26 alert("submited!");
27 form.submit();},
28 */
29 rules: {
30 /*
31 firstname: {
32 required: function(){ return true;}},
33 */
34
35 firstname: {
36 required: true,
37 remote: {
38 url: "Learn.php",
39 type: "post",
40 //DataType: "json",
41 data: {
42 firstname: function(){
43 return $("#firstname").val();
44 }
45 }}},
46
47 phonenum: {
48 required: true,
49 digits: true,
50 rangelength: [11,11]},
51
52 email: {
53 required: true,
54 email: true},
55
56 password: {
57 required: true,
58 minlength: 5},
59
60 confirm_password: {
61 required: true,
62 minlength: 5,
63 equalTo: "#password"}
64 },
65
66 messages: {
67 firstname: {
68 required: " ",
69 remote: " ，remote"},
70
71 phonenum: {
72 required: " ",
73 digits: " ， ",
74 rangelength: " "},
75
76 email: {
77 required: " Email ",
78 email: " email "},
79
80 password: {
81 required: " ",
82 minlength: jQuery.format(" {0} ")},
83
84 confirm_password: {
85 required: " ",
86 minlength: " 5 ",
87 equalTo: " "}
88 },
89
90 submitHandler: function(form){
91 alert(" ");}
92
93 });
94 });
95 </script>
96
97 </head>
98
99 <body>
100
101
102 <form id="signupForm" method="post" action="">
103 <p>
104 <label for="firstname"> </label>
105 <input id="firstname" name="firstname" />
106 </p>
107
108 <p>
109 <label for="phonenum"> </label>
110 <input id="phonenum" name="phonenum" />
111 </p>
112
113 <p>
114 <label for="email"> </label>
115 <input id="email" name="email" />
116 </p>
117
118 <p>
119 <label for="password"> </label>
120 <input id="password" name="password" type="password" />
121 </p>
122
123 <p>
124 <label for="confirm_password"> </label>
125 <input id="confirm_password" name="confirm_password" type="password" />
126 </p>
127
128 <p>
129 <input class="submit" type="submit" value=" "/>
130 </p>
131
132 </form>
133 </body>
134 </html>バックグラウンドPHPコードBaseFunction.php
<?php
function WriteLog($msg)
{
$filename = dirname(__FILE__) ."\\Debug.log";
$handler = null;
if (($handler = fopen($filename, 'ab+')) !== false)
{
fwrite($handler, "
".'['.date('Y-m-d H:i:s').']'."\t".$msg);
fclose($handler);
}
}
function CheckUser($UserName) {
if( $_REQUEST[$UserName] == 'php' ){
exit("false");
}
else{
exit("true");
}
}
?><?php
require("BaseFunction.php");
CheckUser('firstname');
?>