js表单提交,面向对象
一.js表单验证之后再提交
1.普通按钮onclick函数调用表单的submit()函数
<input type=button name="submit1" value="登陆" onclick="check(this.form)">
2.submit类型的input添加onclick函数,如果返回false,则继续处理事件,从而触发onsubmit函数;如果返回true,则停止处理事件。
<input type=submit name="submit1" value="登陆" onclick="return check(this.form)">
3.把onsubmit的检查放在form属性里
<form action="login.do?act=login" method="post" onsubmit="return check(this)">
4.ajax提交,用于对表单数据做些转换再提交
二.js创建对象
1.工厂模式
function showColor(){
alert(this.color);
}
function Car(){
var ōcar = new Object();
ocar.color = color;
ocar.doors = door;
ocar.showColor = showColor;
return ocar;
}
var car1 = Car();
var car2 = Car();
调用此函数时将创建新对象,并赋予它所有的属性和方法。使用此函数可以创建2个属性完全相同的对象。当然我妹可以通过给它传递参数来改版这种方式。当然可以通过给它传递参数来改版这种方式。
2.构造函数new出来
function Car(color,door){
this.color = color;
this.doors = door;
this.showColor = function(){
alert(this.color)
};
}
var car1 = new Car("red",4);
var car2 = new Car("blue",4);
3.原型方式(单例模式)
function Car(){
}
Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.arr = new Array("a","b");
Car.prototype.showColor = function(){
alert(this.color);
}
var x=new Car()
var y=new Car()
x和y指向同一个arr对象
4.原型方式定义函数+构造函数定义成员变量
function Car(color,door){
this.color = color;
this.doors = door;
this.arr = new Array("aa","bb");
}
Car.prototype.showColor(){
alert(this.color);
}
var car1 = new Car("red",4);
var car2 = new Car("blue",4);
car1.arr.push("cc");
alert(car1.arr); //output:aa,bb,cc
alert(car2.arr); //output:aa,bb
5.动态原型方式
动态原型的方式同混合的构造函数/原型方式原理相似。唯一的区别就是赋予对象方法的位置。
function Car(color,door){
this.color = color;
this.doors = door;
this.arr = new Array("aa","bb");
if(typeof Car._initialized == "undefined"){
Car.prototype.showColor = function(){
alert(this.color);
};
Car._initialized = true;
}
}
js表单提交,面向对象的更多相关文章
- 原生JS 表单提交验证器
转载:http://www.cnblogs.com/sicd/p/4613628.html 一.前言 最近在开发一个新项目,需要做登陆等一系列的表单提交页面.在经过“缜密”的讨论后,我们决定 不用外部 ...
- js表单提交,判断文本框,用户名密码是否为空,JS表单检测!
当表单提交时先触发验证的js代码,当验证表单的方法返回true时才会提交表单返回false则不提交数据<script type="text/javascript">fu ...
- 代码段:js表单提交检测
市面上当然有很多成型的框架,比如jquery的validation插件各种吧.现在工作地,由于前端童鞋也没用这些个插件.根据业务的要求,自己就在代码里写了个简单的表单提交的检测代码(php的也写了一个 ...
- JS表单提交的几种方式
第一种方式 : 表单提交,在 form 标签中增加 onsubmit 事件来判断表单是否提交成功 <script type="text/javascript"> fun ...
- js表单提交回调函数
在研究表单的时候发现一个有意思的东西——在表单提交的时候如何保证数据全部提交完毕才会清空? 我们常用的<input type="reset" value="重置&q ...
- js表单提交一种方式
在一个html和php混编的文件中,用到js提交表单的方法: 定义表单id为form1,提交按钮type为submit, var data_info = document.getElementById ...
- js 表单提交
方式一: 使用input type="submit" 提交 <form action="http://www.w3school.com.cn/tiy/loadtex ...
- html js 表单提交前检测数据
通过使用form的onsibmit来控制是否提交数据 返回值为真是提交,其他不变,示例如下: JS部分 function check() { var newPwd = document.getElem ...
- js表单提交到后台对象接收
$.extend({ StandardPost:function(url,args){ var form = $("<form method='post' target='_blank ...
随机推荐
- date
更改时区 用系统备好的时区文件覆盖掉当前的配置文件,/etc/里装的是当前系统的配置文件 $sudo cp /usr/share/zoneinfo/Asia/Chongqing /etc/localt ...
- android xml 布局错误(黑掉了)Missing styles. Is the correct theme chosen for this layout?
发现在调整页面的时候 ,老是报以下错误,导致无法静态显示ui效果. Missing styles. Is the correct theme chosen for this layout? Use t ...
- openwrt修改flash大小
前言 默认openwrt trunk编译出来的flash大小为8M,但是我们手上的板子可能flash大小更大,本文以MT7620a为例,将其flash大小由8M修改为16M或者32M 增加dts文件 ...
- [转]Membership 到 .NET4.5 之 ASP.NET Identity
本文转自:http://www.cnblogs.com/jesse2013/p/membership-part3.html 我们前面已经讨论过了如何在一个网站中集成最基本的Membership功能,然 ...
- [转]com.devicepush.cordova-phonegap Device Push Notification Plugin
本文转自:https://www.npmjs.com/package/com.devicepush.cordova-phonegap Device Push Notification Plugin D ...
- HDU1502/Luogu1352/UVa1220 party[树形DP]
题目描述 某大学有N个职员,编号为1~N.他们之间有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子结点的直接上司.现在有个周年庆宴会,宴会每邀请来一个职员都会增加一定的快乐指数Ri, ...
- 网络之TCP/IP四层模型
应用层(应用层.表示层.会话层):FTP.Telnet.DNS.SMTP 传输层(传输层):TCP<传输控制协议> . UDP<用户数据报文协议> 网际互连层(网络层):IP. ...
- 移动前端UI选择
移动前端UI选择 目录 三.SUI Mobile 一.jQuery Mobile jQuery Mobile 是jQuery在移动设备上的版本,做为主要针对移动设备的框架来说,它提供一个移动设备平 ...
- voxel 与 pixel
中文名称:体素,即顾名思义是体积的像素.用来在三维空间中表示一个显示基本点的单位.类似于二维平面下的pixel(像素). voxel是三维空间中定义一个点的图象信息的单位.在平面中定义一个点要两个坐标 ...
- Eclipse仿Visual AssistX 编辑着色插件
1. 风格下载 http://www.eclipsecolorthemes.org/?view=theme&id=4602 2. 风格的安装与卸载 http://www.cnblogs.com ...