Javascript

最新推荐文章于 2025-02-25 21:43:29 发布

us_yunleiwangdb

最新推荐文章于 2025-02-25 21:43:29 发布

阅读量101

点赞数

CC 4.0 BY-SA版权

文章标签： JavaScript Mobile XHTML ViewUI

本文链接：https://blog.youkuaiyun.com/us_yunleiwangdb/article/details/83367982

本文介绍了一个使用ASP.NET进行表单验证的方法，并详细展示了如何通过JavaScript进行客户端验证，确保用户输入符合要求。此外，还提供了一个采用DIV进行网页布局的示例，替代传统的Table布局方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.新建aspx页面,往上面放几个TextBox服务端控件,还有一个服务端Button控件,取名btn_Submit

2.新建.js页面,将下面验证代码拷入js文件,取名check.js .

/* 检测指定文本框输入是否合法 */
function verifyInput(input)
{
var image;
var i;
var error = false;

/* 长度校验 */
if (strlen(input.value)>parseInt(input.maxsize))
{
alert(input.chname+"超出最大长度"+input.maxsize);
return false;
}

/* 非空校验 */
if (input.nullable=="no"&&isnull(input.value))
{
alert(input.chname+"不能为空");
return false;
}

/* 数据类型校验 */
if (input.nullable=="no" || !isnull(input.value))
{
switch(input.datatype)
{
case "number": if (isnumber(input.value)==false)
{
alert(input.chname+"值应该全为数字");
return false;
}
break;
case "text": if (IsSafeQuerystring(input.value)==false)
{
alert(input.chname+"值包含非法字符");
return false;
}
break;
case "email": if (/^.+\@(\[?)[a-zA-Z0-9\-\.]+\.([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/.test(input.value)==false)
{
alert(input.chname+"值应该为合法的邮件地址");
return false;
}
break;
case "mobile": if (/^[0|1]{1,2}[3|5]\d{9}$/.test(input.value)==false)
{
alert(input.chname+"不是合法的手机号码");
return false;
}
break;
case "telephone": if (/^(\d{7,13}|\d{7,13}-\d{3,4})$/.test(input.value)==false)
{
alert(input.chname+"不是合法的电话号码");
return false;
}
break;
case "dropdown":
if (/请选择*/.test(input.options[input.options.selectedIndex].text)==true)
{
alert(input.chname+"必须选择一个值");
return false;
}
break;
case "radio":
if (input.options.selectedIndex==-1)
{
alert(input.chname+"必须选择一个值");
return false;
}
break;
case "hour":
if (isnumber(input.value)==false)
{
alert(input.chname+"应该输入数字");
return false;
}
if( parseInt(input.value,10)>23 || parseInt(input.value,10)<0)
{
alert(input.chname+"的数值应该在00和23之间");
return false;
}
if( strlen(input.value)!=2)
{
alert(input.chname+"应输入两位数字");
return false;
}
break;
case "minute":
if (isnumber(input.value)==false)
{
alert(input.chname+"应该输入数字");
return false;
}
if( parseInt(input.value,10)>59 ||parseInt(input.value,10)<0)
{
alert(input.chname+"的数值应该在00和59之间");
return false;
}
if( strlen(input.value)!=2)
{
alert(input.chname+"应输入两位数字");
return false;
}
break;

/* 在这里可以添加多个自定义数据类型的校验判断 */
/* case datatype1: ... ; break; */
/* case datatype2: ... ; break; */
/* ....................................*/
default : break;
}
}

return true;
}
3.在.aspx的html页面上添加引用
<script language="javascript"></script>

4.在.aspx.cs文件Page_Load里添加代码
if(!Ispostback)
{
this.TextBox1.Attributes.Add("chname", "角色名称"); //要提示的信息
this.TextBox1.Attributes.Add("maxsize", "20"); //最大长度
this.TextBox1.Attributes.Add("nullable", "yes"); //是否为空
this.TextBox1.Attributes.Add("datatype", "text"); //什么类型的,js里面有好多类型如:number等

this.TextBox2.Attributes.Add("chname", "角色名称");
this.TextBox2.Attributes.Add("maxsize", "30");
this.TextBox2.Attributes.Add("nullable", "no");
this.TextBox2.Attributes.Add("datatype", "number");
//为按钮添加onclick事件,
this.btn_Submit.Attributes["onclick"] = "javascript:return verifyAll(window.form1);";
}

5.单击btn_Submit时会先激发客户端事件,如果不符合要求会弹出错误的提示信息.点击确定,会自动定位到出错的TextBox上.

2：Div 取消Table 操作代码
<!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>
<title> new document </title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*
{
font-size:12px;
font-family:verdana;
margin:0px;
padding:0px;
}
a
{
text-decoration:none;
}
#header,#footer
{
width:85%;
margin:0 auto;
height:50px;
}
#header
{
height:70px;
margin-top:5px;
border:solid 1px #000;
background:url() no-repeat right -20px;
}
#header h1
{
line-height:40px;
}
#body
{
position:relative;
width:85%;
margin:3px auto;
height:100%;
word-wrop:break-word;
word-break:break-all;
}
#sidebar
{
position:absolute;
left:0;
top:0;
width:200px;
}
#right
{
width:240px;
position:absolute;
right:0;
top:0;
}
#center
{
margin:0 241px 0 201px;
}
#body,#sidebar,#right,#center,#footer{height:750px;border:solid 1px #000;}
#footer
{
height:50px;
}
#body
{
border:none;
}
#nav ul
{
float:left;
width:600px;
list-style-type:none;
border-bottom:solid 6px #6666CC;
}
#nav ul li
{
float:left;
}
#nav li a
{
display:block;
text-decoration:none;
text-align:center;
width:50px;
padding:5px;
}
#nav li a:hover
{
background:#66c;
color:#fff;
font-weight:bold;
}
dt
{
border-bottom:dotted 1px #000066;
border-top:dotted 1px #006;
}
dt.first
{
border-top:none;
}
dt
{
padding:8px 0px 8px 4px;
}
dd a{
display:block;
text-indent:20px;
padding:10px;
}
dd a:hover
{
font-weight:bold;
color:#000;
background:#66FFCC;
}
</style>
</head>
<body>
<div id="header">
<h1>title</h1>
<div id="nav">
<ul>
<li><a href="#1">link</a></li>
<li><a href="#1">link</a></li>
<li><a href="#1">link</a></li>
<li><a href="#1">link</a></li>
<li><a href="#1">link</a></li>
<li><a href="#1">link</a></li>
<li><a href="#1">link</a></li>
<li><a href="#1">link</a></li>
<li><a href="#1">link</a></li>
<li><a href="#1">link</a></li>
</ul>
</div>
</div>
<div id="body">
<div id="sidebar">
<dl>
<dt class="first">分类</dt>
<dd><a href="#1">link</a></dd>
<dd><a href="#1">link</a></dd>
<dd><a href="#1">link</a></dd>
<dd><a href="#1">link</a></dd>
<dd><a href="#1">link</a></dd>
</dl>
<dl>
<dt>链接</dt>
<dd><a href="#1">link</a></dd>
<dd><a href="#1">link</a></dd>
<dd><a href="#1">link</a></dd>
<dd><a href="#1">link</a></dd>
<dd><a href="#1">link</a></dd>
</dl>
<dl>
<dt>dt</dt>
<dd><a href="#1">link</a></dd>
<dd><a href="#1">link</a></dd>
<dd><a href="#1">link</a></dd>
<dd><a href="#1">link</a></dd>
<dd><a href="#1">link</a></dd>
</dl>
</div>
<div id="center">center</div>
<div id="right">
right
</div>
</div>
<div id="footer">
footer
</div>
</body>
</html>