验证元素值和复选框的Javascript

Javascript to validate element values and checkboxes

本文关键字：Javascript 复选框 元素 验证      更新时间：2023-09-26

我想在没有选中任何复选框且输入字段未填充的情况下使用js来检查表单。在这种情况下，用户应该得到一条消息，告诉他们至少做出一个选择或制定自己的选择。

表单元素。。。

<input type="checkbox" name="checkboxA" id="checkboxA" value="X" />
<input type="checkbox" name="checkboxB" id="checkboxB" value="Y" />
<input type="checkbox" name="checkboxC" id="checkboxC" value="Z" />
<input type="text" id="Text" class="textfield" value="please enter text." maxlength="100" size="40" onblur="if (this.value == '') {this.value = 'please enter text';}"  onfocus="if (this.value == 'please enter text') {this.value = '';}" />

在执行POST方法时，通过此js函数进行检查：

function checkFormElement() {
if ((document.getElementById("text").value == "please enter text.")
    && (document.getElementById("checkboxA").checked == false)
    && (document.getElementById("checkboxB").checked == false)
    && (document.getElementById("checkboxC").checked == false)){
        alert("Please choose out of X Y Z or formulate your own choice .");
        document.getElementById("checkboxA").focus();
    return false;
    }
return true;

}

我想使用jQuery应该容易得多，但我仍然很想知道如何在纯js中解决这个问题。

ID值的大小写很重要，所以请更改此项：

document.getElementById("text").value

以匹配您在HTML中的内容：

document.getElementById("Text").value

一旦我修复了这个案例问题并放入代码来实际调用checkFormElement()，它在这里似乎可以正常工作：http://jsfiddle.net/jfriend00/9DHxF/

您缺少将运行checkFormElement()的submit或类似类型的按钮''选项。一旦包含了调用此函数的内容，就不会出现任何问题。

您的代码中有一些错误。大多数ID不匹配等等。

此处的工作示例：http://jsfiddle.net/E8SBq/

这应该对你有用：

<input type="checkbox" name="checkboxA" id="checkboxA" value="X" />
<input type="checkbox" name="checkboxB" id="checkboxB" value="Y" />
<input type="checkbox" name="checkboxC" id="checkboxC" value="Z" />
<input type="text" id="Text" class="textfield" value="please enter text" maxlength="100" size="40" onblur="if (this.value == '') {this.value = 'please enter text';}"  onfocus="if (this.value == 'please enter text') {this.value = '';}" />
<input type="submit" value="Submit" onClick="checkFormElement()" />

和JS函数：

function checkFormElement() {
if (document.getElementById("Text").value != null  
    && document.getElementById("checkboxA").checked == false
    && document.getElementById("checkboxB").checked == false
    && document.getElementById("checkboxC").checked == false) {
        alert("Please choose out of X Y Z or formulate your own choice .");
        document.getElementById("checkboxA").focus();
    return false;
    }
return true;
}
相关文章：