jquery validationEngine的使用

1.引入文件

<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/js/jqueryInline1.7/jquery.validationEngine-cn.js" type="text/javascript"></script>
<script src="/js/jqueryInline1.7/jquery.validationEngine.js" type="text/javascript"></script>
<link rel="stylesheet" href="/js/jqueryInline1.7/validationEngine.jquery.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="/js/jqueryInline1.7/template.css" type="text/css" media="screen" title="no title" charset="utf-8" />

2.啟動

//驗證
$("#form1").validationEngine();

//提交
$("#submit").click(function(){
$("#form1").submit();
});

3.為元素添加驗證

添加一個

<input name="name" type="text" class="validate[required] input1 ml10" value="<!--{$aData.name}-->">

添加多個

<input id="time" name="time" type="text" class="validate[required,custom[date]] input1 ml10 mh_date" value="<!--{$aData.time}-->">

添加自定義

 

function validate2fields(){
            if($("#firstname").val() =="" ||  $("#lastname").val() == ""){
                return false;
            }else{
                return true;
            }
        }

"validate2fields":{
                        "nname":"validate2fields",
                        "alertText":"* 你必須有姓和名"}    

<input value=""  class="validate[required,custom[onlyLetter],funcCall[validate2fields],length[0,100]] text-input" type="text" id="lastname" name="lastname"  />

4.效果

下面看看，提示語的代碼

(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":"* 這個用戶已經存在"},    
                    "ajaxName":{
                        "file":"validateUser.php",
                        "alertText":"* 這個名字已經被使用",
                        "alertTextOk":"* 這個名字是可以的",    
                        "alertTextLoad":"* 加載中，請等待"},        
                    "onlyLetter":{
                        "regex":"/^[a-zA-Z\ \']+$/",
                        "alertText":"* 只允許輸入字母"},
                    "validate2fields":{
                        "nname":"validate2fields",
                        "alertText":"* 你必須有姓和名"}    
                    }    
                    
        }
    }
})(jQuery);

$(document).ready(function() {    
    $.validationEngineLanguage.newLang()
});

還有一些ajax的調用，繼續探討。