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这个规则来进行校验)