填写用户表单验证？

Question

我目前有一个用户表单

@using (Html.BeginForm("Iflexcst", "Costing", FormMethod.Post, new { onsubmit = "return (checkForm(this) && false);" }))
{
            <label for="NUM">Number of Sets:</label>
            <br>
            <input class="foo" id="NUM" type="text" value=@ViewBag.Quantity name="Quan" />

        <label for="CS"> Cost</label>

        <br>
        <input class="foo" id="CS" type="number" value=@ViewBag.result />


        <input type="submit" value="Cost" />

还有一个在我按下提交按钮后验证的 javascript

<script type="text/javascript">

    function checkForm(form) {
        if (form.Quan.value == "") {
            alert("Error: Username cannot be blank!");
            form.username.focus();
            return false;
        }
        re = /^\w+$/;

    }

</script>

我希望用户表单在进行验证后不要将数据提交给控制器，因为我的 jquery 当前返回消息，但如果 NUM 为空，仍会进入控制器函数，该函数会发送错误。

如果上述是一个简单的解决方案，是否也可以在填写表单时进行验证，例如，如果用户输入一个小于 10 的数字，表单会立即显示一个弹出窗口并且不会让你提交直到这个错误被修复？

Answer 1

问题出在你的javascript中

form.username.focus();

由于表单中没有名为“用户名”的元素，所以当声明时

if (form.Quan.value == "")

如果您尝试关注表单中不存在的 html 元素，则在返回 false 行被击中之前，浏览器会返回未捕获的引用异常，并且表单会转到控制器。

要解决此问题，请删除以下行

 form.username.focus();

或者改成

 form.Quan.focus();

如果 Quan 文本框为空并且表单不会转到控制器，它将聚焦您的 Quan 文本框。