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.csdn.net/sinat_41104353/article/details/79344873#输入类型:number