在上一节中，我们介绍了给前台添加验证的理论，现在我们来真正的在前台添加一个验证。

 

我打算给我的留言板组件的标题栏加上前台验证，如果前台验证不能通过，则不能提交表单。

看一下没有验证的效果：

没有验证的情况，输入222222是没有问题

 

有验证的情况

有验证的情况下输入2222就显示红色的外框，提示输入非法。

那么输入怎样才能算合格的标题呢？

先来看一下验证的大js代码：

/**
 *	valedate js for item.xml form
 */
 
 window.addEvent('domready' ,function(){
		document.formvalidator.setHandler('message_subject',function(value){
			//regex=//;
			// return regex.test(value);
			return (value == '111');
		});
 
 });

 从代码中，我们可以看到，如果message_subject中的value只有等于111的情况下才通过验证。所以输入2222显示红色的外框。

看一下通过验证的情况：

 

看了效果图。下面来看一下具体的代码实现。

按照上一节的说法，我们需要做

1,引入校验库。

我们在item视图的默认模版中做 .及在components\com_guestbook\views\item\tmpl\default.php中做。在文件中加入下面的代码即可：

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

2，修改表单的XML文件，指定需要校验的字段

因 为我们要让标题这个字段能够被校验，需要修改item.xml这个文件。所以我们需要做两个工作。第一个工作，给标题字段加上 required=true.第二个工作是在它的class属性中增加一个类，类名为validate-message_subject。所以表单的标题 字段现在成了下面的样子

			name="message_subject"
				type="text"
				label="COM_GUESTBOOK_MSG_TITLE_LABEL"
				description="COM_GUESTBOOK_MSG_TITLE_DESC"
				size="40"
				class="inputbox form-control validate-message_subject"
				default="留言主题"
				required="true"
				
			/>

 3，书写校验的js代码。

典型的代码就是我们在上面看到的js代码。这个代码的文件的名称不限，只要我们在视图中加载这个js文件就行了。因为，当页面加载完成的时候，js会自动注册相关的事件。

/**
 *	valedate js for item.xml form
 */
 
 window.addEvent('domready' ,function(){
		document.formvalidator.setHandler('message_subject',function(value){
			//regex=//;
			// return regex.test(value);
			return (value == '111');
		});
 
 });

 4，增加提交按钮的js代码。

感觉这一部分完全可以不用，照样可正常工作。

 

5，将js加载到页面中

 于2014-07-14日改：的确是这样的，是否要响应提交按钮，这个完全由我们自己决定。并不影响功能的。当你完成了第3步的时候，系统会响应一个onblur事件.每次都调用一下你的处理函数进行处理验证。如果你的表单中有一些验证不通过，系统是不会提交表单的。