如何在同一个html页面上以三种不同的形式验证相同的字段

时间:2015-01-08 13:27:18

标签: javascript jquery

您好我正在尝试进行此验证工作,如果我在页面上使用它一次,它实际上有效,但是想在同一页面上多次使用它,而有些它无法正常工作

以下我的js将非常感谢一些帮助:

function validateMe(){          
        var a = $('input[name="c"]');
        var b = $('input[name="d"]');

        if( a != null && a.length == 1 &&
            b != null && b.length == 1 ){

            var url = "/apply.do?code=" + encodeURIComponent( a[0].value ) +
                "&city=" + encodeURIComponent( b[0].value );

            if (typeof XMLHttpRequest != "undefined") {
                req = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                req = new ActiveXObject("Microsoft.XMLHTTP");
            }       
            req.open("GET", url, true);         
            req.onreadystatechange = callback;
            req.send();
        }
    }   
    function callback(){
        if (req.readyState == 4) {
            if (req.status == 200) {
            $(document).ready(function() {
                $('input').addClass('error');
                    $(".error-red").css('display','block').text(req.responseText);
            });
            }
        }
}

和HTML,我以三种不同的形式使用

<div>
    <label>code</label>
    <input type="text" name="c" class="code"/>  
    <a href="javascript:validateMe()">apply</a>
    <label class="error-red" for="code"></label>
    <input type="hidden" name="city" value="gara">  
    <div class="clear"></div>           
</div>

由于

1 个答案:

答案 0 :(得分:1)

这是一个关于如何定位字段的问题。

目前,您的validateMe()函数会选择名称为“c”且名称为“d”的所有输入,这些输入在DOM中可用。但是,当每个元素只有一个元素时,它只会做任何“真实的”。

那么,你能做什么? 如果要一次验证所有表单,可以遍历所有选定的字段

快速而肮脏:

var a = $('input[name="c"]');
var b = $('input[name="d"]');    

if( a != null && a.length >= 1 &&
        b != null && b.length == a.length ){
    for (i = 0; i < a.length; i++) {

        // your code, just use a[i], b[i] instead of a[0]..
    }
}

如果您想要准确定位一个表单,则更容易使用ID。一种方法是为每个表单使用固定前缀,例如form1_

HTML
 <input type="text" id="form1_code" name="code"....
 <a href="javascript:validateMe('form1')">apply</a>
 ....

 JS
 function validateMe(formPrefix) {
     var a = $('#' + formPrefix + '_code');
     ...
     if (a != null...) {
         // use a directly, it is not an array in this case, so no need for a[0] etc