表单runat=server中的Javascript验证

本文关键字：Javascript 验证 中的 server runat 表单 | 更新日期: 2023-09-27 18:28:11

我是.NET和web开发的新手。我创建了一个表单来收集用户的评论和/或文件附件。一切都很好，但我想添加客户端验证，但当我这样做时失败了。使用Chrome的开发工具，我可以看到javascript被执行，但第一条语句失败了，说"无法读取未定义的属性值"。如果我删除runat="server"属性，它可以正常工作，但我无法再访问代码背后的数据。

那么，我有什么选项可以让javascript工作呢？还是我要用错误的方式保存数据？

aspx页面：

<form id="commentForm" name="commentForm" runat="server" enctype="multipart/form-data" method="post" onsubmit="return validateCommentForm()">
    <p>Add Comment</p>
    <textarea id="Comment" name="Comment" rows="4" class="with-100" runat="server" />
    <input id="FileAttachment" type="file" runat="server" />
    <input type="submit" id="SaveComment" class="red-button" value="Submit" />
</form>

javascript:

function validateCommentForm()
{
    var x = document.commentForm.Comment.value;
    var y = document.commentForm.FileAttachment.value;
    if (x == '' && y == '')
    {
        alert("Either a commment or file must be supplied.");
        return false;
    }
}

c#：

protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack == true)
            {
                if (Comment.Value.Length > 0)
                {
                    Insert.UserComment(Comment.Value);
                }
                HttpPostedFile UserFileAttachment = Request.Files[0];
                if (UserFileAttachment.ContentLength > 0)
                {
                    Insert.FileAttachment(UserFileAttachment);
                }
            }
        }

提前谢谢。

表单runat=server中的Javascript验证

您可以使用jQuery，在这里您可以按照API中描述的名称调用表单元素。

检索值：

$("input[name='Comment']").val();

要从JavaScript更新值（如果需要）：

$("input[name='Comment']").val('some Comment');

您也可以使用以下jQuery:通过ID进行操作（根据您的示例，这应该可以工作）

$("#Comment").val();

所以你的最终JavaScript看起来像：

function validateCommentForm()
{
    var x = $("#Comment").val();
    var y = $("#FileAttachment").val();
    if (x == '' && y == '')
    {
        alert("Either a commment or file must be supplied.");
        return false;
    }
}

我确实认为从文件输入框访问文件名有点奇怪。请参阅文件选择器jQuery文档。

相关文章：