Joomla表單校驗

Joomla的表單驗證包括客戶端和服務(wù)端。服務(wù)器端是必須要有的，這樣能夠確保你的數(shù)據(jù)是經(jīng)過校驗的，因為用戶端的數(shù)據(jù)總是不可信的?？蛻舳诵ｒ炿m然不能夠百分百的保證數(shù)據(jù)的有效性，但是它對于改善用戶體驗是非常有幫助的。因此，我們強烈建議你將兩端都實現(xiàn)校驗。

客戶端校驗

基本的理論

客戶端的校驗是通過javascript腳本來實現(xiàn)的，當(dāng)用戶在輸入框中輸入數(shù)據(jù)的時候會觸發(fā)校驗（一般是響應(yīng)onblur事件，當(dāng)輸入框失去焦點時）。為了讓系統(tǒng)知道哪一個字段需要被校驗，你需要在你的輸入框中增加兩個類 required and validate-[xxx](其中[XXX]代表了joomla系統(tǒng)內(nèi)置或者用戶自定義的校驗規(guī)則。如：validate-numeric)

具體的實施

在Joomla1.5和后續(xù)的版本中實現(xiàn)了JS校驗系統(tǒng)（在joomla中一個系統(tǒng)通常被稱為一個行為，英文為behavior），校驗系統(tǒng)在表單被提交之前執(zhí)行JS校驗，校驗系統(tǒng)依賴validate.js文件，在j3.2版本之前，validate.js是基于mootools框架實現(xiàn)的，在J3.2之后，validate.js是基于jQuery實現(xiàn)的。

STEP 1:加載validate.js

為了讓系統(tǒng)加載validate.js。joomla提供了一些方法封裝。

在1.5.2版本之前，使用如下代碼：

JHtmlBehavior::formvalidation();

在1.5.2到3.3.6版本，使用如下的代碼：

JHtml::_('behavior.formvalidation');

 在3.4以后，使用如下的代碼：

JHtml::_('behavior.formvalidator');

STEP 2:在需要校驗的form元素上添加form-validate類

<form class="form-validate"> ... </form>

 必須要在form元素上添加form-validate類，否則無法啟動校驗

STEP 3:在需要校驗的字段上添加校驗類

<field name="email" type="text" class="required validate-email" size="30" />

 其中required 和 validate-email就是校驗類。joomla系統(tǒng)默認支持的校驗類如下：

• required   必須
• validate-username  校驗用戶名
• validate-password  校驗密碼
• validate-numeric    校驗數(shù)字
• validate-email       校驗郵件地址
• validate-[custom] -> custom defined - 自定義校驗方法

STEP 4:在提交按鈕上添加validate類

<button type="submit" class="validate">提交</button>

 通過在提交按鈕上加validate類，當(dāng)表單提交的時候會首先進行整個表單的所有字段的驗證，只有當(dāng)驗證通過后才允許提交。

自定義驗證規(guī)則

當(dāng)系統(tǒng)自帶的驗證方法不滿足需要的時候，需要我們自定義一個驗證規(guī)則。定義一個自定義驗證規(guī)則的步驟如下：

STEP 1:為該驗證規(guī)則定義一個名字。如 phone_no (驗證手機號)

STEP 2:在字段中使用這個規(guī)則。

<field name="phone" type="text" class=" validate-phone_no" size="30" />

STEP 3:在JS中實現(xiàn)這個驗證規(guī)則。

jQuery(document).ready(function(){
                document.formvalidator.setHandler("phone_no", function(value) {
                    regex=/^1[3|4|5|8][0-9]\d{4,8}$/;
                    return regex.test(value);
                });
            });

 這樣就實現(xiàn)了一個手機號的校驗了。

關(guān)于校驗不通過的樣式定義

當(dāng)校驗不通過的時候，會在該表單字段的input和label都加上invalide類。通過指定invalide類的樣式來突出驗證不通過的字段以提醒用戶注意。一個簡單的實例如下：

.invalid {
    border-color: red !important;
}

關(guān)于前端校驗系統(tǒng)的一些問題解決解決方法

如果同時使用 JHTML::_('behavior.formvalidation') 和 JToolbar ,當(dāng)用戶提交表單的時候并不會觸發(fā)驗證，因為JToolbar的按鈕是通過JS提交表單的，并不提供onSubmit事件。為了解決這個問題，我們需要重寫JToolbar類的submitbutton方法。

一個示例代碼如下：

<script type="text/javascript">
/* Override joomla.javascript, as form-validation not work with ToolBar */
function submitbutton(pressbutton) {
    if (pressbutton == 'cancel') {
        submitform(pressbutton);
    }else{
        var f = document.adminForm;
        if (document.formvalidator.isValid(f)) {
            f.check.value='<?php echo JSession::getFormToken(); ?>'; //send token
            submitform(pressbutton);    
        }
        else {
            var msg = new Array();
            msg.push('Invalid input, please verify again!');
            if ($('title').hasClass('invalid')) {
                msg.push('<?php echo JText::_('COM_JONGMAN_ERROR_SCHEDULE_TITLE_IS_REQUIRED')?>');    
            }
            if($('admin_email').hasClass('invalid')){
                msg.push('<?php echo JText::_('COM_JONGMAN_ERROR_INVALID_EMAIL')?>');
            }
            alert (msg.join('\n'));
        }
    }    
}
</script>

服務(wù)器端校驗

當(dāng)用戶提交表單后系統(tǒng)會觸發(fā)服務(wù)器端校驗程序，如果校驗失敗，系統(tǒng)會將該字段校驗失敗的信息展示給用戶。為了讓系統(tǒng)明白哪一個字段需要校驗，你需要在HTML中進行標(biāo)記。標(biāo)記的方法是在輸入框中增加 attributes required ("true" or "required") and validate (required表示該字段是必須的，validate用來指明校驗的程序; 例如. validate="email" 那么就會調(diào)用email這個規(guī)則來進行校驗)