使用javascript验证表单值

Validating form values with javascript

本文关键字：表单 验证 javascript 使用      更新时间：2024-01-12

我有一个要用javascript验证的表单。我的表单有两个单选按钮，询问用户是否同意某个分类，如果不同意，他可以从下拉列表中为自己选择一个新的分类。在javascript中，我想过滤掉无效的输入组合。

<html>
    <head>
    <script type="text/javascript">
        function isValidForm() 
        {
            if(document.validateClassificationForm.acceptclassification.value == 'yes' && document.validateClassificationForm.newclassification.value != 'default')
            {
                if (confirm('You chose the option to accept the classification obtained by the classifier, but you chose another classification from the drop-down list. Do you want to override the classification by the one you chose?')) 
                    return true;
                else 
                    return false;
            }
            if (document.validateClassificationForm.acceptclassification.value == 'no' && document.validateClassificationForm.newclassification.value == 'default') 
            {
                alert('You chose the option not to accept the classification obtained by the classifier. Please chose another classification from the drop-down list.');
                return false;           
            }
            return true;
        }
        </script>
</head>
<body>
<form method=post onsubmit="return isValidForm()" action="index.php?operacao=validateClassification" name="validateClassificationForm">
    <ol> 
    <li><p>Do you agree with the classification attributed to this patient?</p></li>
    <li>Yes<input type="radio" name="acceptclassification" value="yes" checked><br></li>
    <li>No<input type="radio" name="acceptclassification" value="no"></li>
    <li><p>If you don't agree, chose another classification:</p></li>
    <li><label for="newclassification">Chose classification:</label>
    <select name="newclassification">
    <option value="default">Select</option>
    <option value="emergency">Emergency</option>
    <option value="veryurgent">Very urgent</option>
    <option value="urgent">Urgent</option>
    <option value="slightlyurgent">Slightly urgent</option>
    <option value="noturgent">Not urgent</option>
    </select></li>
    <div id="form-button">
    <li><input type="submit" value="Submit"></li>
    </div>
    </ol>
</form>
</body>
</html>

尽管如此，javascript似乎从未被执行过，表单总是被提交的。我在这里做错了什么？

document.validateClassificationForm.acceptclassification返回nodeList对象。因此，不能简单地编写document.validateClassificationForm.acceptclassification.valuenodeList对象没有名为值的属性。

function isValidForm() {
    var acceptclassification = Array.prototype.slice.call(document.validateClassificationForm.acceptclassification).filter(function (element) {
        return element.checked;
    })[0];
    if (acceptclassification.value == 'yes' && document.validateClassificationForm.newclassification.value != 'default') {
        if (confirm('You chose the option to accept the classification obtained by the classifier, but you chose another classification from the drop-down list. Do you want to override the classification by the one you chose?')) return true;
        else return false;
    }
    if (acceptclassification.value == 'no' && document.validateClassificationForm.newclassification.value == 'default') {
        alert('You chose the option not to accept the classification obtained by the classifier. Please chose another classification from the drop-down list.');
        return false;
    }
    return true;
}

打开它http://jsfiddle.net/4n8S6/

相关文章：