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>

 上面的示例:仅对表单框内容进行了简单的验证,

 这个验证,可以写得更详细一点。可对用户注册时,用户名是否存在进行验证。

 还可以对用户名表单框失去焦点时添加事件,对用户名更详细一步的进行验证。 如:必须以字母开头。长度必须大于多少位。。。在验证的同时,也可以提示信息的文字内容进行改变,如验证出错时,文字以红色显示,验证通过时,让文字以绿色显示。

  关于用户名检测与验证,本例仅给大家提供一下思路。

转载于:https://www.cnblogs.com/msidevs/p/6109602.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/572965.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php background-image,css background-image属性怎么用

css background-image属性为元素设置背景图像&#xff0c;语法为&#xff1a;background-image:url(图片路径)。设置的背景图像会占据元素的全部尺寸&#xff0c;包括内边距和边框&#xff0c;但不包括外边距。css background-image属性怎么用&#xff1f;作用&#xff1a;为元…

webstorm

问题描述&#xff1a;webstorm打开文件夹&#xff0c;文件夹内的文件不能全部显示&#xff0c;如图 原因&#xff1a;配置文件xml出错 解决方法&#xff1a;删除文件夹内的idea文件&#xff0c;再用webstrom重新打开就行╮(╯▽╰)╭转载于:https://www.cnblogs.com/chenluomen…

linux文件句柄数满,linux文件句柄数超出系统限制怎么办?

1、问题阐述&#xff1a;too many open files&#xff1a;顾名思义即打开过多文件数。不过这里的files不单是文件的意思&#xff0c;也包括打开的通讯链接(比如socket)&#xff0c;正在监听的端口等等&#xff0c;所以有时候也可以叫做句柄(handle)&#xff0c;这个错误通常也可…

linux 内核编译不能打字,linux系统升级后,手动编译的kernel无法启动问题

linux系统升级后&#xff0c;手动编译的kernel无法启动问题linux系统升级后&#xff0c;手动编译的kernel无法启动问题做开发相关&#xff0c;需要编译3.18的kernel&#xff0c;x86_64的&#xff0c;但是我的deepin升级v20之后&#xff0c;编译的kernel就无法启动了&#xff0c…

arcgis api 3.x for js 入门开发系列六地图分屏对比(附源码下载)

前言 关于本篇功能实现用到的 api 涉及类看不懂的&#xff0c;请参照 esri 官网的 arcgis api 3.x for js&#xff1a;esri 官网 api&#xff0c;里面详细的介绍 arcgis api 3.x 各个类的介绍&#xff0c;还有就是在线例子&#xff1a;esri 官网在线例子&#xff0c;这个也是学…

SVN版本管理trunk及branch相关merge操作

先说说什么是branch。按照Subversion的说法&#xff0c;一个branch是某个development line&#xff08;通常是主线也即trunk&#xff09;的一个拷贝&#xff0c;见下图&#xff1a; branch存在的意义在于&#xff0c;在不干扰trunk的情况下&#xff0c;和trunk并行开发&#xf…

线程之间通信 等待(wait)和通知(notify)

线程通信概念&#xff1a; 线程是操作系统中独立的个体&#xff0c;但这些个体如果不经过特殊的处理就不能成为一个整体&#xff0c;线程之间的通信就成为整体的必用方式之一。当线程存在通信指挥&#xff0c;系统间的交互性会更强大&#xff0c;在提高CPU利用率的同时还会对线…

女生适合linux运维吗,女生适不适合做Linux运维工程师进入IT行业?

很多人对于女生做Linux运维工程师进入IT还有都存在质疑。因为大多数人认为女生不适合IT行业&#xff0c;IT is a men’sworld&#xff0c;女生学IT是件匪夷所思的事情。在传统的思维当中&#xff0c;女生只适合从事像教师、会计、公务员等稳定的职业。然而&#xff0c;这一莫名…

WPF强制更新

&#xff0c;更新的时候选择最小版本号,就是强制更新 转载于:https://www.cnblogs.com/damsoft/p/6119509.html

a的n次方的最后三位数c语言,求13的n次方(12n≤130000000000)的最后三位数,用c++编程...

#includeintmain(){longlonginti,x,y,last;/*变量last保存求X的Y次方过程中的部分乘积的后三位*///输入while(scanf("%lld,%lld",&x,&y)2){last1;x%1000;//因为一个三位数的n次方的最后三位数只和这个数的最后三位数有关y%100;//因为可以发现这个是一个轮回&…

Selenium2+python自动化5-操作浏览器基本方法

前言 前面已经把环境搭建好了&#xff0c;这从这篇开始&#xff0c;正式学习selenium的webdriver框架。我们平常说的 selenium自动化&#xff0c;其实它并不是类似于QTP之类的有GUI界面的可视化工具&#xff0c;我们要学的是webdriver框架的API。 本篇主要讲如何用Python调用we…

deepin20自带c语言,deepin 20.1终于找到你-国产操作系统deepin之初体验

deepin 20.1终于找到你-国产操作系统deepin之初体验前几天刚安装了国产操作系统deepin20.1&#xff0c;使用了几天体验非常好&#xff0c;推荐大家安装使用。这款操作系统确实做的很用心&#xff0c;很不错。日常使用、办公学习、影音娱乐已经完全可以替代Win了。界面简洁友好上…

c语言链表内存分配失败,链表的C语言实现之动态内存分配

链表的C语言实现之动态内存分配來源:互聯網 2008-06-01 02:05:07 評論一、为什么用动态内存分配但我们未学习链表的时候&#xff0c;假如要存储数量比较多的同类型或同结构的数据的时候&#xff0c;总是使用一个数组。比如说我们要存储一个班级学生的某科分数&#xff0c;总是…

android分享图片功能实现原理,Android:简单实现并理解图片三级缓存

学习Android网络开发的过程中&#xff0c;势必会经历很多痛苦的过程&#xff0c;其中一个大坑就是图片缓存&#xff0c;当然现在有很多现成的库非常方便&#xff0c;常常几行代码就可以实现想要的功能&#xff0c;但不懂其中的原理是不行的&#xff0c;所以对于刚开始学习网络编…

连载 3:利用 matlab计算卷积

转载于:https://www.cnblogs.com/WHaoL/p/6155544.html

鸿蒙第一款手机,拿下“国内第一手机商”的OPPO,打算弃用华为鸿蒙?

在华为开发鸿蒙系统之前&#xff0c;我国是没有完全属于自己国家的手机系统&#xff0c;国内的操作系统一直被安卓ios系统所占据。尤其是在国产机中最主要的系统就是安卓&#xff0c;而安卓系统的所属方谷歌每年仅凭这一项系统就可以在中国净收数百亿的利益。许多国人也习惯了使…

安卓手机上运行 PC-E500 程序

目录 第1章安卓手机上运行 PC-E500 程序 1 1 PockEmul 1 2 下载 1 3 打包BASIC程序 2 4 配置PC-E500模拟器 5 5 载入e500.pkm 7 6 载入40000.bin 8 7 解包 10 第1章安卓手机上运行 PC-E500 程序 1 PockEmul 安卓手机上运行PC-E500程序&#xff0c;需要…

2021安徽省高考成绩怎么查询系统,2021年安徽省教育招生考试院成绩查询登录入口...

一、2020年安徽高考成绩查询登录入口二、安徽高考成绩查询新闻资讯最新消息!安徽高考预计7月23日划定各批次录取线并公布高考成绩!7月14日上午&#xff0c;记者跟随省人大代表、省政协委员们一同走进安徽省教育招生考试院网评现场。“今年&#xff0c;我省高考的网上评卷工作继…

Java Web之网上购物系统(提交订单、查看我的订单)

作业终于做完了&#xff0c;好开心。。。。。。虽然这一周经历不是那么顺利&#xff0c;但是觉得还是收获了不少&#xff0c;有过想哭的冲动&#xff0c;代码不会写&#xff0c;事情办不好&#xff0c;各种发愁。空间里发小发了带父母出去游玩的照片&#xff0c;瞬间能量值不知…

html路径详解,详解HTML相对路径和绝对路径

相对路径&#xff1a;以引用文件之网页所在位置为参考基础&#xff0c;而建立出的目录路径。因此&#xff0c;当保存于不同目录的网页引用同一个文件时&#xff0c;所使用的路径将不相同&#xff0c;故称之为相对。绝对路径&#xff1a;以Web站点根目录为参考基础的目录路径。之…