代码之家 › 专栏 › 技术社区 › jos

使用jquery验证多个文本框

validation jquery

jos · 技术社区 · 17 年前

如果我有多个文本框,它们有不同的ID,但所有的ID都以一个数字前面的“pics”开头。所以:

textbox1  id = 'pics1' value='test1'
textbox2  id = 'pics2' value='test2'
textbox3  id = 'pics3' value='test1'
...
submit

我想做一些验证,当用户单击Submit..时,文本框中没有两个相同的值。对于上述示例,验证将导致错误,表单不会提交。因为pics1和pics3的值相同。

5 回复 | 直到 13 年前

Russ Cam 17 年前

无论您有多少文本输入,这都是有效的。

function validate()  {
  var inputs = $('input:text[id^="pics"]');
  var values = $.map(inputs, function(n, i) {
      return n.value;
  });

  values = unique(values);

  return values.length === inputs.length;
}

function unique(arr) {
  var r = [];
  o:for(var i = 0, n = arr.length; i < n; i++) {
    for(var x = i + 1 ; x < n; x++) {
       if(arr[x]==arr[i]) continue o;
    }
    r[r.length] = arr[i];
  }
  return r;
}

Philippe Leybaert 17 年前

一种溶液(未测试):

function validate() {

   var isValid = true;

   $("input:text[id^=pics]").each(function() {
      if ($("input:text[id^=pics][value=" + $(this).val() + "]").length > 1)
        isValid = false;
      });

   return isValid;
}

Toon Krijthe 13 年前

我必须突出显示包含相同值(选定值)的下拉框(选择元素)。

所以我改变了一些事情。

function validate()  {
  var inputs = $('select[id^="select_style"]');
  var values = $.map(inputs, function(n, i) {
      if(n!=undefined)
      return n.value+'-'+n.id;
  });

   values = unique(values);

   for(si=0;si< values.length;si++)
    {
    jQuery('#'+values[si]).css('background-color','#ff0000')
     }


}

//我对unique函数做了一点修改,现在它将返回一个包含id的数组。

//包含相同值的元素

function unique(arr) 
{
        //arr contains array of  value1-id1,value2-id2,value3-id3....    
    var arrId=new Array();
    var arr1=new Array();
    var dIdArr=new Array();//dIdArr  array containing ids of elements which contains 
                               //duplicate values

  for(j=0;j< arr.length;j++)
     {
      var sa=arr[j].split('-');
         arr1[j]=sa[0]; 
         arrId[j]=sa[1];
      }
  var r = [],l=0;

  o:for(var i = 0, n = arr.length; i < n; i++) 
{
    for(var x = i + 1 ; x < n; x++)
 {
       if(arr1[x]==arr1[i])
         {
if(jQuery.inArray(arrId[x],dIdArr)==-1)//not found in the array 
                                       //then assign in the array
             { 
dIdArr[l]=arrId[x];
                 l++;
                  if(jQuery.inArray(arrId[i],dIdArr)==-1)
                  {
                 dIdArr[l]= arrId[i];l++;}
                 }
                 else if(jQuery.inArray(arrId[i],dIdArr)==-1){
                      dIdArr[l]=arrId[i];
                      l++;
                     } 
         continue o;
         }
    }
    r[r.length] = arr1[i];
  }
return dIdArr;

}

Vitaliy Ulantikov Peter Miehle 17 年前

试试这个:

<script>
function validate()
{
    var areas = document.getElementsByTag('textarea');
    for (var i=0; i<areas.count;i++)
        for (var j=i+1; j<areas.count;i++)
            if (areas[i].id.startsWith('pics') && areas[i].id.startsWith('pics') && areas[i].value == areas[j].value)
                return false;
    return true
}
</script>

<form onsubmit="return validate();">
    <textarea id = 'pics1'></textarea>
    <textarea id = 'pics2'></textarea>
    <textarea id = 'pics3'></textarea>
    <input type="submit" />
</form>

Xinus 17 年前

<form onsubmit="return validate()" >
<input type="text" id="pics1" value="test1" />
<input type="text" id="pics2" value="test2" />
<input type="text" id="pics3" value="test3" />
<input type="submit" />
<br/><label id="error" />
</form>
<script>
function validate(){
    var inputs=document.getElementsByTagName("input");
    var pics1_temp,pics3_temp;
    for (var i=0;i<inputs.length;i++){
        if(inputs[i].id.indexOf("pics")>-1)
        {
            if(inputs[i].id=="pics1")
                pics1_temp=inputs[i].value;
            else if(inputs[i].id=="pics3")
                pics3_temp=inputs[i].value;
        }
    }

    if(pics1_temp!=pics3_temp)
    {
        document.getElementById("error").innerHTML="Pic1 must match with pic3";
        return false;
    }
    else return true;
}
</script>