表单的验证

提交表单后,需要对信息进行验证。表单的验证有两种:客户端验证和服务器验证。

  1 )表单的客户端验证

       表单的客户端验证主要是通过 JavaScript 来完成的。

<html>

<head>

<title> 客户端验证 </title>

<Script>

function Check()

{

    username=document.form1.username.value;

    age=document.form1.age.value;

    year=document.form1.year.value;

    email=document.form1.email.value;

 

 

 

    <!-- 验证提交数据的长度 -->

    if(username.length<2||username.length>8)

    {

      alert(" 用户名长度必须在 2 位到 8 位之间 ");

      return false;

    }

 

    <!-- 验证提交数据的范围 -->

    if(age.length!=2||isNaN(age)||parseInt(age)<20||parseInt(age)>50)

    {

      alert(" 你的年龄不符合我们的要求! ");

      return false;

    }

 

    <!-- 验证提交数据的类型 -->

    <!-- 限定出生年份是一个 4 位整数 -->

    if(year.length!=4||isNaN(year))

    {

      alert(" 年份填写不正确! ");

      return false;

    }

    <!-- 限定电子邮箱不能为空,且必须要有“ @ ”和“ . -->

    if(email.length==""||(email.indexOf('@')==-1)||(email.indexOf('.')==-1))

    {

      alert(" 电子邮件填写不正确! ");

      return false;

    }

    return true;

}

</Script>

</head>

<body>

<h3> 客户端验证 </h3>

<form name="form1" action="X.jsp" OnSubmit="return Check();">

<p> 名: <input name="username"></p>

<p> &nbsp;&nbsp;&nbsp;&nbsp; 龄: <input name="age"></p>

<p> 出生年份: <input name="year"></p>

<p> 电子邮件: <input name="email"></p>

<p><input type=Submit value=" 提交 "></p>

</form>

</body>

</html>

  2 )表单的服务器端验证

       表单的服务器端验证是通过服务器端的 X.jsp 来完成的。

<html>

<head>

<title>A Form</title>

</head>

<body>

<h3>The form will be checked by the Server.</h3>

<form name="fm" action="XXX.jsp" method="post">

  <p>UserName:

    <input type="text" name="username">

  </p>

  <p>PassWord:

    <input type="password" name="password">

  </p>

  <p>BirthYear:

    <input type="text" name="birthyear">

  </p>

  <p><center>

    <a href='JavaScript:fm.submit();'> 提交 </a>

    <a href='JavaScript:fm.reset();'> 重置 </a>

  </center></p>

</form>

</body>

</html>

posted on 2006-12-28 17:38 youngturk 阅读(269) 评论(0)  编辑  收藏 所属分类: JavaScript


只有注册用户登录后才能发表评论。


网站导航:
 
<2006年12月>
262728293012
3456789
10111213141516
17181920212223
24252627282930
31123456

导航

统计

公告

this year :
1 jQuery
2 freemarker
3 框架结构
4 口语英语

常用链接

留言簿(6)

随笔分类

随笔档案

文章分类

文章档案

相册

EJB学习

Flex学习

learn English

oracle

spring MVC web service

SQL

Struts

生活保健

解析文件

搜索

最新评论

阅读排行榜

评论排行榜