代码
<%@ 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事件修改属性样式的两种方法（直接赋值、修改属性）、验证表单符合某要求、阻止表单提交、告诉浏览器不要缓存的更多相关文章
-
js如何动态创建表格（两种方法）
js如何动态创建表格(两种方法) 一.总结 一句话总结: 1.方法一:写好创建表格的html代码,将之赋值给div的innerHTML. 2.方法二.直接用创建好的table元素的方法insertRo ...
-
原生JS—实现图片循环切换的两种方法
今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法.多余的话我们就不多说了,我们一个一个开始讲吧. 1 原生JS实现图片循环切换 -- 方法一 在上栗子之前我们先简单介绍一下所用的一些知识点. ...
-
【JS新手教程】JS修改css样式的几种方法
本文试验了几种JS修改css样式的方法,方法1:元素.style.样式=样式值.方法2:元素.style.cssText=样式:样式值方法3:元素.style[样式]=样式值 .cssText这种,可 ...
-
js获取json属性值的两种方法
1.json.XXX 2.json["XXX"] 第二种方法使用场景,当属性值是变量时.如图所示:
-
unity 改变鼠标样式的两种方法
1.第一个直接改变鼠标样式 public var cursorTexture:Texture2D; private var changeFlag = false; function Update(){ ...
-
Oracle 修改字段顺序的两种方法
分类: Oracle 如果要修改字段顺序,一般情况可以使用以下步骤: --(1)备份目标表数据 create table 临时表 as select * from 目标表; --(2)drop 目标表 ...
-
node.js接收异步任务结果的两种方法----callback和事件广播
事件广播 发送方调用emit方法,接收方调用on方法,无论发送方或是接收方,都会工作在一个频道 声明了一个模块,用于读取mime.json中的记录 var fs = require('fs'); va ...
-
js中获取css样式的两种方式
1. 对象.style.样式名 弊端就是只能获取行内样式 2.window.getComputedStyle(对象,null); 最好用第二种方式 <!DOCTYPE html> < ...
-
jQuery事件函数位置放置的两种方法
jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数. 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法. 通常会把 jQuery 代码放到 <head& ...
随机推荐
-
MySQL大数据优化
我们考虑的情况是在你的数据量很大的情况下,千万级别的数据量.不要当我们的请求响应时间已经让我无法忍受的时候,再来想起来优化,可能有点迟了.因为可能会丢失很多潜在的价值客户.所以,在我们当初设计表,或者 ...
-
自然语言15.1_Part of Speech Tagging 词性标注
QQ:231469242 欢迎喜欢nltk朋友交流 https://en.wikipedia.org/wiki/Part-of-speech_tagging In corpus linguistics ...
-
SQLite及ORMlite在WebApp中的使用
Spring 配置 下面的databaseUrl在windows下,指向了c:/user/yourhome路径,暂时没想到怎么配置到WEBAPP根路径下. 因为是轻量级工控webapp,数据库规模不大 ...
-
Java 炫舞按键功能 DancingPlay (整理)
/** * Java 炫舞按键功能 DancingPlay (整理) * 2016-1-2 深圳 南山平山村 曾剑锋 * * 设计声明: * 1.本次设计是模仿QQ炫舞类游戏,当图标到红色的检测区域时 ...
-
codevs 1746 贪吃的九头龙
/* 状态定义的没错 就是考试的时候傻啦吧唧的转移左右孩子 其实之转移父亲就简单多了 不用考虑那么多 还有就是偷懒没有把谁有没有找过这个信息转过去 而是搞了个全局变量…wa到挺 再就是特盘的时候还有终 ...
-
Agent J（求三个圆围成的区域面积）
A - A Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%lld & %llu Submit Status P ...
-
MongoDB的简单操作
一.简介 二.MongoDB基础知识 三.安装 四.基本数据类型 五.增删改查操作 六.可视化工具 七.pymongo 一.简介 MongoDB是一款强大.灵活.且易于扩展的通用型数据库 MongoD ...
-
第76课 最小生成树（Prim）
图解: 添加prim函数: #ifndef GRAPH_H #define GRAPH_H #include "Object.h" #include "SharedPoi ...
-
php的语法
常量:不变的量: php 设置常量的方法:define()方法: define("常量名","常量的值",true) 参数三:大小写是否敏感: php中的常量, ...
-
Python3基础 if else 格式 输入一个整数并判断是8吗
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...