Joomla表單校驗(yàn)

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

客戶端校驗(yàn)

基本的理論

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

具體的實(shí)施

在Joomla1.5和后續(xù)的版本中實(shí)現(xiàn)了JS校驗(yàn)系統(tǒng)（在joomla中一個(gè)系統(tǒng)通常被稱為一個(gè)行為，英文為behavior），校驗(yàn)系統(tǒng)在表單被提交之前執(zhí)行JS校驗(yàn)，校驗(yàn)系統(tǒng)依賴validate.js文件，在j3.2版本之前，validate.js是基于mootools框架實(shí)現(xiàn)的，在J3.2之后，validate.js是基于jQuery實(shí)現(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:在需要校驗(yàn)的form元素上添加form-validate類

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

 必須要在form元素上添加form-validate類，否則無法啟動(dòng)校驗(yàn)

STEP 3:在需要校驗(yàn)的字段上添加校驗(yàn)類

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

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

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

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

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

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

自定義驗(yàn)證規(guī)則

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

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

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

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

STEP 3:在JS中實(shí)現(xiàn)這個(gè)驗(yà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);
                });
            });

 這樣就實(shí)現(xiàn)了一個(gè)手機(jī)號的校驗(yàn)了。

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

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

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

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

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

一個(gè)示例代碼如下：

<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ù)器端校驗(yàn)

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