在上一节中,我们介绍了给前台添加验证的理论,现在我们来真正的在前台添加一个验证。
我打算给我的留言板组件的标题栏加上前台验证,如果前台验证不能通过,则不能提交表单。
看一下没有验证的效果:
没有验证的情况,输入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事件.每次都调用一下你的处理函数进行处理验证。如果你的表单中有一些验证不通过,系统是不会提交表单的。
评论 (0)