jQuery Plugin - form validation

下載及介紹請參考官網

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

因為資料太少了

所以用法是看原始碼才懂的...=~=

趕快記在這邊以免忘記!

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

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