jquery 通过submit()方法 提交表单示例
jquery 通过submit()方法 提交表单示例:
本示例:以用户注册作为例子。使用jquery中的submit()方法实现表单提交。
注:本示例仅提供了对表单的验证,本例只用选用了三个字段作为测试。
用户点击提交按钮时,触发点击事件,会执行所有表单框的验证,如通过验证,则执行submit()方法,对表单内容进行提交。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用户注册</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$('#register').click(function(){
var name=$('#name').val();
var pass=$('#pass').val();
var phone=$('#phone').val();
if(name==''){
alert('用户名不能为空');
return false;
}else if(pass==''){
alert('密码不能为空。');
return false;
}else if(phone==''){
alert('手机号码不能为空');
return false;
}else if(phone!=''){
var reg=/^1[3458]\d{9}$/;
if(!reg.test(phone)){
alert('手机号码格式不正确');
return false;
}
}else{
$('form').submit();
}
})
})
</script>
</head>
<body>
<form name="myform" method="post" action="__URL__/register">
<input type="text" name="name" value="" id="name"/>
<input type="password" name="pass" value="" id="pass" />
<input type="text" name="phone" value="" id="phone" />
<input type="submit" name="" value="用户注册" id="register" />
</form>
</body>
</html>
上面的示例:仅对表单框内容进行了简单的验证,
这个验证,可以写得更详细一点。可对用户注册时,用户名是否存在进行验证。
还可以对用户名表单框失去焦点时添加事件,对用户名更详细一步的进行验证。 如:必须以字母开头。长度必须大于多少位。。。在验证的同时,也可以提示信息的文字内容进行改变,如验证出错时,文字以红色显示,验证通过时,让文字以绿色显示。
关于用户名检测与验证,本例仅给大家提供一下思路。
jquery 通过submit()方法 提交表单示例的更多相关文章
- jquery中$.ajax方法提交表单
function postdata(){ //提交数据函数 $.ajax({ //调用jqu ...
- 一款基于jquery ui的动画提交表单
今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览 源码下载 实现的代码. html代码: & ...
- jquery submit()不能提交表单的解决方法
<form id="form" method="get"> <input type="text" name="q ...
- jQuery使用ajaxSubmit()提交表单示例
ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件.如下所示: 代码如下: <script src=" ...
- jQuery.Form.js 异步提交表单使用总结
jQuery.Form.js 是一个用于使用jQuery异步提交表单的插件,它使用方法简单,支持同步和异步两种方式提交. 第一步:引入jQuery与jQuery.Form.js <script ...
- jquery来跨域提交表单
说说用jquery来实现跨域提交表单 在jQuery中,我们使用json数据类型,通过getJSON方法来实现从服务端获取或发送数据,而当要向不同远程服务器端提交或者获取数据时,要采用jsonp数据类 ...
- 使用jQuery实现跨域提交表单数据
我们在WEB开发中有时会遇到这种情况,比如要从A网站收集用户信息,提交给B网站处理,这个时候就会涉及到跨域提交数据的问题.本文将给您介绍如何使用jQuery来实现异步跨域提交表单数据. 在jQue ...
- jQuery实现button按钮提交表单
在JSP页面中,通常使用button按钮提交表单数据,使用jQuery实现代码如下: <span style="font-family:Comic Sans MS;font-size: ...
- 关于form.submit()不能提交表单的错误原因
来源:http://www.ido321.com/948.html 直接上代码把: 1: <div id="register"> 2: <h4>会员注冊&l ...
随机推荐
- ubuntu安装ANSYS17.2全过程
本次介绍在Ubuntu kylin1604下安装Ansys 17.2的全部过程. 1 安装文件准备 关于ANSYS的软件安装文件,在网络上可以找到.这里采用SSQ版本的安装文件,如图所示,包含一个名为 ...
- POJ1743 Musical Theme [后缀数组]
Musical Theme Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 27539 Accepted: 9290 De ...
- CSS命名规范——BEM思想(非常赞的规范)
人们问我最多的问题之一是在CSS类名中“--”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher... BEM的意思就是块(block).元素(element).修饰符( ...
- opengl 笔记(1)
参考<opengl入门教程>.<OpenGL之坐标转换>.<OpenGL绘制管线操作细节>等资料. 复习下留个备忘:) /*- * Opengl Demo Test ...
- Microsoft SQL Server中的事务与并发详解
本篇索引: 1.事务 2.锁定和阻塞 3.隔离级别 4.死锁 一.事务 1.1 事务的概念 事务是作为单个工作单元而执行的一系列操作,比如查询和修改数据等. 事务是数据库并发控制的基本单位,一条或者一 ...
- TODO:Go语言同名Go字体发布
TODO:Go语言同名Go字体发布 2016-11-16 Go语言官方博客发布了一款同名字体–Go字体.此字体族包括正常.粗体和斜体渲染,支持比例和等宽字体.此字体已经经过用于编程方面的技术测试,使用 ...
- Entity Framework 6 Recipes 2nd Edition(10-7)译 -> TPH继承模型中使用存储过程
10-7. TPH继承模型中使用存储过程 问题 用一个存储过程来填充TPH继承模型的实体 解决方案 假设已有如Figure 10-7所示模型. 我们有两个派生实体: Instructor(教员)和St ...
- 通过扩展让ASP.NET Web API支持JSONP
同源策略(Same Origin Policy)的存在导致了"源"自A的脚本只能操作"同源"页面的DOM,"跨源"操作来源于B的页面将会被拒 ...
- windows下获取IP地址的两种方法
windows下获取IP地址的两种方法: 一种可以获取IPv4和IPv6,但是需要WSAStartup: 一种只能取到IPv4,但是不需要WSAStartup: 如下: 方法一:(可以获取IPv4和I ...
- Android混合开发之WebView使用总结
前言: 今天修改项目中一个有关WebView使用的bug,激起了我总结WebView的动机,今天抽空做个总结. 混合开发相关博客: Android混合开发之WebView使用总结 Android混合开 ...