触发form表单的两种提交方式,submit和button的用法_submitfield前端用法-程序员宅基地

技术标签: 前端  表单  javascript  

1.当输入用户名和密码为空的时候,需要判断。这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写;有两种方法,一种是用submit提交。一种是用button提交。 
方法一:

在jsp的前端页面的头部插入一个js方法:

function checkUser(){ 
var result = document.getElementById("userid").value; 
var password = document.getElementById("userpassid").value; 
if(result == "" ){ 
alert("用户名不能为空"); 
return false; 
} 
if(password == "" ){ 
alert("密码不能为空"); 
return false; 
}else{ 
return true; 
} 
}

在form表单里写成这样:

<form id="formid" name= "myform" method = 'post' action = 'user_login_submit.action' onsubmit = "return checkUser();" > 
<table width="100%" border="0"> 
<tr> 
<td width="60" height="40" align="right">用户名&nbsp;</td> 
<td><input type="text" value="" class="text2" name = "username" id = "userid"/></td> 
</tr> 
<tr> 
<td width="60" height="40" align="right">密&nbsp;&nbsp;码&nbsp;</td> 
<td><input type="password" value="" class="text2" name = "userpass" id = "userpassid"/></td> 
</tr> 
<tr> 
<td width="60" height="40" align="right">&nbsp;</td> 
<td><div class="c4"> 
<input type="submit" value="" class="btn2" />

方法二:

所有主流浏览器都支持 <button> 标签。

定义和用法

<button> 标签定义一个按钮。

在 button 元素内部,您可以放置内容,比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。

唯一禁止使用的元素是图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。

重要事项:如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值。Internet Explorer 将提交 <button> 与 <button/> 之间的文本,而其他浏览器将提交 value 属性的内容。请在 HTML 表单中使用 input 元素来创建按钮。

function checkUser(){ 
var result = document.getElementById(“userid”).value; 
var password = document.getElementById(“passid”).value;

if(result == “” ){ 
alert(“用户名不能为空”); 
return false; 
} 
if(password == “” ){ 
alert(“密码不能为空”); 
return false; 
} 
document.getElementById(“formid”).submit(); 
}

form表格的写法,需要写id 
<form id="formid" method = 'post' action = 'user_login_submit.action' >

button按钮的写法如下:

<input type="button" value="" class="btn2" onclick = "checkUser();" />

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/shadow_zed/article/details/77753221

智能推荐

JAVA中日期的处理-程序员宅基地

文章浏览阅读84次。JAVA中日期的处理(在此声明,这篇为非原创,只是在网上一朋友的帖子,在这里转载一下,便于以后学习使用,无商业目的)Java 语言的Calendar,GregorianCalendar (日历),Date(日期), 和DateFormat(日期格式)组成了Java标准的一个基本但是非常重要的部分. 日期是商业逻辑计算一个关键的部分. 所有的开发者都应该能够计算未来的日期, ..._java date 公元000年

HDU 2868 Neighbor Friend_neighbor friend acm-程序员宅基地

文章浏览阅读538次。HDU 2868 Neighbor Friend/**HDU 2868 Neighbor Friend题意:有n个人,m对身高关系a,b(a的身高小于b的身高)按身高排序,求有多少对人可以成为邻居解题思路:a,b,c三个人a->ba->cb->ca到c的最长距离大于1,所以a,c不能成为邻居问题转化,找出不能成为邻居的个数{(a,c)}剩下的就是邻居的可能数量{(a,b_neighbor friend acm

微服务[学成在线] day07:课程管理开发_学成在线day07-程序员宅基地

文章浏览阅读388次。???? 知识点概览为了方便后续回顾该项目时能够清晰的知道本章节讲了哪些内容,并且能够从该章节的笔记中得到一些帮助,所以在完成本章节的学习后在此对本章节所涉及到的知识点进行总结概述。本章节为【学成在线】项目的 day07 的内容 对课程管理的CRUD 级联菜单 使用 mongoDB 储存数据字典目录内容会比较多,小伙伴们可以根据目录进行按需查阅。文章目录???? 知识点概览目录一、课程查询0x01 需求分析0x02 定义API接口0x03 课程管理服务PageHelperDaoSer_学成在线day07

appcan 定位 计算 距离_基于RFID技术下的化工厂定位系统,包含化工厂人员定位方案...-程序员宅基地

文章浏览阅读78次。一.系统简介苏州新导化工厂人员定位系统是苏州新导针对市场需求开发的集RFID识别技术、计算机软硬件、信息采集处理、网络数据通讯等技术综合应用为一体的自动识别信息技术。该系统通过对电子标签远距离非接触式识别,实现对人员的区域定位监测,集成了计算机网络技术、通信技术、地理信息技术、嵌入式微处理器等技术。二.系统功能1.即时定位化工厂人员定位系统控制流和数据流不用轮巡,多个远距离读头数据刷新以毫秒来计算..._appcan rfid

python 终止函数命令_如何使“停止”按钮终止已经在Tkinter(Python)中运行的“启动”函数...-程序员宅基地

文章浏览阅读2.4k次。我用Tkinter制作了一个图形用户界面,有两个主按钮:“开始”和“停止”。请您就如何使用“停止”按钮终止“开始”按钮为以下代码调用的已运行功能提供建议?在正如您所期望的那样,当“启动”功能运行时,整个窗口(包括“停止”按钮)卡住/没有响应。在“start”函数从一些html文件中提取一些信息,这可能需要相当长的时间(对于20个巨大的文件,它可能需要10分钟左右),我希望用户能够随时中断该过程。在..._tkinter开始和终止一个循环

oracle column的设置,oracle实验-设置基于Column - Level 的VPD-程序员宅基地

文章浏览阅读306次。设置基于Column - Level 的VPD从Oracle 10g开始,我们可以设置基于column-level的VPD,从而保护那些资料表中的重要信息列,比如password column、Price等(这个要根据具体的应用需求来定),有两种column-level的方法可以使用:1)使用column-level VPD 保护数据不被访问2)Display the column with NU..._oracle中column

随便推点

bootstrap源码学习与示例:bootstrap-tab-程序员宅基地

文章浏览阅读56次。2019独角兽企业重金招聘Python工程师标准>>> ..._如何提高bootstrap源码可读

linux下文件的创建时间、访问时间、修改时间和改变时间_服务器内的文件 创建时间和修改时间一样吗-程序员宅基地

文章浏览阅读2k次。 Linux系统中没有命令可以确切的查看一个文件的生成时间,但是可以知道访问时间,修改时间,改变时间。可以通过stat命令查看一个文件的访问时间,修改时间,改变时间:以下为三个时间的区别:1、访问时间(accesstime):读取一次文件的内容,该时间便会更新。比如对这个文件使用less命令或者more命令。(ls、stat这样的命令不会修改文件访问时间)。2、修改时间(m..._服务器内的文件 创建时间和修改时间一样吗

ec2上mysql和rds区别,Amazon RDS Aurora,RDS MySQL,EC2上的MySQL?-程序员宅基地

文章浏览阅读247次。I've been looking around for best practices when setting up your database on the cloud but it still isn't clear to me which of the following solutions should we be going for?Amazon RDS AuroraAmazon RD..._ec2 mysql8x vs rds mysql8

小议IT公司的组织架构-程序员宅基地

文章浏览阅读2.1k次。IT公司的组织结构还是很相似的,常见的部门也不多。我简单地总结了下,分享给各位。每个公司都有自己独特的组织架构,本文仅供参考。很多部门和职位的职责和权力,我也不甚了解。简单地写写,有兴趣的同学可以补充下。董事会 董事长,董事。 董事一般分为执行董事(常务董事)和非执行董事。一般来说,执行董事是那些全职负责公司管理的人。 而非执行董事是那些从外部引入的有丰富经验的专家,他们使公司..._it公司的研发部的研究项目采用哪种组织结构

word转PDF不能显示中文字体问题_pdfconverter.getinstance()没有convert-程序员宅基地

文章浏览阅读1.1w次。maven依赖 &lt;dependency&gt; &lt;groupId&gt;fr.opensagres.xdocreport&lt;/groupId&gt; &lt;artifactId&gt;org.apache.poi.xwpf.converter.pdf&lt;/artifactId&gt; &l..._pdfconverter.getinstance()没有convert

Free -programming-books_free programming-程序员宅基地

文章浏览阅读2.2k次。https://github.com/EbookFoundation/free-programming-books/blob/master/free-programming-books.md_free programming

推荐文章

热门文章

相关标签