Posts tagged ‘form.validator’

web开发中,form表单的提交是经常使用到的,原来做php工程师时仅关注于后端检验,就比较简单。

而这次,需要用前端的方式对form进行检查,由于我们使用了mootools框架,所以自然而言就想到利用其提供的组件进行检查,避免二次开发。

http://mootools.net/forge/上搜索form关键词,可以看到不少组件,这里我仅使用了简单的form.validator组件。在http://mootools.net/more/上选择以下4个包,下载(当然,如果您使用的是mootools的全代码版本,就可以略过此步了)。

首先当然是学习其docdemo

.validation-failed {
border-color: #ff0000;
background-color: #ffdddd;
}

.validation-advice {
padding-bottom: 5px;
font-weight: bold;
color: #ff0000;
}

这里两个css样式是必须的,否则可能导致错误提示无法显示(应该是显示了,但是用户看不到)。

js中核心的就是这两句:

// The elements used.
var myForm = document.id('myForm');
// Validation.
var validator = new Form.Validator.Inline(myForm, {
'useTitles': true  // 是否使用element的title进行错误提示
});

html中,input text和textarea比较简单,就是在element的class中添加上required就可以了,也可检查长度等,例如:

<input type=”text” class=”required”  data-validators=”minLength:10″  name=”test” />

长度检查有多种方式,可以选择习惯的方式使用。

而radio和checkbox稍微需要注意点,通过查看其源码的validate-one-required属性,针对radio和checkbox,它将位于同一parent下的input归为一组!所以,千万保证这一点!

如:

<li>

<label>Would you like to &lt;something&gt;?</label>

<input type="radio" id="news_y" name="newsletter" />

<label for="news_y">Yes</label>

<input type="radio" id="news_n" name="newsletter" class="validate-one-required" />

<label for="news_n">No</label>

</li>

在上面这种情况下,如果未选择radio,错误提示默认显示在news_n的parent的最后。要改变其位置,可以使用msgPos属性。
<li>

<label>Would you like to &lt;something&gt;?</label>

<input type="radio" id="news_y" name="newsletter" />

<label for="news_y">Yes</label>

<input type="radio" id="news_n" name="newsletter" class="validate-one-required msgPos:'notify'" />

<label for="news_n">No</label>

</li>

<div id="notify"></div>

那么,提示将出现在notify div内。

另外,有些情况下,我们的radio或者checkbox中含有其他选项,用户勾选之后,需要再填写些文字,那么就可以定义自己的check属性:

// Validation.

var validator = new Form.Validator.Inline(myForm, {

'useTitles': true

});

validator.add('mustIfSelect', {

errorMsg: '请填写理由',

test: function(field){

var s = field.getPrevious('input');

if (!s){

return true;

}

if (s.get('checked')){

return !Form.Validator.getValidator('IsEmpty').test(field);

}

return true;

}

});

<input type="radio" name="{$name}" value="other" />其他

<input class="cy-other mustIfSelect" type="text" name="{$name}_other_t" value="" title="请填写您选择该项的理由"/>

这样就定义了mustIfSelect属性并关联到了其他上。