JSP学习笔记（二）Web开发基础

来源：互联网发布：新能源汽车推荐知乎编辑：程序博客网时间：2024/05/16 23:50

HTML与JavaScript交互

<html>
<script language="javascript">
 function on_submit()
 {//验证数据的合法性
  if (form1.username.value == "")
             {
              alert("用户名不能为空，请输入用户名！");
              form1.username.focus();
              return false;
             }
    if (form1.userpassword.value == "")
             {
              alert("用户密码不能为空，请输入密码！");
              form1.userpassword.focus();
              return false;
             }
    if (form1.reuserpassword.value == "")
             {
              alert("用户确认密码不能为空，请输入密码！");
              form1.reuserpassword.focus();
              return false;
             }
   if (form1.userpassword.value != form1.reuserpassword.value)
             {
             alert("密码与确认密码不同");
             form1.userpassword.focus();
              return false;
             }
  if (form1.email.value.length!= 0)
        {
            for (i=0; i<form1.email.value.length; i++)
              if (form1.email.value.charAt(i)=="@")
                    break;
            if (i==form1.email.value.length)
            {
              alert("非法EMail地址！");
              form1.email.focus();
              return false;
             }  
            }
  else
       {
        alert("请输入Email！");
        form1.email.focus();
        return false;
        }
 }
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>新用户注册</title>
</head>
<body>
<form method="POST" action="regist.jsp" name="form1"  onsubmit="return on_submit()">
  新用户注册<br>
  用户名(*)：<input type="text" name="username" size="20"><br>
  密  码(*)：<input type="password" name="userpassword" size="20"><br> 
  再输一次密码(*)：<input type="password" name="reuserpassword" size="20"><br>
  性别：<input type="radio" value="男" checked name="sex">男<input type="radio" name="sex" value="女">女<br>
  出生年月：<input name="year" size="4"  maxlength=4>年  
             <select name="month">
                  <option value="1" selected>1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="8">7</option>
                  <option value="9">9</option>
                  <option value="10">10</option>
                  <option value="11">11</option>
                  <option value="12">12</option>
              </select>月 
              <input name="day" size="3"  maxlength=4>日<br>
  电子邮箱(*)：<input name="email"  maxlength=28><br>
  家庭住址：<input type="text" name="address" size="20"><br>
  <input type="submit" value="提交" name="B1"><input type="reset" value="全部重写" name="B2"><br>
</form>
</body>
</html>

正则表达式验证数据

<%@ page contentType="text/html;charset=gb2312" %>
<html>
<head>
<title>正则表达式验证示例</title>
<script language="JavaScript">
<!--
function checkdata() {//检查函数
  //检查是否数字
    var txt = document.forms[0].num.value;
    if(txt.search("^//d+(//.//d+)*$")!=0) {
        alert("请输入一个数字!");
        document.forms[0].num.select();
        return false;
    }
    //检查是否整数
    txt = document.forms[0].int.value;
    if(txt.search("^-?//d+$")!=0) {
        alert("请输入一个整数!");
        document.forms[0].int.select();
        return false;
    }
    //检查EMAIL是否合法
    txt = document.forms[0].email.value;
    if(txt.search("^[//w-]+(//.[//w-]+)*@[//w-]+(//.[//w-]+)+$")!=0) {
        alert("请输入正确的电子邮件!");
        document.forms[0].email.select();
        return false;
    }
    alert("检查通过!");
    return true;
}
-->
</script>
</head>
<body>
<p>
<form action="" method="post" OnSubmit="return checkdata()">
<br>请输入一个数字:<input type="text" name="num">
<br>请输入一个整数:<input type="text" name="int">
<br>请输入电子邮件:<input type="text" name="email">
<br><input type="submit" value="提交">
<form>
</body>
</html>