芒果小站

假设一个场景，某一个表单中包含文本框、单选框、复选框三种输入框 (input) 类型。如果要求表单元素至少有一个文本框已输入，或者有单选框或复选框被选中。那该如何处理呢？

按照通常的逻辑，肯定是用循环分别遍历该表单中的所有表单元素，进行逐一判断。

之前提到过，YUI3 中对 NodeList 使用 get 方法操作获取其某个属性，直接返回一个包含所有节点属性值的数组！

例如，获取表单中所有复选框 (checkbox) 的 checked 属性，且假设所有 checkbox 均未被选中：

Y.all(input[type="checkbox"]).get('checked'); //需要引用 selector-css3 模块

返回结果是一个由布尔值构成的数组：

[false, false, false, ..., false]

如此一来，要想判断表单元素是否为空或选中，只要分别检索三种类型输入框返回的数组成员即可：

var arrText = Y.Lang.trim(Y.all('input[type="text"]').get('value')) || [],
    arrRadio = Y.all('input[type="radio"]').get('value') || [],
    arrCheckbox = Y.all('input[type="checkbox"]').get('value') || [],
/*
arrText.join(''); //将数组成员拼接成字符串
Y.Array.indexOf(arrRadio, true); //获取 arrRadio 数组中 true 的下标
Y.Array.indexOf(arrCheckbox, true); //获取 arrCheckbox 数组中 true 的下标
*/
if(arrText.join('') == '' && Y.Array.indexOf(arrRadio, true) < 0 && Y.Array.indexOf(arrCheckbox, true) < 0){
    Y.log('表单元素一个都没选中~');
}

注：YUI3 中 Array 类中的 indexOf 方法在找不到相应参数后默认返回 -1。