javascript之表单

最新推荐文章于 2020-10-12 21:39:22 发布
最新推荐文章于 2020-10-12 21:39:22 发布
阅读量838 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chejinqiang/article/details/44116937
本文详细介绍了HTML表单的设计与JavaScript验证方法，包括表单基础、表单元素、按钮、文本域、复选框及单选按钮等内容。还探讨了如何使用JavaScript进行表单验证，确保用户输入的有效性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

第十七章 表单和表单元素
表单是网页设计中的重要内容。没有表单，就不能实现网页内容的交互。
17.1 表单基础
javaScript通过Form对象访问XHTML文档内的表单。Form对象是Document对象的一个子对象。
Form对象的常用属性：
action        动作属性值，表示用户提交表单后，数据要传送到的URL。
elements[]    表单域对象队列，
encoding  enctype属性的值
enctype   适当的DOM方式访问enctype属性值
length   与elements.length等价
method  可以是get,post
name  名称
target   要显示内容的页面所在框架的名称。_blank,_parent,_self,_top
访问表单
在扫描检测与操作表单域之前，可以通过如下方式来访问表单。
document.forms[]按编号
document.forms[]按名称
document.getElementById()
访问表单域
表单域可以通过elements[]来访问，也可以通过其名称来访问。
如下所示：
17.2  表单域
HTML支持很多表单元素，包括单行，多行文本框，口令域，下拉菜单，下拉列表，隐藏域以及众多的按钮。
Input元素属性
在DOM中，所有<input>标签都用HTMLInputElement对象来表示，下面是其公用属性与方法。
accessKey         包含给予该组件焦点的按键的字符串
defaultvalue     包含页面载入时value属性的字符串
disabled    是一个逻辑值，指出用户是否可以对该域进行操作
form    对包含该域的表单的只读引用
name    域名称
size   大小
tabIndex    tab次序
type    表明类型，可以为：text,button,checkbox,radio,submit,reset,password,image,hidden,file
blur()   失去焦点
focus()   获得焦点
按钮
HTML有三种类型的按钮，提交按钮，复位按钮，普通按钮，另外还有两种按钮，分别是图像按钮和无显著特征的按钮。
<input type="submit">
<input type="reset">
<input type="button">
要定义按钮上显示的文字，需要设置value属性，还可以使用公用属性来提升按钮的外观与可用性。如下例所示：
<form>
<input  type="button" value="click" name="button1" id="button1" title="please click me," style="background-color:red;color:white;"accesskey="c">
</form>
提交按钮的默认行为是将表单送往服务器进行处理，复位按钮将恢复表单域的初始样式。普通按钮没有默认动作，要使用普通按钮同，需要附加一个onclick事件处理器。
图像按钮可以使网页看起来更灵活，创建图像按键的方法有：在一个图片上加上链接，
<a href="javascript:document.myform.submit();">
<img src=" " width="55" height="21" border="0" alt="submit">
</a>
<input type="image" name="testbutton" id="testbutton" src=" " alt="submit">
无显著特征的按钮
在HTML和XHTML中提供了<button>标签，比<input>标签表现更灵活，可以创建更具视觉效果的按钮。
<button type=submit,button,reset; name=  id=  value= >
<button type="button" name="mybutton" id="mybutton">
<img src=" " border="0" alt="button">
</button>
文本域与文本区
文本输入框有三种形式：单行文本域，口令域，和多行文本域。
<input type="text">
<input type="password">
其附加属性如下:
maxlength    最大字符数
readonly    一个逻辑值，表示是否允许用户编辑域中内容
select()    选择域中内容。例如：准备替换或读取剪贴板的内容
多行文本或使用<textarea>来创建，基本语法如下：
<textarea name=" " id=" " rows=" " cols=" "></textarea>
限制文本域的输入长度：
<textarea> 并不能限制输入内容的长度，使用javascript则可以轻松做到。如下代码：
<texarea name=" " id=" " rows="4" cols="40" onkeypress="return(document.myform.comments.value.length<100);">
本区域中，最多只允许输入100个字符。
</textarea>
限制输入长度的文本区之二的代码如下：
<!--17.7.html-->
<html>
<head></head>
<body>
<h1>限制输入长度的文本区</h1>下面的文本区中允许输入100个以内的字符。若输入超过10或以后，多出的部分会被删除。
<form id="myform" name="myform" action="#" method="get">
<span style="white-space:pre">	</span><label>comments:<br>
<span style="white-space:pre">		</span><textarea id="comments" name="comments" rows="8" cols="8" onchange="checkLimit(this,100);">
</textarea>
</label>
</form>
<script language="javascript">
function checkLimit(field,limit){
if(field.value.length>limit){
alert("允许最多输入");
field.value=field.value.slice(0,limit-1);
field.focus();
}
}
</script>
</body>
</html>
17.2.6 复选框与单先按钮
与文本域相比，复选框与单选按钮要有限的多。在XHTML中，复选框与单选按钮非常相似。如下：
<input type="checkbox,radio" name id value checked=" ">
如下代码所示：
<!--17.8.html-->
<html>
<head></head>
<body>
<h2 align="center">复稳定框按钮与单选按钮示例</h2>
<form name="testform" id="testform" action="#" method='get'>
<em> 复选框：</em>
<input type="checkbox" name="check1" id="check1" value="testvalue">
<br><br>
<em>单选按钮:</em>
yes:<input type="radio" name="radiogroup" id="radio1" value="yes">
no:<input type="radio" name="radiogroup" id="radio2" value="no">
maybe:<input type="radio" name="radiogroup" id="radio3" value="maybe">
<br><br>
<input type="button" value="选择复选框" onclick="document.testform.check1.click();">
<input type="button" value="选择单选按钮" onclick="document.testform.radiogroup[0].click();">
<input type="button" value="使复选框获得按钮" onclick="document.testform.check1.focus();">
 <input type="button" value="使复选框失去焦点" onclick="document.testform.check1.blur();">
 <input type="button" value="复选框状态" onclick="alert('checked?'+document.testform.check1.checked);">
 <input type="button" value="单选框按钮状态" onclick="showradiovalue(document.testform.radiogroup);">
</form>
<script language='javascript'>
<span style="white-space:pre">	</span>function showradiovalue(radiogroup){
<span style="white-space:pre">		</span>var numradios=radiogroup.length;
<span style="white-space:pre">		</span>for(var i=0;i<numradios;i++)
<span style="white-space:pre">		</span>if(radiogroup[i].checked)
<span style="white-space:pre">		</span>alert("radio"+i+"with value of" +radiogroup[i].value);
<span style="white-space:pre">		</span>}
<span style="white-space:pre">	</span></script>
</body>
</html>
17.2.7  文件上传
使用<input type="file">文件上传域有一个特有的accept附加属性，用来定义用户可以上 传的MIME类型。
17.3  表单验证
JavaScript最常 用的功能之一就是表单验证，在提交表单前进行表单验证，可以节约服务器周期，为用户节省等等的时间。
通常，表单验证发生在内容输入结束，表单提交之前，表单的onsubmit事件处理器中有一组函数负责验证。如果输入中包含非法数据，处理器会返回false,显示一条信息，同时取消提交。
1.验证内容是否为空：
<!--17.9.html-->
<html>
<span style="white-space:pre">	</span><head></head>
<span style="white-space:pre">	</span><body>
<span style="white-space:pre">		</span><h1 align='center'>表单验证简单示例</h1>
<span style="white-space:pre">		</span><h3 align="center">输入内容不可为空</h3>
<span style="white-space:pre">		</span><form name="myform" id="myform" method="get" action="http://www.javascriptref.com/" onsubmit="return validate();">
<span style="white-space:pre">			</span>username:
<span style="white-space:pre">			</span><input type="text" size="30" maxlength="30" name="username" id="username" >
<input type="submit" value="提交">
<span style="white-space:pre">		</span></form>
<script language="javascript">
function validate(){
if(document.myform.username.value=="")
{alert("username is null");return false;}
}
</script>
<span style="white-space:pre">	</span></body>
</html>
上例中存在很多的不足，比如说输入一个空格也可以通过。在不能通过验证时，出错的文本获得焦点。如下代码所示：
 <!--17.10.html-->
<html>
<span style="white-space:pre">	</span><head></head>
<span style="white-space:pre">	</span><body>
<span style="white-space:pre">		</span><h1><center>改进的表单验证</center></h1>
<span style="white-space:pre">		</span><center><h3>提交前必须输入内容，但不可是空格，返回后，出错的表单域会获得焦点</h3></center>
<span style="white-space:pre">		</span><form action="http://www.javascriptref.com/" method="get" onsubmit="return validate();" name='myform' id="myform">
<span style="white-space:pre">			</span>username:
<span style="white-space:pre">			</span><input type="text" size="30" maxlength="30" name="username" id="username"><br>
<span style="white-space:pre">			</span>password:
<span style="white-space:pre">			</span><input type="text" size="30" maxlength="60" name="userpass" id="userpass"><br>
<span style="white-space:pre">			</span><input type="submit" value="提交">
<span style="white-space:pre">		</span></form>
<span style="white-space:pre">		</span><script language='javascript'>
<span style="white-space:pre">			</span>var whitespace="\t\n\r";
<span style="white-space:pre">			</span>function isEmpty(s){
<span style="white-space:pre">				</span>var i;
<span style="white-space:pre">				</span>if((s==null)||(s.length==0))
<span style="white-space:pre">				</span>return true;
<span style="white-space:pre">				</span>for(i=0;i<s.length;i++){
<span style="white-space:pre">					</span>var c=s.charAt(i);
<span style="white-space:pre">					</span>if(whitespace.indexOf(c)==-1)
<span style="white-space:pre">					</span>return false;
<span style="white-space:pre">					</span>}
<span style="white-space:pre">					</span>return true;
<span style="white-space:pre">				</span>}
<span style="white-space:pre">				</span>function validate(){
<span style="white-space:pre">					</span>if(isEmpty(document.myform.username.value)){
<span style="white-space:pre">						</span>alert("error");
<span style="white-space:pre">						</span>return false;
<span style="white-space:pre">						</span>}
<span style="white-space:pre">						</span>if(isEmpty(document.myform.userpass.value)){
<span style="white-space:pre">							</span>alert("error");
<span style="white-space:pre">							</span>return false;
<span style="white-space:pre">							</span>}
<span style="white-space:pre">							</span>return true;
<span style="white-space:pre">					</span>}
<span style="white-space:pre">			</span></script>
<span style="white-space:pre">	</span></body>
</html>
编写验证表单
多数表单都需要验证，从本节开始介绍常见表单的验证方法。
验证E-mail地址
混合表单验证
<!--17.11.html-->
<html>
<span style="white-space:pre">	</span><head>
    <span style="white-space:pre">	</span><script language="javascript">
<span style="white-space:pre">			</span>function isEmpty(s){
<span style="white-space:pre">				</span>if(s===null||s.length===0)
<span style="white-space:pre">				</span>return true;
<span style="white-space:pre">				</span>return !/\S/.test(s);
<span style="white-space:pre">				</span>}
<span style="white-space:pre">				</span>function looksLinkEmail(field){
<span style="white-space:pre">					</span>var s=field.value;
<span style="white-space:pre">					</span>if(isEmpty(s)){alert("null");field.focus();return false;}
<span style="white-space:pre">					</span>if(/[^@]+@\w+/.test(s))
<span style="white-space:pre">					</span>return true;
<span style="white-space:pre">					</span>else{
<span style="white-space:pre">						</span>alert("email is not valible");
<span style="white-space:pre">						</span>field.focus();
<span style="white-space:pre">						</span>return false;
<span style="white-space:pre">						</span>}
<span style="white-space:pre">						</span>}
<span style="white-space:pre">				</span>function isInteger(field){
<span style="white-space:pre">					</span>if(isEmpty(field.value)){
<span style="white-space:pre">						</span>alert("null");
<span style="white-space:pre">						</span>field.focus();
<span style="white-space:pre">						</span>return false;
<span style="white-space:pre">						</span>}
<span style="white-space:pre">						</span>if(!(/^-?\d+$/.test(field.value))){
<span style="white-space:pre">							</span>alert("it is only number");
<span style="white-space:pre">							</span>field.focus();
<span style="white-space:pre">							</span>return false;
<span style="white-space:pre">							</span>}
<span style="white-space:pre">					</span>}
<span style="white-space:pre">					</span>function validate(){
<span style="white-space:pre">						</span>if(isEmpty(document.myform.username.value))
<span style="white-space:pre">						</span>{alert("null");
<span style="white-space:pre">							</span>document.myform.username.focus();
<span style="white-space:pre">							</span>return false;
<span style="white-space:pre">							</span>}
<span style="white-space:pre">							</span>if(!looksLikeEmail(document.myform.useremail))
<span style="white-space:pre">							</span>return false;
<span style="white-space:pre">							</span>if(!isInteger(document.myform.favoritenumber))
<span style="white-space:pre">							</span>return false;
<span style="white-space:pre">							</span>return true;
<span style="white-space:pre">						</span>}
<span style="white-space:pre">					</span>
<span style="white-space:pre">			</span></script>
    </head>
<span style="white-space:pre">	</span><body>
<span style="white-space:pre">		</span><h1>混合表单确认示例</h1>
<span style="white-space:pre">		</span>输入要求，。。2011-1-23 14:03:51。。。。。。。。。。。。。<br>
<span style="white-space:pre">		</span><form name="myform" id="myform" action="http://www.javascriptref.com" method='get' onsubmit="return validate();">
<span style="white-space:pre">			</span>姓名：<input type="text" name="username" id="username" size="30" maxlength="90"><br>
<span style="white-space:pre">			</span>Email:<input type="text" name="useremail" id="useremail" size="30" maxlength="90"><br>
<span style="white-space:pre">			</span>喜欢的数字：<input type="text" name="favoritenumber" id="favoritenumber" size="10" maxlength="10">
<span style="white-space:pre">			</span><br>
<span style="white-space:pre">			</span><input type="submit" value="提交">
<span style="white-space:pre">		</span></form>
<span style="white-space:pre">	</span>
<span style="white-space:pre">	</span></body>
</html>
通过隐藏域验证表单
一个更简洁的方式是使用隐藏表单域，可以使用如下的方式定义这两个表单域：
17.3.5   onchange事件
要验证一个表单域，不必等到表单提交后再进行，在用户改变其内容后。通过使用onchange事件处理器，可以立即对表单进行验证。
如下的代码所示：
<script language="javascript">
function validateZip(zip){
if(/\d{5}(-\d{4})?/.test(zip)
return true;
else
{
alert("zip code must be of form");
return false;
}
}
</script>
 <form action="#" method="get">
<input type="text" name="zipcode" id="zipcode" onchange="return validateZip(this.value);">
</form>
17.3.6  按键屏蔽
前面介绍了如何在提交时捕获错误，但是如果要预防错误产生。则可以使用JavaScript来实现，其输入框中只能输入数字，当试图输入其他字符时，不会作出反应。
代码如下所示：
<!--按键屏蔽-->
<html>
<span style="white-space:pre">	</span><body>
<span style="white-space:pre">	</span><center><h1>按键屏蔽示例</h1></center>
<span style="white-space:pre">	</span>在下面的输入框中，只接受数字的输入，若输入其他字符，会被屏蔽。
<span style="white-space:pre">	</span><form name="testform" id="testform" action="#" method="get">
<span style="white-space:pre">		</span>Robot serial number:
<span style="white-space:pre">		</span><input type="text" name="serialnumber" id="serialnumber" size="10" maxlength="10" onkeypress="return isNumberInput(this,event);">
<span style="white-space:pre">		</span>
<span style="white-space:pre">		</span>
<span style="white-space:pre">	</span></form>
<span style="white-space:pre">	</span><script language="javascript">
<span style="white-space:pre">		</span>function isNumberInput(field,event){
<span style="white-space:pre">			</span>var key,keyChar;
<span style="white-space:pre">			</span>if(window.event)
<span style="white-space:pre">			</span>key=window.event.keyCode;
<span style="white-space:pre">			</span>else if(event)
<span style="white-space:pre">				</span>key=event.which;
<span style="white-space:pre">				</span>else
<span style="white-space:pre">					</span>return true;
<span style="white-space:pre">					</span>if(key==null||key==0||key==8||key==13||key==27)
<span style="white-space:pre">					</span>return true;
<span style="white-space:pre">					</span>keyChar=String.fromCharCode(key);
<span style="white-space:pre">					</span>if(/\d/.test(keyChar)){
<span style="white-space:pre">						</span>window.status="";return true;}
<span style="white-space:pre">						</span>else
<span style="white-space:pre">							</span>{window.status="数字";
<span style="white-space:pre">								</span>return false;
<span style="white-space:pre">								</span>
<span style="white-space:pre">								</span>}
<span style="white-space:pre">			</span>
<span style="white-space:pre">			</span>}
<span style="white-space:pre">		</span></script>
</body>
</html>
17.4   表单可用性与JavaScript
在JavaScript中，可以从多个方面着手对表单的可用性进行改进，例如焦点域，自动域跳转，屏蔽域。
17.4.1  起始焦点域
用户打开一个页面后，希望能立即进行数据的输入，由于很多页面并没有将焦点设置在默认的表单域，因此，用户不得不手动选择起始焦点域，使用JavaScript可以很容易的设置一个起始焦点域，以方面用户的输入。一般可以使用onload事件设置文档的起始焦点。
<body onload="window.document.testform.firstname.focus();">
17.4.2  标签与域选择
屏蔽域
屏蔽的表单域不能接受用户的输入，也不是页面标记序列的一部分，更不能进行提交操作。在HTML中有一个disabled属性。





<script type="text/javascript">
	//表单基础
	//HTML表单是通过<form>元素来定义的，它有以下特性。
	//method<GET,POST>,action(要提交的URL)
	//enctype－当向服务器发送数据时应该使用的编码方法，默认为application/x-www-url-encoded.不过要上传文件可以设置为multipart/form-data
	//<input> type判断是哪种文本控件
	//"text"单行文本框，"radio"单选按钮，"checkbox"复选框,"file"文件上传文本框,"password"密码输入框.
	//"button"一般按钮，"submit"提交按钮，"reset"重置按钮，"hidden"不会出现在屏幕上的输入字段。
	//"image"图像，与提交按钮功能相同。
	//<select>下拉列表框，里面的值由<option>元素定义。
	//<textarea>-多行文本框，尺寸由rows和cols特性来确定。
			<form method="post" action="handlepost.jsp">
	<label for="txtName">Name:</label><br>
<input type="text" id="txtName" name="txtName"><br>
<label for="txtPassword">password:</label><br>
<input type="password" id="txtPassword" name="txtPassword"><br>
<label for="selAge">Age</label><br>
<select name="selAge" id="selAge">
	<option>18-21</option>
	<option>22-25</option>
	<option>26-29</option>
	<option>30-35</option>
	<option>over 35</option>
</select><br>
<label for="txtComments">Comments:</label><br>
<textarea rows="10" cols="50" id="txtComments" name="txtComments"></textarea><br>
<input type="submit" value="submit form">
		</form>
		////////////////////////////////
///for特性指定它绑定的表单的ID，每个表单字段都应该包含id和name特性，且值相等。name用于将数据提交服务器，而id用于在客户端确定元素.
//获取表单的引用
var oForm=document.getElementById("form1");
或
var oForm=document.forms[0];
var oForm=document.forms["formz"];//使用name特性
//访问表单字段
var oFirstField=oForm.elements[0];
var oTextbox1=oForm.elements["textbox1"];
var oTextbox1=oForm.textbox1;
//表单字段的共性
//disabled特性可用来获取或设置表单控件是否被禁用
//form用来指定字段所在的表单，blur()方法可以使字段失去焦点。focus()方法会让表单字段获取焦点.
var oField1=oForm.elements[0];
vr oField2=oForm.elements[1];
oField1.disabled=true;
oField2.focus();
alert(oField1.form==oForm);
//聚焦于第一个字段
//很多开发人员将下面一段代码放在onload事件中
document.forms[0].elements[0].focus();
//提交表单
<input type="submit" value="Submit">
<input type="image" src="submit.gif">
<form method="post" action="javascript:alert('submitted')">
oForm=document.forms["form1"];
oForm.submit();
<input type="button" value="submit form" onclick="document.forms[0].submit()">
//onsubmit事件可以用来在提交过程前验证表单。
//仅提交一次。以防止用户多次点击而造成信用卡中多次扣钱
<input type="button" value="submit" onclick="this.disabled=true;this.form.submit()">
//文本框
//两种不同类型的文本框，单行的和多行的。<input type="text"><textarea>
//创建同时可以显示25个字符，最多容纳50个字符的文本框。
<input type="text" size="25" maxlength="50" value="initial value">
//获取/更改文本框的值value,length
//选择文本
function selectText(){
	var oTextbox1=document.getElementById("txt1");
	oTextbox1.focus();
	oTextbox1.select();
	}
//文本框事件
//两种文本框都支持blur和focus,同时还支持:change,select
//change,当用户更改内容后文本失去焦点时发生。select,当一个或多个字符被选中时发生。
<input type="text" name="textbox1" value="" onblur="alert('blur')" onchange="alert('change')">
//自动选择文本
<input type="text" onfocus="this.select()">
//自动切换到下一个
//禁止粘贴
onpaste="return false";
//////////////////////////////////
//列表框和组合框
//HTML为每个<select>定义了options集合，它是控件的所有<option>元素的列表。
alert(oListbox.options[1].text);// 返回显示文本
alert(oListbox.options[1].value);//返回值特性
alert(oListbox.options[1].index);//返回位置
//<select>元素有一个selectedIndex特性，它总是包含目前选中的选项的索引。
//getSelectedIndexes()方法.
//添加选项，使用DOM方法创建<option>元素，并通过创建一个文本节点来分配选项名称。
//删除选项
oListbox.options[1]=null;
	</script>


<!--17.7.html-->
<html>
<head></head>
<body>
<h1>限制输入长度的文本区</h1>下面的文本区中允许输入100个以内的字符。若输入超过10或以后，多出的部分会被删除。
<form id="myform" name="myform" action="#" method="get">
	<label>comments:<br>
		<textarea id="comments" name="comments" rows="8" cols="8" onchange="checkLimit(this,100);">
</textarea>
</label>
</form>
<script language="javascript">
function checkLimit(field,limit){
if(field.value.length>limit){
alert("允许最多输入");
field.value=field.value.slice(0,limit-1);
field.focus();
}
}
</script>
</body>
</html>

<!--17.8.html-->
<html>
<head></head>
<body>
<h2 align="center">复稳定框按钮与单选按钮示例</h2>
<form name="testform" id="testform" action="#" method='get'>
<em> 复选框：</em>
<input type="checkbox" name="check1" id="check1" value="testvalue">
<br><br>
<em>单选按钮:</em>
yes:<input type="radio" name="radiogroup" id="radio1" value="yes">
no:<input type="radio" name="radiogroup" id="radio2" value="no">
maybe:<input type="radio" name="radiogroup" id="radio3" value="maybe">
<br><br>
<input type="button" value="选择复选框" onclick="document.testform.check1.click();">
<input type="button" value="选择单选按钮" onclick="document.testform.radiogroup[0].click();">
<input type="button" value="使复选框获得按钮" onclick="document.testform.check1.focus();">
 <input type="button" value="使复选框失去焦点" onclick="document.testform.check1.blur();">
 <input type="button" value="复选框状态" onclick="alert('checked?'+document.testform.check1.checked);">
 <input type="button" value="单选框按钮状态" onclick="showradiovalue(document.testform.radiogroup);">
</form>
<script language='javascript'>
	function showradiovalue(radiogroup){
		var numradios=radiogroup.length;
		for(var i=0;i<numradios;i++)
		if(radiogroup[i].checked)
		alert("radio"+i+"with value of" +radiogroup[i].value);
		}
	</script>
</body>
</html>

<!--17.9.html-->
<html>
	<head></head>
	<body>
		<h1 align='center'>表单验证简单示例</h1>
		<h3 align="center">输入内容不可为空</h3>
		<form name="myform" id="myform" method="get" action="http://www.javascriptref.com/" onsubmit="return validate();">
			username:
			<input type="text" size="30" maxlength="30" name="username" id="username" >
<input type="submit" value="提交">
		</form>
<script language="javascript">
function validate(){
if(document.myform.username.value=="")
{alert("username is null");return false;}
}
</script>
	</body>
</html>

<!--17.10.html-->
<html>
	<head></head>
	<body>
		<h1><center>改进的表单验证</center></h1>
		<center><h3>提交前必须输入内容，但不可是空格，返回后，出错的表单域会获得焦点</h3></center>
		<form action="http://www.javascriptref.com/" method="get" onsubmit="return validate();" name='myform' id="myform">
			username:
			<input type="text" size="30" maxlength="30" name="username" id="username"><br>
			password:
			<input type="text" size="30" maxlength="60" name="userpass" id="userpass"><br>
			<input type="submit" value="提交">
		</form>
		<script language='javascript'>
			var whitespace="\t\n\r";
			function isEmpty(s){
				var i;
				if((s==null)||(s.length==0))
				return true;
				for(i=0;i<s.length;i++){
					var c=s.charAt(i);
					if(whitespace.indexOf(c)==-1)
					return false;
					}
					return true;
				}
				function validate(){
					if(isEmpty(document.myform.username.value)){
						alert("error");
						return false;
						}
						if(isEmpty(document.myform.userpass.value)){
							alert("error");
							return false;
							}
							return true;
					}
			</script>
	</body>
</html>

<!--17.11.html-->
<html>
	<head>
    	<script language="javascript">
			function isEmpty(s){
				if(s===null||s.length===0)
				return true;
				return !/\S/.test(s);
				}
				function looksLinkEmail(field){
					var s=field.value;
					if(isEmpty(s)){alert("null");field.focus();return false;}
					if(/[^@]+@\w+/.test(s))
					return true;
					else{
						alert("email is not valible");
						field.focus();
						return false;
						}
						}
				function isInteger(field){
					if(isEmpty(field.value)){
						alert("null");
						field.focus();
						return false;
						}
						if(!(/^-?\d+$/.test(field.value))){
							alert("it is only number");
							field.focus();
							return false;
							}
					}
					function validate(){
						if(isEmpty(document.myform.username.value))
						{alert("null");
							document.myform.username.focus();
							return false;
							}
							if(!looksLikeEmail(document.myform.useremail))
							return false;
							if(!isInteger(document.myform.favoritenumber))
							return false;
							return true;
						}
					
			</script>
    </head>
	<body>
		<h1>混合表单确认示例</h1>
		输入要求，。。2011-1-23 14:03:51。。。。。。。。。。。。。<br>
		<form name="myform" id="myform" action="http://www.javascriptref.com" method='get' onsubmit="return validate();">
			姓名：<input type="text" name="username" id="username" size="30" maxlength="90"><br>
			Email:<input type="text" name="useremail" id="useremail" size="30" maxlength="90"><br>
			喜欢的数字：<input type="text" name="favoritenumber" id="favoritenumber" size="10" maxlength="10">
			<br>
			<input type="submit" value="提交">
		</form>
	
	</body>
</html>


<!--按键屏蔽-->
<html>
	<body>
	<center><h1>按键屏蔽示例</h1></center>
	在下面的输入框中，只接受数字的输入，若输入其他字符，会被屏蔽。
	<form name="testform" id="testform" action="#" method="get">
		Robot serial number:
		<input type="text" name="serialnumber" id="serialnumber" size="10" maxlength="10" onkeypress="return isNumberInput(this,event);">
		
		
	</form>
	<script language="javascript">
		function isNumberInput(field,event){
			var key,keyChar;
			if(window.event)
			key=window.event.keyCode;
			else if(event)
				key=event.which;
				else
					return true;
					if(key==null||key==0||key==8||key==13||key==27)
					return true;
					keyChar=String.fromCharCode(key);
					if(/\d/.test(keyChar)){
						window.status="";return true;}
						else
							{window.status="数字";
								return false;
								
								}
			
			}
		</script>
</body>
</html>



javascript与表单互操作（核心）-03
a584898的博客
10-24 341
与表单互操作（核心）（JavaScript3） JavaScript现阶段的重点在于表单的互操作上，所以下面将使用一系列的代码进行验证。 范例：取得文本数据 在表单之中每一个表单元素都有两个重要的属性：name,id，一般而言，这两个属性的内容一定要保持一致， 其中name是留给服务器端接受数据使用的，而id是留给页面进行JavaScript操作（document,getElementBy...
Javascript学习笔记（详）（六）——表单
Snowzhao的博客
08-03 529
表单脚本 表单的基础知识 在javascript中，表单对应的是HTMLFormElement类型，继承自HTMLELement类型。独特的属性与方法： acceptCharset：服务器能够处理的字符集；等价于HTML 中的accept-charset 特性。 action：接受请求的URL；等价于HTML 中的action 特性。 elements：表单中所有控件的集合（HTMLCollection）。 enctype：请求的编码类型；等价于HTML 中的enctype 特性。 length：表单中控
JavaScript 表单
哈皮吖的博客
06-30 764
form(表单) form(表单)对于每个Web开发人员来说，应该是再熟悉不过的东西了，它是页面与Web服务器交互过程中最重要的信息来源。表单form的常用属性和常用的控件input如下： 1、form action 属性 action 属性规定当提交表单时，向何处发送表单数据。当提交表单时，发送表单数据到名为"a.html "的文件（处理输入）： <form action="a.html " method="get" > First name: <input type="text"
基于JavaScript表单脚本(详解)
weixin_43740693的博客
08-07 2457
** 基于JavaScript表单脚本(详解) ** 什么是表单？ 一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定...
javascript当中document.forms的用法
mark_to_win的专栏
03-24 1653
2.document.forms例 2.1（FormActionSubmitIEFF.html）<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><head> <meta http-equiv="content-type" content="text/html; c...
Javascript的表单验证-提交表单
11-23
本文主要探讨的是如何使用JavaScript进行表单验证，确保用户在提交表单时输入的数据符合预设的规则，防止无效或恶意的数据到达服务器。 在HTML中，表单是收集用户输入数据的基本元素。为了确保用户输入的有效性，...
基于JavaScript的表单验证.zip
04-15
在表单验证中，JavaScript可以通过监听表单的`submit`事件来阻止默认提交行为，然后逐个检查输入字段的值。可以使用`document.getElementById`或`document.querySelector`等方法获取表单元素，再利用`value`属性获取...
javascript处理表单示例(javascript提交表单)
10-26
JavaScript的用途之一就是处理网页上的表单数据，而在这篇文档中，我们将探讨如何使用JavaScript来提交表单以及如何处理表单中的各种元素，例如输入框、单选按钮、复选框等。文档中提供的示例代码展示了如何创建通用...
基于JavaScript实现表单数据自动回显功能
最新发布
07-07
使用JavaScript实现表单数据自动回显功能的方法如下： 在前端页面中，当用户填写表单后，可能因某些原因（如页面刷新、跳转等）导致已输入的内容丢失。为了避免这种情况，可以通过JavaScript监听表单输入框的输入...
获得焦点focus()使用example
cindysaj的专栏
12-02 401
title function test() { if(document.forms[0].elements[0].value.length==0) { alert("姓名不可以为空"); document.forms[0].elements[0].focus(); return false; } ...
document.forms的用法(详解)
热门推荐
念念不忘，必有回响
03-22 3万+
代码 作用 document.forms 表示获取当前页面的所有表单 document.forms[0] 表示获取当前页面的第一个表单 document.forms[‘exportServlet’] 表示获取当前页面的name="exportServlet"的表单 document.forms[‘exportServlet’].username.value 获取表单为e...
document.forms[0].submit()；和document.forms[0].action = ““；问题
qq_45760909的博客
10-12 4750
document.forms[0].submit(); （1）这句话的意思是将表单提交到服务器去。 （2）没有他的话就不能向服务器提交数据了，那么就不能将你在页面中填写的数据反馈给服务器。表现为你在页面中点击“提交”按钮没有反应 （3）把你填写的数据提交到form中action指定的页面，如果action没词儿东西，就默认为当前页面 （4）如果你的提交按钮的type是submit的话，那么你可以不写这句话 document.forms[0].action = " "; forms表示：是你网页中第一个表单，
document.forms[0],与 document.forms["fromname"]
IT拾贝
06-16 490
document.forms[0]就是在页面里出现的第一个form标签 document文档 document.forms[0]文档中的第一个表单 document.forms[0].title文档中的第一个表单的title表单 document.forms[0].title.value文档中的第一个表单的title表单的内容 var frm = document.fo...
document.forms用法示例介绍
ITCBL
05-05 747
概述 forms 返回一个集合 (一个HTMLCollection对象),包含了了当前文档中的所有form元素. 语法 var collection = document.forms; document.forms['exportServlet'].submit(); （1）document.forms：表示获取当前页面的所有表单 （2）document.forms[0]：表示获取当前...
document.forms[0]，得不到文本框的值，没错误提示的错误，表单提交
黑色头发
08-12 799
我测试错误信息，可是我明明往文本框里输入值了，却告诉我没输入值，还不报错，我就找原因，检查了好几遍，也没找出错误，最后定位在document.forms[0]，因为我的一个jsp里有好几个form表单，我那个得不到值的是最后一个表单，第4个，我就把document.forms[0]改成了document.forms[1]，这样就得到值了 document.forms[0]的0下标 是表单索引...
JavaScript中document.forms[0]与getElementByName区别
chijie9679的博客
06-12 449
在很多情况下JavaScript中document.forms[0]与getElementByName这两种用法没有区别，这片文章详细的解释了两者的区别和用法，有兴趣的朋友可以参考一下。 首先我们来看个示例： 复制代码 代码如下: ...
常用的javascript
david2008man的专栏
09-06 903
上传的file为空：    function fnsave(){      if(document.forms[0].file.value.length==0) {        alert("提示：请选择要上传的文件！");        document.forms[0].file.focus();        return false;      }    }上传的格式验证：     va
JavaScript实现表单验证技巧与原则
"本文主要介绍了如何使用JavaScript进行表单验证，包括其必要性、JavaScript语言的基础和表单验证的实现，以及验证时应注意的原则。JavaScript是客户端脚本语言的首选，用于处理表单数据确认、用户界面交互等多种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值