web_api 项目添加表单验证

之前做的用户信息增删改查的项目，在添加用户信息时，有个问题：

如果我什么都不输入，提交会报错

web_api 项目添加表单验证

由于我什么都没输入，所以表单提交后参数为null，会报错。

我就想能否对表单的数据进行验证后再提交

设计到js的知识，所以需要先补一补。

@model Test.Models.User

@{
    ViewBag.Title = "AddInfo";
}

<h2>添加信息</h2>
11
<body>
    <script>
        document.write("<h1>添加信息</h1>");
        document.write("<p>添加信息</p>");
    </script>
    <script>
        function myFunction(form) {
            if (myForm.UserName.value == '') {
                alert("用户名不能为空！")
                form.UserName.focus();
                return false;
            }
            if (myForm.UserSex.value == '') {
                alert("性别不能为空！")
                form.UserSex.focus();
                return false;
            }
            if (myForm.UserAge.value == '') {
                alert("年龄不能为空！")
                form.UserAge.focus();
                return false;
            }
            if (!Number.isInteger(Number(myForm.UserAge.value))) {
                alert("年龄必须为数字！")
                form.UserAge.focus();
                return false;
            }
            return true;
        }

    </script>
    <form action="AddInfo1" name="myForm" method="POST" onSubmit="return myFunction(this);">
        <table width="" cellpadding="0" cellspacing="0">
            <tr><td>姓名: <input type="text" name="UserName" value=""></td></tr>
            <tr><td>性别: <input type="text" name="UserSex" value=""></td></tr>
            <tr><td>年龄: <input type="text" name="UserAge" value=""></td></tr>
            <tr><td><input type="submit" value="提交"></td></tr>
        </table>
    </form>
    
	//原Html.BeginForm方法
    @*<div>
        @using (Html.BeginForm("AddInfo1", "User", FormMethod.Post))
        {
            <p>
                姓名:@Html.TextBox("UserName")<br />
                性别:@Html.TextBox("UserSex")<br />
                年龄:@Html.TextBox("UserAge")<br />
                <br />
                <input type="submit" value="提交" />
            </p>
        }
    </div>*@
    
</body>

<div>
    @Html.ActionLink("返回主菜单", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

有个问题，年龄这块不管我输入什么，都是弹窗提示“年龄必须为数字”，原来是UserAge的input type是text字符串类型，怪不得一直报错。

我在网上又看到了HTML5 中的 input 元素的输入类型可以是number，于是将代码改为

<tr><td>年龄: <input type="number" name="UserAge" value="" min="1" max="100"></td></tr>

同时删去那段验证输入数据是否为数字的代码

这时候页面就会自动验证输入的是否为1~100的数字了

参考链接：https://blog.****.net/sinat_41104353/article/details/79344873#输入类型：number

web_api 项目添加表单验证

web_api 项目添加表单验证

相关推荐