Joomla表单校验

Joomla的表单验证包括客户端和服务端。服务器端是必须要有的，这样能够确保你的数据是经过校验的，因为用户端的数据总是不可信的。客户端校验虽然不能够百分百的保证数据的有效性，但是它对于改善用户体验是非常有帮助的。因此，我们强烈建议你将两端都实现校验。

客户端校验

基本的理论

客户端的校验是通过javascript脚本来实现的，当用户在输入框中输入数据的时候会触发校验（一般是响应onblur事件，当输入框失去焦点时）。为了让系统知道哪一个字段需要被校验，你需要在你的输入框中增加两个类 required and validate-[xxx](其中[XXX]代表了joomla系统内置或者用户自定义的校验规则。如：validate-numeric)

具体的实施

在Joomla1.5和后续的版本中实现了JS校验系统（在joomla中一个系统通常被称为一个行为，英文为behavior），校验系统在表单被提交之前执行JS校验，校验系统依赖validate.js文件，在j3.2版本之前，validate.js是基于mootools框架实现的，在J3.2之后，validate.js是基于jQuery实现的。

STEP 1:加载validate.js

为了让系统加载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系统默认支持的校验类如下：

• required   必须
• validate-username  校验用户名
• validate-password  校验密码
• validate-numeric    校验数字
• validate-email       校验邮件地址
• validate-[custom] -> custom defined - 自定义校验方法

STEP 4:在提交按钮上添加validate类

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

 通过在提交按钮上加validate类，当表单提交的时候会首先进行整个表单的所有字段的验证，只有当验证通过后才允许提交。

自定义验证规则

当系统自带的验证方法不满足需要的时候，需要我们自定义一个验证规则。定义一个自定义验证规则的步骤如下：

STEP 1:为该验证规则定义一个名字。如 phone_no (验证手机号)

STEP 2:在字段中使用这个规则。

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

STEP 3:在JS中实现这个验证规则。

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);
});
	});

 这样就实现了一个手机号的校验了。

关于校验不通过的样式定义

当校验不通过的时候，会在该表单字段的input和label都加上invalide类。通过指定invalide类的样式来突出验证不通过的字段以提醒用户注意。一个简单的实例如下：

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

关于前端校验系统的一些问题解决解决方法

如果同时使用 JHTML::_('behavior.formvalidation') 和 JToolbar ,当用户提交表单的时候并不会触发验证，因为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>

服务器端校验

当用户提交表单后系统会触发服务器端校验程序，如果校验失败，系统会将该字段校验失败的信息展示给用户。
为了让系统明白哪一个字段需要校验，你需要在HTML中进行标记。标记的方法是在输入框中增加 attributes required ("true" or "required") and validate (required表示该字段是必须的，validate用来指明校验的程序; 例如. validate="email" 那么就会调用email这个规则来进行校验)