代码

  1.  <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.      pageEncoding="UTF-8"%>
  3.  <!DOCTYPE html>
  4.  <html>
  5.      <head><%-- 告诉浏览器不要缓存 --%>
  6.          <meta http-equiv ="proma" content = "no-cache"/>
  7.          <meta http-equiv="cache-control" content="no cache" />
  8.          <meta http-equiv="expires" content="0" />
  9.          <meta charset="UTF-8">
  10.          <title>test</title><%--设置网页标题 --%>
  11.          <style type="text/css">/*css样式*/
  12.              body {
  13.                  margin-left: 25%;/*设置整个页面离浏览器左边空25%*/
  14.                  margin-right: 25%;/*设置整个页面离浏览器右边空25%*/
  15.                  background-color: #F2F2F2;/*设置整个页面背景颜色*/
  16.              }
  17.              div {
  18.                  background-color: #97D775;/*设置div背景颜色*/
  19.                  height: 2000px;/*设置div高度*/
  20.              }
  21.          </style>
  22.  
  23.          <script type="text/javascript">/*js*/
  24.              function userName_yz() {/*当焦点离开时触发此事件，验证输入名称是否符合要求*/
  25.                  var name = document.getElementById("name").value;/*根据id获取相应节点，然后取value值*/
  26.                  var span_1 = document.getElementById("span_1");/*根据id获取相应节点*/
  27.                  if(name.length <= 3 || name.length >= 10) {/*验证输入名称是否符合要求*/
  28.                      span_1.style.display="inline";/*第一种修改属性样式*/
  29.                      span_1.style.color="red";
  30.                      return false;/*为了后面表单提交返回的一个boolean类型*/
  31.                  } else {
  32.                      span_1.style.display="none";
  33.                      return true;/*为了后面表单提交返回的一个boolean类型*/
  34.                  }
  35.              }
  36.  
  37.              function password_yz() {/*当焦点离开时触发此事件，验证输入密码是否符合要求*/
  38.                  var password = document.getElementById("password").value;
  39.                  var span_2 = document.getElementById("span_2");
  40.                  if(password.length <= 3 || password.length >= 10) {
  41.                      span_2.setAttribute("style", "display: inline");/*第二种修改属性样式*/
  42.                      span_2.setAttribute("style", "color: red");
  43.                      return false;/*为了后面表单提交返回的一个boolean类型*/
  44.                  } else {
  45.                      span_2.setAttribute("style", "display: none");
  46.                      return true;/*为了后面表单提交返回的一个boolean类型*/
  47.                  }
  48.              }
  49.  
  50.              function onsubmit_yz() {/*当表单提交时触发此事件，验证所有的要求是否符合*/
  51.                  if(!userName_yz()) {/*根据验证名称的返回boolean来判断*/
  52.                      alert("名称输入不合要求，请重新输入！");/*提示用户，名称输入不符合要求*/
  53.                      return false;/*阻止表单提交的boolean值*/
  54.                  } else if(!password_yz()) {
  55.                      alert("密码输入不合要求，请重新输入！");/*提示用户，密码输入不符合要求*/
  56.                      return false;/*阻止表单提交的boolean值*/
  57.                  } else {
  58.                      return true;/*全部验证通过，给用户提交*/
  59.                  }
  60.              }
  61.          </script>
  62.      </head>
  63.      <body>
  64.          <div>
  65.              <form action="#" method="post" onsubmit="return onsubmit_yz()"><%--form表单，onsubmit是当表单提交时触发的事件 --%>
  66.                  名称：<input id="name" type="text" name="userName" onblur="userName_yz()"/><%--onblur时当焦点离开时触发的事件 --%>
  67.                  <span id="span_1">要求大于3个字符且小于10个字符</span><%--要求提示 --%>
  68.                  <br/>
  69.                  密码：<input id="password" type="password" name="password" onblur="password_yz()"/>
  70.                  <span id="span_2">要求大于3个字符且小于10个字符</span>
  71.                  <br/>
  72.                  <input type="submit" value="提交"/><%--提交表单 --%>
  73.              </form>
  74.          </div>
  75.      </body>
  76.  </html>

jsp——js事件修改属性样式的两种方法（直接赋值、修改属性）、验证表单符合某要求、阻止表单提交、告诉浏览器不要缓存的更多相关文章

  1. js如何动态创建表格（两种方法）

    js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...

  2. 原生JS—实现图片循环切换的两种方法

    今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1  原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...

  3. js 修改页面样式的两种方式

    1.  element.style       行内样式操作 代码示例 : <!DOCTYPE html> <html lang="en"> <hea ...

  4. 【JS新手教程】JS修改css样式的几种方法

    本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...

  5. js获取json属性值的两种方法

    1.json.XXX 2.json["XXX"] 第二种方法使用场景,当属性值是变量时.如图所示:

  6. unity 改变鼠标样式的两种方法

    1.第一个直接改变鼠标样式 public var cursorTexture:Texture2D; private var changeFlag = false; function Update(){ ...

  7. Oracle 修改字段顺序的两种方法

    分类: Oracle 如果要修改字段顺序,一般情况可以使用以下步骤: --(1)备份目标表数据 create table 临时表 as select * from 目标表; --(2)drop 目标表 ...

  8. node.js接收异步任务结果的两种方法----callback和事件广播

    事件广播 发送方调用emit方法,接收方调用on方法,无论发送方或是接收方,都会工作在一个频道 声明了一个模块,用于读取mime.json中的记录 var fs = require('fs'); va ...

  9. js中获取css样式的两种方式

    1. 对象.style.样式名  弊端就是只能获取行内样式 2.window.getComputedStyle(对象,null); 最好用第二种方式 <!DOCTYPE html> < ...

随机推荐

  1. 【BZOJ2124】等差子序列 树状数组维护hash值

    [BZOJ2124]等差子序列 Description 给一个1到N的排列{Ai},询问是否存在1<=p1<p2<p3<p4<p5<…<pLen<=N ...

  2. info 手册

      info flex 可以查看flex帮助. h就可以看到相关命令,常用命令已经加粗: x           关闭此帮助窗口. q           一并退出 Info. RET         ...

  3. yum -y install epel-release

    EPEL - Fedora Project Wiki https://fedoraproject.org/wiki/EPEL

  4. atob, slice,bin2hex,escape

    JS处理二进制数据 http://phpor.net/blog/post/1898

  5. Java RTTI and Reflection

    Reference: Java编程思想 java 反射(Reflect) Java系列笔记(2) - Java RTTI和反射机制 Java Reflection in Action, 有空再补 -- ...

  6. 2015-04-14——css3 @media

    //判断横竖屏 @media screen and (min-aspect-ratio: 13/13) { body {background-color:red;}}  //屏幕宽高比,必须是除数形式 ...

  7. JSP使用网站访问人数统计功能，方法与技巧

    实现网站访问人数统计功能的步骤: 创建静态登录页面,并指定表单提交由登录处理页面进行处理. 创建登录处理页面获得登录信息,查询数据库,判断该用户是否注册,如果该用户已注册,把已登录用户的信息保存在一个 ...

  8. numpy.random.seed()

    numpy.random.seed():用于指定随机数生成时使用算法的开始值,如果没有指定每次生成的值都不一样 如果不指定seed的值,那么每次随机生成的数字都不一样: In [17]: import ...

  9. 第一课 GCC入门

    1序言 gcc是一个可移植的编译器,支持多种硬件平台:也不仅仅是一个本地编译器也是一个跨平台编译器:支持多张语言编译时按照模块化设计支持多种语言. gcc编译过程:预处理(预处理器):编译(编译器): ...

  10. Canvas：技术小结

    Canvas:技术小结 资料 [教程:MDN官方中文教程] https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial [ ...