检查框验证在JavaScript

我写了这个剧本：检查框验证在JavaScript

function getDays(select){ 
    var selectedString = select.options[select.selectedIndex].value; 
    if(selectedString == 4) 
    { 
     document.getElementById("days_target").style.display = "block"; 
    }else { 
     document.getElementById("days_target").style.display = "none"; 
    } 
}

和validateForm()功能我有这样的：

var x=document.forms["form1"]["days"].value; 
if (x==null || x=="" || x=="Select Days") 
{ 
    alert("Oh, you forgot to select days! :)"); 
    return false; 
} 
var x=document.forms["form1"]["days"].value; 
if(x=="4") 
{ 
    var cnt = 0; 
    for (var i = 7; i < document.day.elements.length; i++) { 
     if (document.day.elements[i].type == 'checkbox') { 
      if (document.day.elements[i].checked == true) { 
       cnt++; 
      } 
     } 
    } 
    if (cnt == 0) { 
     alert("Atleast 1 day Should be Selected."); 
     return false; 
    } 
}

HTML这样的：

<b>Please enter days required</b><br/> 
<select name="days" id="days" style="width:200px;" onchange="getDays(this)"> 
    <option value="Select Days" selected>Select Days</option> 
    <option value="1">Mon-Fri</option> 
    <option value="2">Mon-Fri</option> 
    <option value="3">Mon-Fri</option> 
    <option value="4">Bespoke Days</option> 
</select><br/><br/> 
<div id="days_target" style="display:none;"> 
    <b>Select Days</b><br/> 
    <input type="checkbox" name="day" value="mon"/>Mon &nbsp;&nbsp;<input type="checkbox" name="day" value="tue"/>Tue<br/> 
    <input type="checkbox" name="day" value="wed"/>Wed &nbsp;&nbsp;<input type="checkbox" name="day" value="thr"/>Thr<br/> 
    <input type="checkbox" name="day" value="fri"/>Fri &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="day" value="sat"/>Sat<br/> 
    <input type="checkbox" name="day" value="sun"/>Sun<br/><br/> 
</div>

如果我选择定制日期然后复选框出现，如果没有被检查，然后我想显示错误消息“至少有一天应该被选中“。这个怎么做？

来源

2013-05-06 Avnee.Angel

值不能为空 – epascarello 2013-05-06 12:52:20

函数在jQuery中可以让你轻松做到这一点。这将需要两个步骤。通过把这个你的头标记内的HTML

负载jQuery的（<head></head>）：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

添加JavaScript在验证时，条件不满足：

$('#days').after('<label class="error">Atleast one day should be selected.</label.');

此外，您将希望错误消息在验证规则满足时消失。

$('.error').remove();

你可能会想调整显示的目的，HTML/CSS，但应该足以让你去。

来源

2013-05-06 13:12:56 ejc

你在哪看到jQuery提到过？ – mplungjan 2013-05-06 13:14:14

JQuery没有被提及，但是也没有提到native-javascript解决方案。 – ejc 2013-05-06 21:08:16

Erm .. [javascript] – mplungjan 2013-05-06 21:37:57

您正在访问复选框的方式不正确。表单具有元素。你也从7开始，从0而不是计数和或6计数和倒计时

var day = document.forms["form1"].day; 
for (var i = 0; i < day.length; i++) { 
    if (day[i].type == 'checkbox') { 
     if (day[i].checked == true) { 
      cnt++; 
     } 
    } 
}

我会做这样的：

Live Demo

var x=document.forms["form1"]["days"].selectedIndex; 
if (x<1) { 
    alert("Please select days"); 
    return false; 
} 
else if(x==4) { // fifth entry 
    var checked = false, chk = document.forms["form1"]["day"]; 
    for (var i = 0; i < chk.length; i++) { 
    if (chk[i].checked) { checked=true; break } 
    } 
    if (!checked) { 
    alert("At least one day should be checked."); 
    return false; 
    } 
}

来源

2013-05-06 13:13:48 mplungjan

它不工作..在检查所有复选框后，它会给出错误信息。 – 2013-05-06 13:34:42

请再试一次，我忘了[i] – mplungjan 2013-05-07 04:31:13

检查框验证在JavaScript

回答

相关问题