星期日, 10月 10, 2010

jQuery Plugin - form validation


下載及介紹請參考官網


因為資料太少了
所以用法是看原始碼才懂的...=~=
趕快記在這邊以免忘記!


原本的提示是英文的,自己簡單翻譯成中文

jquery.validationEngine-tw.js
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
(function($) {
$.fn.validationEngineLanguage = function() {};
$.validationEngineLanguage = {
newLang: function() {
$.validationEngineLanguage.allRules = { "required":{ // Add your regex rules here, you can take telephone as an example
"regex":"none",
"alertText":"* 需要填入此欄位",
"alertTextCheckboxMultiple":"* 請選擇一個選項",
"alertTextCheckboxe":"* 請選擇一個選項"},
"length":{
"regex":"none",
"alertText":"* 請填入 ",
"alertText2":" 到 ",
"alertText3": " 個字"},
"maxCheckbox":{
"regex":"none",
"alertText":"* 超過最大允許的字元數"},
"minCheckbox":{
"regex":"none",
"alertText":"* 請選擇選項 ",
"alertText2":" "},
"confirm":{
"regex":"none",
"alertText":"* 兩次輸入的值不相同"},
"telephone":{
"regex":"/^[0-9\-\(\)\ ]+$/",
"alertText":"* 錯誤的電話號碼"},
"email":{
"regex":"/^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/",
"alertText":"* 錯誤的電子郵件"},
"date":{
                         "regex":"/^[0-9]{4}\-\[0-9]{1,2}\-\[0-9]{1,2}$/",
                         "alertText":"* 錯誤的日期, 請以 YYYY-MM-DD 的格式輸入"},
"onlyNumber":{
"regex":"/^[0-9\ ]+$/",
"alertText":"* 只允許數字"},
"noSpecialCaracters":{
"regex":"/^[0-9a-zA-Z]+$/",
"alertText":"* 不允許特殊字元"},
"ajaxUser":{
"file":"validateUser.php",
"extraData":"name=eric",
"alertTextOk":"* 此使用者已通過驗證",
"alertTextLoad":"* 讀取中.. 請稍後",
"alertText":"* This user is already taken"},
"ajaxName":{
"file":"validateUser.php",
"alertText":"* This name is already taken",
"alertTextOk":"* This name is available",
"alertTextLoad":"* Loading, please wait"},
"onlyLetter":{
"regex":"/^[a-zA-Z\ \']+$/",
"alertText":"* 只允許輸入英文字母"},
"validate2fields":{
     "nname":"validate2fields",
     "alertText":"* 需要輸入姓和名"}
}
}
}
})(jQuery);
$(document).ready(function() {
$.validationEngineLanguage.newLang()
});

接著

<script type="text/javascript" src="js/jquery.validationEngine-tw.js"></script>
<script type="text/javascript" src="js/jquery.validationEngine.js"></script>



原本就不打算用內附的ajax
然而只有在form送出的時候,才會觸發驗證
我使用div的話就沒辦法

所以改用其他方法

送出:

1
2
3
4
5
6
7
8
9
10
11
function SubmitLoginForm()
{
$('#LoginForm').validationEngine({returnIsValid:true,promptPosition:"centerRight"});//.loadValidation('#LoginForm');
rs = $.validationEngine.isError;
if(rs == false)
{
$('#LoginForm').dialog("close");//*/
$.post('loginCheck.php',{ 'user': $('#user').val(), 'pass': $('#pass').val() }, function(data){ alert(data); });
}
else return false;
}


清除:

1
2
3
4
5
function ClearLoginForm()
{
$('#user').val("");
$('#pass').val("");
}

其他資料
http://www.36ria.com/1645

沒有留言:

張貼留言