0

长话短说，我有一些表单（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；

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

先谢谢了。

4

3 回答 3

1 
<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>
于 2012-04-07T01:59:17.677 回答
1

如果你使用 jQuery，你可以给所有的字段一个类并像这样访问它们

$('.inputClass')

或通过元素

$('input')

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

于 2012-04-07T01:39:47.903 回答
0

要遍历页面中的每个表单字段，您可以执行以下操作

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

您还可以根据输入的特定类型或您可能分配给输入的任何任意类在该循环中进行过滤。

于 2012-04-07T02:01:22.467 回答