Posts tagged ‘mootools’

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属性并关联到了其他上。

js盲,迫于项目,无奈开始使用mootools,连蒙带猜。并且,貌似我对那些绚丽的效果没啥感觉,反而是对这些基本的、可以帮助人偷懒的功能比较感兴趣。

1、getElement和getChildren()[0]有什么本质区别?

$(‘trial-info’).getElement(‘div’);
$(‘trial-info’).getChildren(‘div’)[0];

这两条语句的返回值貌似是一样的,都是$(‘trial-info’)的第一个child element。

2、css selector有哪些? div, .classname,#id,还可以使用:

  • = : is equal to
  • //selects the input with the name 'phone_number'
    $('body_wrap').getElements('input[name=phone_number]');
  • ^= : starts-with
  • //selects the input with a name beginning with phone
    $('body_wrap').getElements('input[name^=phone]');
  • $= : ends-with
  • //selects the input with a name ending in number
    $('body_wrap').getElements('input[name$=number]');
  • != : is not equal to
  • //selects the input which is not named address
    $('body_wrap').getElements('input[name!=address]');

甚至还包括even和odd,可以在表格等应用中区分奇偶行等。

3、element的getProperty都可以get哪些值呢?就是property指哪些东西?比如一个input 是不是就是包含了name、value等?

再说event事件里都可以包含哪些属性?像按键事件event.key、event.shift

去哪里可以查到类似的这些对象的属性?http://mootools.net/docs/core/Element/Element#Element-Properties 这里可以看到element的properties。

4、document.getElementsByTagName(‘a’) 和 $$(document.getElementsByTagName(‘a’))又有什么区别?

5、尽量把function放在外部引用的js文件中,执行的js代码在不能避免的情况下,可以放在页面上的domready代码中。如果需要php控制传递某些参数,可以打印在页面上作为js变量,调用function的时候传入。减少页面上的js、css代码,有利于SEO。

6、inject函数,可以bottom/top/before/after四种方式调整或者插入element。

Bottom and top will place the injected element inside a selected element, in the top or bottom spot. Before and after on the other hand, will inject one element before or after another, but not inside.

7、clean这个函数挺牛的,它可以去除多余的空白,不论是字符串的头、尾、还是中间!

8、这个函数挺搞笑的:它替换中括号里的内容,如果rep中没有定义对应的替代,则留白。

var str = “one is {one}, and two is {two}”;

var rep = {

one: ‘the first ‘

};

str.substitute(rep)

9、字符串的test和contains函数的区别在于:contains寻找整词!