第十七章 表单和表单元素
表单是网页设计中的重要内容。没有表单，就不能实现网页内容的交互。
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" οnkeypress="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" οnchange="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="选择复选框" οnclick="document.testform.check1.click();">
<input type="button" value="选择单选按钮" οnclick="document.testform.radiogroup[0].click();">
<input type="button" value="使复选框获得按钮" οnclick="document.testform.check1.focus();">
<input type="button" value="使复选框失去焦点" οnclick="document.testform.check1.blur();">
<input type="button" value="复选框状态" οnclick="alert('checked?'+document.testform.check1.checked);">
<input type="button" value="单选框按钮状态" οnclick="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/" οnsubmit="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" οnsubmit="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' οnsubmit="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" οnchange="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" οnkeypress="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 οnlοad="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" οnclick="document.forms[0].submit()">
//onsubmit事件可以用来在提交过程前验证表单。
//仅提交一次。以防止用户多次点击而造成信用卡中多次扣钱
<input type="button" value="submit" οnclick="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="" οnblur="alert('blur')" οnchange="alert('change')">
//自动选择文本
<input type="text" οnfοcus="this.select()">
//自动切换到下一个
//禁止粘贴
οnpaste="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" οnchange="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="选择复选框" οnclick="document.testform.check1.click();">
<input type="button" value="选择单选按钮" οnclick="document.testform.radiogroup[0].click();">
<input type="button" value="使复选框获得按钮" οnclick="document.testform.check1.focus();">
<input type="button" value="使复选框失去焦点" οnclick="document.testform.check1.blur();">
<input type="button" value="复选框状态" οnclick="alert('checked?'+document.testform.check1.checked);">
<input type="button" value="单选框按钮状态" οnclick="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/" οnsubmit="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" οnsubmit="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' οnsubmit="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" οnkeypress="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>
438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
