代码

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html>

 <html>

     <head><%-- 告诉浏览器不要缓存 --%>

         <meta http-equiv ="proma" content = "no-cache"/>

         <meta http-equiv="cache-control" content="no cache" />

         <meta http-equiv="expires" content="0" />

         <meta charset="UTF-8">

         <title>test</title><%--设置网页标题 --%>

         <style type="text/css">/*css样式*/

             body {

                 margin-left: 25%;/*设置整个页面离浏览器左边空25%*/

                 margin-right: 25%;/*设置整个页面离浏览器右边空25%*/

                 background-color: #F2F2F2;/*设置整个页面背景颜色*/

             }

             div {

                 background-color: #97D775;/*设置div背景颜色*/

                 height: 2000px;/*设置div高度*/

             }

         </style>

         <script type="text/javascript">/*js*/

             function userName_yz() {/*当焦点离开时触发此事件，验证输入名称是否符合要求*/

                 var name = document.getElementById("name").value;/*根据id获取相应节点，然后取value值*/

                 var span_1 = document.getElementById("span_1");/*根据id获取相应节点*/

                 if(name.length <= 3 || name.length >= 10) {/*验证输入名称是否符合要求*/

                     span_1.style.display="inline";/*第一种修改属性样式*/

                     span_1.style.color="red";

                     return false;/*为了后面表单提交返回的一个boolean类型*/

                 } else {

                     span_1.style.display="none";

                     return true;/*为了后面表单提交返回的一个boolean类型*/

                 }

             }

             function password_yz() {/*当焦点离开时触发此事件，验证输入密码是否符合要求*/

                 var password = document.getElementById("password").value;

                 var span_2 = document.getElementById("span_2");

                 if(password.length <= 3 || password.length >= 10) {

                     span_2.setAttribute("style", "display: inline");/*第二种修改属性样式*/

                     span_2.setAttribute("style", "color: red");

                     return false;/*为了后面表单提交返回的一个boolean类型*/

                 } else {

                     span_2.setAttribute("style", "display: none");

                     return true;/*为了后面表单提交返回的一个boolean类型*/

                 }

             }

             function onsubmit_yz() {/*当表单提交时触发此事件，验证所有的要求是否符合*/

                 if(!userName_yz()) {/*根据验证名称的返回boolean来判断*/

                     alert("名称输入不合要求，请重新输入！");/*提示用户，名称输入不符合要求*/

                     return false;/*阻止表单提交的boolean值*/

                 } else if(!password_yz()) {

                     alert("密码输入不合要求，请重新输入！");/*提示用户，密码输入不符合要求*/

                     return false;/*阻止表单提交的boolean值*/

                 } else {

                     return true;/*全部验证通过，给用户提交*/

                 }

             }

         </script>

     </head>

     <body>

         <div>

             <form action="#" method="post" onsubmit="return onsubmit_yz()"><%--form表单，onsubmit是当表单提交时触发的事件 --%>

                 名称：<input id="name" type="text" name="userName" onblur="userName_yz()"/><%--onblur时当焦点离开时触发的事件 --%>

                 <span id="span_1">要求大于3个字符且小于10个字符</span><%--要求提示 --%>

                 <br/>

                 密码：<input id="password" type="password" name="password" onblur="password_yz()"/>

                 <span id="span_2">要求大于3个字符且小于10个字符</span>

                 <br/>

                 <input type="submit" value="提交"/><%--提交表单 --%>

             </form>

         </div>

     </body>

 </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. 云计算和SDN中的开源交换机介绍以及使用

    之前关于SDN的开发工作都是在控制器层面上(以ryu为主),现在开始了新的工程项目,需要同时修改控制器和交换机的源码,如果后续项目需要,还可能需要加中间层——网络虚拟层,这部分的知识已经在前面读过了相 ...

  2. 【BZOJ3207】花神的嘲讽计划Ⅰ Hash+主席树

    [BZOJ3207]花神的嘲讽计划Ⅰ Description 背景 花神是神,一大癖好就是嘲讽大J,举例如下: “哎你傻不傻的![hqz:大笨J]” “这道题又被J屎过了!!” “J这程序怎么跑这么快 ...

  3. iOS 更改uitextfield placeholder颜色

    [passwordField setValue:TPColor forKeyPath:@"_placeholderLabel.textColor"];

  4. Scrapy命令和备注

    Scrapy命令和备注 1.创建一个新项目(命令行) project是项目名 scrapy startproject <project_name> 2.调试项目(pycharm) 在pyc ...

  5. Windows（7）上那些好用的软件及优化技巧（原创）

    *本文为原创内容,转载请注明作者和出处:www.cnblogs.com/wang1024 软件篇 注:以下软件在百度直接搜索软件名均可找到官网,直接官网下载即可 大众的软件哪个好: 杀毒软件专题 基于 ...

  6. 多个StoryBoard之间的跳转

    iOS项目中可以将同一业务流程的页面归置到一个StoryBoard中,项目中必然会包含多个StroryBoard,可以利用跳转,实现项目的不同业务流程页面间的跳转切换. 实现思路: 1,项目(Proj ...

  7. pip与apt-get

    在ubuntu服务器下安装包的时候,经常会用到sudo apt-get install 包名 或 sudo pip install 包名,那么两者有什么区别呢? 1.区别 pip用来安装来自PyPI( ...

  8. HTML布局四剑客-Flex,Grid,Table,Float

    前言 在HTML布局中有很多的选择,同一种表现方式可以使用不同的方法来实现.下面来对四种最常见的布局方式进行阐述和解释,它们分别是Float,Table,Grid和Flex Float 第一位出场的就 ...

  9. pycharm的MySQLdb模块导不进去时解决办法

    一.Windows下python2.7安装MySQLdb模块 根据Python多少位下载对应版本: 32位:https://pypi.python.org/pypi/MySQL-python/1.2. ...

  10. 转！java产生不重复随机数

    private static void testC(int sz) { long startTime = System.currentTimeMillis(); //开始测试时间 Random rd ...