Question

这么长的故事简短，我有一些形式（2），需要不同类型的验证...为了争论，让我说我想检查所有表格上的空白或“”值字段。

如果我有例如3个字段，我如何在同一个3个字段中检查容器没有为所有人编写代码的时间......

我的意思是......例如：

下面是一些示例代码：

JS：

var test = document.getElementById("loginUsername");//this is the username field//

test.onfocus = removeVal;
test.onblur = inserDefVal;

function removeVal(){
    if(test.value == "Enter your Username"){
        test.value = "";    
    }
}


function inserDefVal(){
    if(test.value == ""){
        test.value = "Enter your Username"; 
    }   
}

现在虽然我有2个函数来检查字段值，如果我有3个字段，这意味着id必须有一个列表

test.onfocus = removeVal;
test.onblur = inserDefVal;

test2.onfocus = removeVal;
test2.onblur = inserDefVal;

test2.onfocus = removeVal;
test2.onblur = inserDefVal;

现在想象一下我要检查空箱的表格中的所有其他字段......生病有一个超级长列表大声笑..

所以我的问题是，有没有办法可以把所有这些放在一个...... 或者可能

就像一般功能/或类似

的动作

（我的意思是逻辑）这里有伪代码 -

if(this.value =="") do xyz ....和“这个”是真实的领域。

或者如果说，我是以某种方式...例如，将所有按钮名称/变量名称放在一个数组中，然后将其称为ArraOfButtons，然后

ArrayOfButtons.onmouseover/out = function.....

我希望我不要太混淆......我只是想找一种方法来编写更好，更快更清洁的代码，因为正如你可以看到的，如果我有那些test1 / 2/3只检查空，那么想象检查对于日期和其他价值......页面将超长。

总之，我正在寻找像CSS速记那样的东西，而不是一个写作

margin-top:10px / margin-bottom:10px / margin-left/right:10px

只会做

余量：10px的;

任何提示/链接/信息我很高兴欣赏。

先谢谢。

Answer 1

如果您使用jQuery，您可以为所有字段提供类并以此方式访问它们

$('.inputClass')

或通过元素

$('input')

这将允许您对所有匹配的元素执行操作。

Answer 2

<input class="hint" type="text" name="username" value="Enter your Username" data-hint="Enter your Username" />
<input class="hint" type="text" name="email" value="Enter your Email" data-hint="Enter your Email" />
<input class="hint" type="text" name="city" value="Enter your City" data-hint="Enter your City" />

<script type="text/javascript">

    // handler for form elements when they receive onfocus
    function removeVal() {
        // get default value from attribute 'data-hint' and compare the current value
        if ( this.value == this.getAttribute( 'data-hint' ) ) {
            // if current value equal default value, set value to empty
            this.value = "";
        }
    }

    // handler for form elements when they receive onblur
    function inserDefVal() {
        // if current value equal empty
        if ( this.value == "" ) {
            // get default value from attribute and set her to field value.
            // if attribute not found to set empty
            this.value = this.getAttribute( 'data-hint' ) || "";
        }   
    }

    // search elements by className
    function addEvents( className ) {

        var i, j, elem, all, elems = [];

        // If your browser supports "getElementsByClassName", use it
        if ( document.getElementsByClassName ) {
            // search elements by class name
            elems = document.getElementsByClassName( className );
        } else {
            // search elements by class name for IE7-8.
            // IE7-8 not support native "getElementsByClassName"
            all = document.getElementsByTagName( "*" );
            // pass on all the elements
            for( j = 0; elem = all[ j++ ]; ) {
                // check for the presence of our class name
                if ( (" " + elem.className + " ").indexOf( " " + className + " " ) >= 0 ) {
                    // is found the className, put an item in the stack
                    elems[ elems.length ] = elem;
                }
            }
        }

        // hang on found items the events
        for( i = 0; elem = elems[ i++ ]; ) {
            elem.onfocus = removeVal;
            elem.onblur = inserDefVal;
        }
    }

    // initialize elements by className "hint"
    addEvents( 'hint' );

</script>

Answer 3

要迭代页面中的每个表单字段，您可以执行类似

的操作

var formFields = document.getElementsByTagName('input');
for (var i=0; i < formFields.length; i++) {
    var field = formFields[i];
    field.onfocus = removeVal;
    field.onblur = inserDefVal;
}

您还可以根据输入的特定类型或您可能已分配给输入的任意类来过滤该循环。

一次定位表单字段（JavaScript速记有点？）

3 个答案: