`

使用闭包特性写的表单校验提交JS

阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script>
  
  /***
   * add by 张行 2010-12-16
   * 面向对象的JavaScript
   *
   */
   function $(id) 
   {
		return document.getElementById(id).value;
   }

  // 使用立即方法利用闭包创建私有静态成员方法
  var Book = (function () 
  {     
	  function checkIsbn(isbn, msg)  // 私有静态成员方法 校验方法
	  {
		  if (msg === "ok")
		  {
			  if ($(isbn) === "") 
			  { 
				return "isbn不能为空!";
			  } 
		  }
		 return msg;
	  }
	  function checkName(name, msg)  
	  {
		  if (msg === "ok")
		  {
			  if ($(name) !== "zxBook") 
			  {
				return "书名必须为zxBook!";
			  } 
		  }
		  return msg;
	  }
	 
	  // 使用闭包特性
	  return function () 
	  {
		// 私有属性
		var isbn,name,content,pageNum,msg="ok";
		
		/************* 特权set方法***************/
		this.setIsbn = function (strIsbn) 
		{
			msg = checkIsbn(strIsbn, msg)
			if (msg === "ok")
			{
				isbn = $(strIsbn);
			}
		};

		this.setName = function (strName) 
		{
			msg = checkName(strName, msg)
			if (msg === "ok")
			{
				name = $(strName);
			}
		};

		this.setContent = function (strContent) 
		{
			content = $(strContent) || "nullContent";
		};

		this.setPageNum = function (strPageNum) 
		{
			pageNum = $(strPageNum) || "0";
		};
		
		/************* 特权get方法***************/ 
		this.getIsbn = function () 
		{
			return isbn;
		};

		this.getName = function () 
		{
			return name;
		}
		
		this.getContent = function () 
		{
			return content;
		}

		this.getPageNum = function () 
		{
			return pageNum;
		}

		this.getMsg = function() 
		{
			return msg;
		}
	  }
  })() ;
  // 构建查询串
  Book.prototype.createQryString = function (isbn, name, content, pageNum) 
  {
	var str = "?" + isbn + "=" + this.getIsbn() + "&" + name + "=" + this.getName() + 
	"&" + content + "=" + this.getContent() + "&" + pageNum + "=" + this.getPageNum();
	return str;
  }

  var bookService = {
	"add" : function () 
	{
		var book = new Book();
		book.setIsbn('isbn');
		book.setName('name');
		book.setContent('content');
		book.setPageNum('pageNum');
    
		if (book.getMsg() != "ok")
		{
			alert(book.getMsg());
			return false;
		}
		else 
		{
			alert(book.createQryString('ISBN','NAME','CONTENT','NUM'));
			
			/**new Ajax.Request('${request.contextPath}/hehe.action' + book.createQryString('ISBN','NAME','CONTENT','NUM'), {
					  method: 'post',
					  onSuccess: function(transport) 
					  {		
						alert(transport.responseText);
					  }
			});**/
		}
	},
	"del" : function () {},
	"update" : function (){},
	"search" : function (){}
  }

   function ready()
   {
		document.getElementById('submitBtn').attachEvent('onclick', bookService.add);
   }

  </script>
 </HEAD>

 <BODY onload='ready();'>
	ISBN : <input type="text" name="isbn"/>
    书名: <input type="text" name="name"/>
	内容: <input type="text" name="content"/>
	页数: <input type="text" name="pageNum"/>
	<input type="button" name="submitBtn" value=" 提 交 ">
 </BODY>
</HTML>

 

分享到:
评论

相关推荐

    javaScript经典实例

    意味着这个压缩包可能包含了各种类型的JavaScript应用场景,包括但不限于DOM操作、事件处理、动画效果、表单验证、AJAX请求、JSON处理、函数与闭包、对象与原型链、异步编程、模块化、以及最新的ES6+特性等。...

    Ant Design Vue 添加区分中英文的长度校验功能

    首先,需要在Vue的入口文件`main.js`中调用`Vue.use(validators)`来安装校验器插件。然后,在具体的表单组件中,比如`a-form-item`,可以通过`v-decorator`属性来指定校验规则。这里使用了`a-input`组件,并通过`...

    js-高性能JavaScript-JavaScript语言精粹修订版

    ### JavaScript核心知识点概览 #### 一、《高性能JavaScript》 **知识点概述:** 1. **性能优化基础知识:** ...通过这些书籍的学习,可以全面掌握JavaScript的各种特性和编程技巧,提高开发效率和代码质量。

    js学习宝典秘籍

    2. **原型链**:JavaScript使用原型链实现继承,每个对象都有一个内部属性[[Prototype]]指向它的原型对象。 3. **异步编程**:通过回调函数、Promises、async/await等方式处理异步操作。 4. **模块化开发**:使用...

    JavaScript王者归来part.1 总数2

     11.5.4 创建一款通用的客户端表单校验组件   11.6 其他内置对象   11.6.1 Navigator对象--浏览器总体信息的代表   11.6.2 Screen对象--提供显示器分辨率和可用颜色数量信息   11.6.3 Location对象--当前...

    JS网页特效大全下载

    JavaScript(简称JS)是一种轻量级的编程语言,主要用于网页和网络应用的开发。它能够直接在客户端浏览器上运行,无需服务器支持,极大地提升了网页的交互性和动态性。本资源包"JS网页特效大全下载"提供了丰富的JS...

    javascript验证

    JavaScript验证是Web开发中不可或缺的一环,主要用于前端数据的校验和用户输入的合法性检查,以确保用户提交的信息准确无误。这篇博文链接虽然没有提供具体的内容,但我们可以通过标题和标签来推测其可能涉及的知识...

    js笔记资源

    你可能会学到如何利用JavaScript来实现对表单字段的校验,如非空检查、邮箱格式验证、手机号码验证等,这在创建用户交互界面时非常实用。 5. **Net笔记**:这部分可能包含了网络相关的知识,比如HTTP/HTTPS协议、...

    JavaScript 60道面试题及答案.docx

    JavaScript 面试题知识点总结 本文总结了 JavaScript 面试题中的知识点,包括 HTTP 协议状态码、XMLHttpRequest 对象的 readyState、...jquery.validate 是一个常用的数据校验插件,它可以对表单数据进行验证。

    JavaScript 60道面试题和答案.docx

    - 数据校验确保输入的数据符合预期,通常用于表单验证。jQuery库中的validate插件可以帮助实现客户端的表单验证,提高用户体验,防止无效数据提交到服务器。 以上是针对JavaScript面试题的详细解释,涵盖了一系列...

    Java Script网页特效实例大全

    6. **表单验证**:在用户提交表单前进行数据校验,确保输入的有效性。 7. **模态框**:弹出窗口显示额外信息,常用于警告、登录、注册等场景。 8. **拖放功能**:允许用户通过拖拽操作对元素进行排序或移动。 9. ...

    电影院管理

    1. 防止XSS和CSRF攻击:JavaScript可以用来校验表单提交,配合后端验证,防止恶意注入。 2. 代码优化:合理使用闭包、避免全局变量污染、压缩和合并JS文件以减少加载时间,提升系统性能。 以上就是关于"电影院管理...

    python入门到高级全栈工程师培训 第3期 附课件代码

    11 FTP之创建文件夹及MD5校验思路 第33章 01 操作系统历史 02 进程的概念 03 线程的概念 04 线程的调用以及join方法 05 setDaemon方法和继承式调用.baiduyun.downloading 05 setDaemon方法和继承式调用 第34章 ...

    浅析JavaScript 函数防抖和节流

    以表单输入为例,当用户输入时不需要立即进行校验,而是在用户停止输入一段时间后,才进行校验,这样可以避免在输入过程中频繁触发校验逻辑,减少性能消耗。 一个简单的防抖函数实现原理如下: ```javascript var ...

Global site tag (gtag.js) - Google Analytics