表单验证1

.

.

.

.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="Js/Calendar.js"></script><!-- 这个里面不能写javascript代码 -->
<link href="Css/TestDate.css" rel="stylesheet">
<link href="Css/calendar-blue.css" rel="stylesheet">
<title>无标题文档</title>
<script>
function checkform(){
	var username = document.regform.txtUserName.value;
	if(username == ""){
		alert("用户名不能为空！");
		return false;
	}
	var password = document.regform.txtPassWord.value;
	if(password == ""){
		alert("密码不能为空！");
		return false;
	}
	if(password.length < 6 ){	
		alert("密码长度必须不小于六位！");
		return false;
	}
	var email = document.regform.txtEmail.value;
	if(email.search("^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\.\\w+([-.]\\w+)*$")!=0) {
		alert("请输入正确的邮件格式");
		return false;
	}
	return true;
}
</script>
<style type="text/css">
<!--
.STYLE1 {color: #FF0000}
-->
</style>
</head>

<body>
<pre>
<p>表单验证的步骤：</p>
<p>1、确定事件：在表单提交时，触发方式是：单击“submit”按钮。</p>
<p>要使用表单提交事件。<form onsubmit="">是表单标签的onsubmit事件。 </p>
<p>2、确定函数：checkform函数做为表单验证函数。</p>
<p>该函数要有一个boolean类型的返回值 。true表示验证成功可以提交，false表示验证失败不可以提交。默认为true; </p>
<p><script><br />
  function checkform(){
  }<br />
</script></p>
<p>3、调用格式：在表单提交事件的调用格式上有要求：<form onsubmit="<span class="STYLE1">return</span> checkform()"></p>
<p>在函数名前必须加return关键字
</p>
</pre>
<hr />
<form id="regform" name="regform" method="post" action="提交目标.html" onsubmit="return checkform()">

    <p>用户名：
      <input type="text" name="txtUserName" />
    </p>
    <p>密码：
      <input type="password" name="txtPassWord" />
    </p>
    <p>确认密码：
      <input type="password" name="txtRePassWord" />
    </p>
    <p>邮箱：
      <input type="text" name="txtEmail" />
    </p>
    <p>---个人信息---</p>
    <p>姓名：
      <input type="text" name="textfield5" />
    </p>
    <p>性别：
      <input type="radio" name="rdoSex" value="1" />
      男
      <input type="radio" name="rdoSex" value="0" />
      女
      <input type="radio" name="rdoSex" value="2" />
      保密
    </p>
    <p>出生日期：
      <input type="text" name="txtBirthday" readonly /><A onclick="return showCalendar('txtBirthday', 'y-mm-dd');" href="#"><img src="Image/Button.gif" id="IMG2" align="absMiddle" border="0" /></A>
    </p>
    <p>有效证件：
      <select name="select">
        <option value="1">身份证</option>
        <option value="2">军官证</option>
        <option value="3">驾驶证</option>
        <option value="4">护照</option>
        <option value="5">好人证</option>
        <option value="6">坏人证</option>
        <option value="7">帅哥证</option>
        <option value="8">美女证</option>
        <option value="9">人妖证</option>
      </select>
      <input type="text" name="textfield7" />
    </p>
    <p>个人爱好：
      <input type="checkbox" name="cbox" value="1" />
    打篮球	
	<input type="checkbox" name="cbox" value="2" />
	电影
	<input type="checkbox" name="cbox" value="3" />
    男人
	<input type="checkbox" name="cbox" value="4" />
    女人
	<input type="checkbox" name="cbox" value="5" />
    大人
	<input type="checkbox" name="cbox" value="6" />
    小孩
	<input type="checkbox" name="cbox" value="7" />
    宅女</p>
    <p>备注：
      <textarea name="textfield8" cols="40" rows="6"></textarea>
    </p>
    <p>
      <input type="submit" name="Submit" value="提交" />
      
        </p>
</form>

</body>
</html>

posted on 2011-06-06 15:36  0xCAFEBABE  阅读(358)  评论(0)    收藏  举报

导航