JavaScript网站设计实践(七)编写最后一个页面 改进表单
一、最后一个页面 contact.html。改进表单
在该页面实现的功能:
- 几乎所有的网站都会有表单填写,对于用户输入和填写的数据,首先我们一般现在前台验证,然后再去后台验证。
在前台最简单的验证:检查必填字段是否填写、填写格式是否符合要求等。
- 每个表单里面,当获取到输入焦点时,令提示文本消失
现在开始动手来写。
1、实现思路
(1)在这个表单里会验证的是必填字段和邮箱格式是否正确。首先,把判断必填字段和邮箱格式分别写在两个函数里;然后在一个validateForm()函数里,根据获取到的className属性值,确定调用哪个函数(className属性值有required和email);最后将这个判断合法性的整合函数valiedateForm()在用户提交数据时调用进来。
function prepareForms(){
for(var i=0; i<document.forms.length; i++){
var thisform = document.forms[i];
resetFields(thisform);
thisform.onsubmit = function(){
return validateForm(this);
}
}
}
(2)关于提示文本消失,给一个if判断,如果表单里的值默认值,则赋值为空,否则当输入焦点离开时,不去改变值。
function resetFields(whichform){
for(var i=0; i<whichform.elements.length; i++){
var element = whichform.elements[i]; //获取每个表单元素
if(element.type == "submit") continue; //如果是表单元素类型是submit,则退出本次循环
if(!element.defaultValue) continue; //如果不是表单元素的默认值,也退出本次循环
element.onfocus = function(){
if(this.value == this.defaultValue){
this.value = "";
}
}
element.onblur = function(){
if(this.value == ""){
this.value = this.defaultValue;
}
}
}
}
defaultValue为表单的默认值,onfocus为获取焦点,onblur焦点离开。
(3)兼容浏览器。不是所有的浏览器都会对点击label元素所包含的的文本,与之相关的表单字段就会获得输入焦点并等待用户输入,所以写个小函数来实现兼容。
function focusLabels(){
//旧浏览器 对象检测
if(!document.getElementsByTagName) return false; //获取元素
var labels = document.getElementsByTagName("label"); //给有for属性的label添加focus()函数
for(var i=0; i<labels.length; i++){ //for循环判断
if(!labels[i].getAttribute("for")) continue;
labels[i].onclick = function(){
var id= this.getAttribute("for"); //获取到label中for的值
if(!document.getElementById(id)) return false; //再判断是否存在跟for的值一样的id值 有则添加focus()方法
var element = document.getElementById(id);
element.focus();
}
}
}
给每个label标签的都有一个onclick函数,如果这个label标签有for属性值,并且这个表单里面的某个字段是有存在这个id,则给这个id所在的表单字段一个focus函数。element.focus()
2、代码
(1)contact.html
拷贝template.html,在div的className为content部分,开始写表单内容。
<div id="content">
<h1>联系我们乐队</h1>
<form method="post" action="#">
<fieldset>
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="your name" class="required"/>
</p>
<p>
<label for="email">Email:</label>
<input type="text" id="email" name="email" value="your email" class="email required" />
</p>
<p>
<label for="message">Message:</label>
<textarea rows="7" cols="45" id="message" name="message" class="required"> 写下你的留言</textarea>
</p>
<input class="contact_sub" type="submit" value="留言" />
</fieldset>
</form>
</div>
(2)修改webdesign.css文件
label{
display: block;
} fieldset{
border:;
}
.contact_sub{
width: 100px;
height:30px;
}
(3)创建contact.js文件
/*******兼容不同浏览器 点击文本即可使与之相关的表单输入获得焦点*****/
function focusLabels(){
//旧浏览器 对象检测
if(!document.getElementsByTagName) return false; //获取元素
var labels = document.getElementsByTagName("label"); //给有for属性的label添加focus()函数
for(var i=0; i<labels.length; i++){ //for循环判断
if(!labels[i].getAttribute("for")) continue;
labels[i].onclick = function(){
var id= this.getAttribute("for"); //获取到label中for的值
if(!document.getElementById(id)) return false; //再判断是否存在跟for的值一样的id值 有则添加focus()方法
var element = document.getElementById(id);
element.focus();
}
}
}
addLoadEvent(focusLabels); /*****************删除表单默认值*************************/
function resetFields(whichform){
for(var i=0; i<whichform.elements.length; i++){
var element = whichform.elements[i]; //获取每个表单元素
if(element.type == "submit") continue; //如果是表单元素类型是submit,则退出本次循环
if(!element.defaultValue) continue; //如果不是表单元素的默认值,也退出本次循环
element.onfocus = function(){
if(this.value == this.defaultValue){
this.value = "";
}
}
element.onblur = function(){
if(this.value == ""){
this.value = this.defaultValue;
}
}
}
} /*************找到每个表单元素whichform*****************/
function prepareForms(){
for(var i=0; i<document.forms.length; i++){
var thisform = document.forms[i];
resetFields(thisform); thisform.onsubmit = function(){
return validateForm(this);
}
}
}
addLoadEvent(prepareForms); /**********表单数据合法性检验 是否已填isFillEd(field)******/
function isFilled(field){
if(field.value.length < 1 || field.value == field.defaultValue){
return false;
}else{
return true;
}
} /***********邮箱格式是否正确****************************/
function isMail(field){
if(field.value.indexOf("@") == -1 || field.value.indexOf(".") == -1){
return false;
}else{
return true;
}
} /***********整合检验表单合法性**************************/
function validateForm(whichform){ //如果表单含有required的className属性值,则调用isFilled
for(var i=0; i<whichform.elements.length;i++){
var element = whichform.elements[i];
if(element.className.indexOf("required") != -1){
if(!isFilled(element)){
alert("请填写"+element.name);
return false;
}
}
if(element.className.indexOf("email") != -1){
if(!isMail(element)){
alert("请填写正确的邮箱地址");
return false;
}
}
}
return true;
}
最后,在contact.html页面,加载contact.js文件。
ok了,可以打开谷歌浏览器验证一番。现在在表单必填字段没填写,邮箱地址写错 ,会出现一个对话框。
二、学与思
1、默认值
联系表单里都会有一些默认的“占位符”文本,W3C是这样说的:“如果你无法断定用户端的软件或代理能够对空白的控件做出正确的处理,就一定要在编辑框或文本输入区域里给出一些默认的、占位符性质的字符。【优先级3】”。
默认值美中不足之处就是当准备输入时要手动清除,麻烦。所以写了个小函数,当if判断是默认值时,则把表单字段赋值为空。
2、Form对象
获取到的是input、textarea等
和childNodes.length不一样。form.elements.length只对掉单元素进行统计。
3、数据合法性检验
把判断必填字段和邮箱格式的判断函数写在不同的函数里,然后在一个整合函数中根据表单字段id值不同再进行具体调用。显得更加方便,这样就不用在每个表单字段里面添加这样一个判断函数,我们需要做的就是获取到表单的className属性值,给一个if判断,是required的是就调用isFilled(),如果是email就调用isMail()。最后在用户提交数据时,调用这个整合函数即可。
完整代码:http://pan.baidu.com/s/1mgr39US
JavaScript网站设计实践(七)编写最后一个页面 改进表单的更多相关文章
- JavaScript网站设计实践(一)网站结构以及页面效果设计
这是JavaScript DOM编程艺术里的构建JavaScript网站设计的例子,这本书给我学习JavaScript带来许多启发,在这个乐队宣传网站中,把前面学到的知识点整合在这个项目了.在这里记录 ...
- JavaScript网站设计实践(四)编写about.html页面,利用JavaScript和DOM,选择性的显示和隐藏DIV元素
一.现在我们在网站设计(三)的基础上,来编写about.html页面. 这个页面要用到的知识点是利用JavaScript和DOM实现选择性地显示和隐藏某些DIV about.html页面在前面我们为了 ...
- JavaScript网站设计实践(六)编写live.html页面 改进表格显示
一.编写live.html页面,1.JavaScript实现表格的隔行换色,并且当鼠标移过时当前行高亮显示:2.是输出表格中的abbr标签的内容 实现后的效果图是这样的: 1.实现思路 在输出表格的时 ...
- JavaScript网站设计实践(三)设计有特色的主页,给主页链接添加JavaScript动画脚本
一.主页一般都会比较有特色,现在在网站设计(二)实现的基础上,来给主页添加一点动画效果. 1.这里实现的动画效果是:当鼠标悬停在其中某个超链接时,会显示出属于该页面的背景缩略图,让用户知道这个链接的页 ...
- JavaScript网站设计实践(二)实现导航栏当前所选页面的菜单项高亮显示
一.(一)中的代码还可以修改的地方. 在(一)中,如果是运行在服务器下,如apache等,可以把head和navigation的div抽取出来,放置在另一个html文件里,然后在页面中,include ...
- JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果
一.photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图. 看到的页面效果是这样的: 1.实现思路 这个功能在之前的JavaScript美术馆那里已经实现了. 首先在页面 ...
- es6 封装一个基础的表单验证
1, 需求分析 设计一个通用的表单验证,如果后期表单中添加了更多的需求,不需要更改之前的代码逻辑,最好不要改之前的代码,需要加什么直接加就好了. 2,代码分析 此表单验证最好返回一个函数,在api设计 ...
- 优化网站设计(七):避免在CSS中使用表达式
前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...
- ASP.NET MVC 网站开发总结(五)——Ajax异步提交表单之检查验证码
首先提出一个问题:在做网站开发的时候,用到了验证码来防止恶意提交表单,那么要如何实现当验证码错误时,只是刷新一下验证码,而其它填写的信息不改变? 先说一下为什么有这个需求:以提交注册信息页面为例,一般 ...
随机推荐
- 如何使用Github仓库创建网站
官方文档:https://help.github.com/categories/github-pages-basics/ 1.创建一个仓库 2.额外建立一个gh-pages分支 3.添加CNAME文件 ...
- python 处理cookie简单很多啊 httpclient版本是4.3.3
模拟登录流程: 1 请求host_url 2 从host_url中解析出 隐藏表单 的值 添加到POST_DATA中 3 添加账户,密码到POST_DATA中 4 编码后,发送POST请求 要点 ...
- PHP错误Warning: Cannot modify header information - headers already sent by解决方法
这篇文章主要介绍了PHP错误Warning: Cannot modify header information - headers already sent by解决方法,需要的朋友可以参考下 今天在 ...
- 一个Bootstrap风格的分页控件
http://www.cnblogs.com/wangwei123/p/3682626.html 主题 jQueryBootstrap 一个Bootstrap风格的分页控件,对于喜欢Bootstr ...
- complex(x):创建一个复数
使用python可以实现将一个整数或者浮点数转换为一个复数: 演示如下: >>> # 演示复数函数:complex(x) ... >>> x = complex(1 ...
- C语言面试题(嵌入式开发方向,附答案及点评)
整理自C语言面试题(嵌入式开发方向,附答案及点评) 预处理器(Preprocessor) 1. 用预处理指令#define 声明一个常数,用以表明1年中有多少秒(忽略闰年问题) #define SEC ...
- 启用EXCHANGE反垃圾邮件功能和重建EXCHANGE邮件系统帐号
How to recreate System Mailbox , FederatedEmail & DiscoverySearchMailbox in Exchange 2010 http:/ ...
- log.isDebugEnabled()的使用
转自: http://huangxx.iteye.com/blog/190693 在使用log4j,common-log这样的log框架时,发现很多代码中这样写 if (log.isDebugEn ...
- java学习多线程之死锁
形成死锁的前提是同步代码块嵌套. 什么是死锁?当一个线程拿到锁以后在这个锁内部的代码需要访问另一段的代码的时候另外一个程序的锁被另外一个线程拿到,这样的话,就造成了两个锁互不想让程序没法往下执行的这种 ...
- ChannelFactory.Endpoint 上的地址属性为空。ChannelFactory 的终结点必须指定一个有效的地址。
主体代码如下 IServiceA proxyA; ChannelFactory<IServiceA> factoryA = new ChannelFactory<IServiceA& ...