.net 中如何使用js 验证表单
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了.net 中如何使用js 验证表单相关的知识，希望对你有一定的参考价值。
请大家帮忙看看,我这样写哪里不对
我想实现的效果是,点击按钮验证姓名和年龄textbox里面为空弹出消息提示重新填写
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>学生信息管理</title>
</head>
<script type="text/javascript">
function checkform()
if(document.getElementById("stuname")=="")
alert("请填写姓名!!!");
return false;
if (document.getElementById("stuage")=="")
alert("请填写年龄!!!");
return false;
return true;
</script>
<body>
<form id="form1" runat="server" >
<div>
<table border="0" >
<tr>
<td colspan="2">添加学生信息:</td>
<td> 姓名：</td>
<td> <asp:TextBox ID="stuname" runat="server"></asp:TextBox></td>
<td> 年龄：</td>
<td> <asp:TextBox ID="stuage" runat="server"></asp:TextBox></td>
<td> <asp:Button ID="Button1" runat="server" Text="提交" OnClick=" return checkform()" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
像这种JS只能防止普通用户在浏览器中点击，如果别人用软件发送数据包，而你的后台又没有对接受到的数据进行较好的处理，很容易出现SQL注入。
用net的验证控件，不但可以再客户端帮你验证，还可以再服务器端自动帮你验证。当然，性能上时要有些损耗。 参考技术B 两个错误：
1.OnClick改为OnClientClick，
<asp:Button ID="Button1" runat="server" Text="提交" OnClientClick=" return checkform()" />
2.document.getElementById("...")改为document.getElementById("...").value本回答被提问者采纳 参考技术C 为什么不用验证控件，还更安全。
像这种JS只能防止普通用户在浏览器中点击，如果别人用软件发送数据包，而你的后台又没有对接受到的数据进行较好的处理，很容易出现SQL注入。
用net的验证控件，不但可以再客户端帮你验证，还可以再服务器端自动帮你验证。当然，性能上时要有些损耗。
...没准人家就想练练呢=。= 参考技术D 分别在document.getElementById("stuname")和document.getElementById("stuage")后面加上.value就ok了。 第5个回答 2009-03-28 一样的和后台
.NET中表单的JS验证
JS验证代码如下：（需要引入两个JS包）
1 <script type="text/javascript" src="/js/jquery.validate.min.js"></script> 2 <script type="text/javascript" src="/js/jquery-1.7.2.js"></script> 3 <script type="text/javascript"> 4 function ValidateCartoon(){ 5 var name = $("#txtCompany").val().trim(); 6 if(name==""){ 7 alert("公司／单位名称不能为空！"); 8 return false; 9 } 10 var mobile = $("#txtName").val().trim(); 11 if(mobile==""){ 12 alert("姓名不能为空！"); 13 return false; 14 } 15 var email=$("#txtEmail").val().trim(); 16 var pattern = /^([\\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\\.[a-zA-Z0-9_-])+/; 17 if(email==""){ 18 alert("邮箱不能为空"); 19 return false; 20 } 21 if (!pattern.test(email)) { 22 alert("请输入正确的邮箱地址。"); 23 return false; 24 } 25 var mobile = $("#txtPhone").val().trim(); 26 var str =/^((1[3|5|7|8][0-9]{1})+\\d{8})$/; 27 if(mobile==""){ 28 alert("联系电话不能为空！"); 29 return false; 30 } 31 else if(!mobile.match(str)){ 32 alert("请输入正确的11位手机号！"); 33 return false; 34 } 35 36 return true; 37 38 } 39 </script>
.NET代码如下：
1 <form id="form1" runat="server"> 2 <div> 3 <div>联系方式信息如下：</div> 4 <dl> 5 <dt> <span class=\'cRed\'>*</span>公司／单位名称 （必填）</dt> 6 <dd><asp:TextBox ID="txtCompany" runat="server"></asp:TextBox></dd> 7 </dl> 8 <dl> 9 <dt><span class=\'cRed\'>*</span> 姓名 （必填）</dt> 10 <dd><asp:TextBox ID="txtName" runat="server"></asp:TextBox></dd> 11 </dl> 12 <dl> 13 <dt><span class=\'cRed\'>*</span> 邮件地址 （必填，检查邮件格式）</dt> 14 <dd><asp:TextBox ID="txtEmail" runat="server"></asp:TextBox></dd> 15 </dl> 16 <dl> 17 <dt> 电话 （可选择填写）</dt> 18 <dd><asp:TextBox ID="txtPhone" runat="server"></asp:TextBox></dd> 19 </dl> 20 <asp:Button ID="btnSubmit" runat="server" Text="提交信息" OnClientClick="return ValidateCartoon()" OnClick="btnSubmit_Click" /> 21 </div> 22 </form>
如上面代码那样即可实现.NET表单的JS验证。
以上是关于.net 中如何使用js 验证表单的主要内容，如果未能解决你的问题，请参考以下文章
Vue.js - Element UI - 如何知道表单验证的状态
如何在 Angular Js 中使用名称或 id 属性验证表单
使用 ASP.NET 表单身份验证时如何获取当前登录用户的用户 ID？
您如何在 Node.js + Express + Mongoose + Jade 中处理表单验证，尤其是嵌套模型