Jquery练习之表单验证实现代码
发布时间:2023-07-02 05:30:59
标签:表单验证
Jquery练习表单验证
<body>
<form action="" method="post" id ="myform">
<table>
<tr>
<td>姓名:</td>
<td><input type ="text" id = "name" name ="name"></td>
</tr>
<tr>
<td>年龄:</td>
<td><input type ="text" id="age" name ="age"></td>
</tr>
<tr>
<td>性别:</td>
<td><input type = "radio" id="sex_man" name="sex" value="男">男 <input type = "radio" id="sex_woman" name="sex" value = "女" checked ="checked">女</td>
</tr>
<tr>
<td>地址:</td>
<td>
<select id = "add">
<option values="北京">北京</option>
<option values="河南">河北</option>
<option values="河南">河南</option>
</select>
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type ="checkbox" id = "cbOnTheInternet" name="checkbox" value ="上网" checked="checked">上网
<input type ="checkbox" id = "cbJuketing" name="checkbox" value="旅游">旅游
<input type ="checkbox" id = "cbWatchingTv" name="checkbox" value="看电影">看电影
</td>
</tr>
<tr>
<td><input type ="submit" value="提交"></td>
</tr>
</table>
</form>
</body>
</html>
Jquery代码
$(document).ready(
function() {
$("#myform").submit(function(){
var username=$("#name").val();
var age=$("#age").val();
var sex=$("input[name ='sex'][checked]").val();
var address=$("#add option[selected]").val();
var size=$("input[name='checkbox'][checked]").size();
var favouriteArray=Array(size);
$("input[name='checkbox'][checked]").each(function(index,docEl){
favouriteArray[index]=$(this).val();// or docEl.value
});
if(username=="")
{
alert("性名不能为空!");
$("#name").focus();
return false;
}
if(age=="")
{
alert("年龄不能为空");
$("#age").focus();
return false;
}
if(size==0)
{
alert("您还没有选择爱好哦!");
$("input[name='checkbox']").get(0).focus();
return false;
}
for(var i=0;i<favouriteArray.length;i++){
alert(favouriteArray[i]);
}
alert('提交成功!');
});
});
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 一、Cookie原理HTTP是无状态的面向连接的协议, 为了保持连接状态, 引入了Cookie机制Cookie是http消息头中的一种属性,
- 1.官网下载MySQL下载Mysql点击下载mysql. 或点击这里下载下载完成后解压到某一个文件夹(记住这个路径,一会要用到)2.配置初始
- 1、python中__name__是什么意思?很多python的初学者可能都会遇到一个问题:__name__是什么意思?在刚开始学习pyth
- 本文实例为大家分享了python3.6使用SMTP协议发送邮件的具体代码,供大家参考,具体内容如下代码如下:# !/usr/bin/pyth
- QTimer控件介绍如果在应用程序中周期性地进行某项操作,比如周期性的检测主机的cpu值,则需要用到QTimer定时器,QTimer类提供了
- 本文描述通过统计分析出医院信息系统需分区的表,对需分区的表选择分区键,即找出包括在你的分区键中的列(表的属性),对大型数据的管理比较有意义,
- 直接上代码:<span style="font-family: arial,helvetica,sans-serif; fo
- 前言简单介绍下python的几个自动求导工具,tangent、autograd、sympy;在各种机器学习、深度学习框架中都包含了自动微分,
- ROSE是直接从UML发展而诞生的设计工具,它的出现就是为了对UML建模的支持,ROSE一开始没有对数据库端建模的支持,但是在现在的版本中已
- 因为需要检测一个一个链接中是否包含了IP地址,在这里需要使用到正则表达式 ,python完美的支持了正则表达式,在这里使用re模块来完成,对
- MySQL 出现错误1418 的原因分析及解决方法具体错误: 使用mysql创建、调用存储过程,函数以及触发器的时候会有错误符号为
- 误区 #30:有关备份的30个误区全是错的在开始有关备份的误区之前,如果你对备份的基础没有了解,请看之前我在TechNet Magazine
- SQL Server中包含多种不同类型的页,来满足数据存储的需求。不管是什么类型的页,它们的存储结构都是相同的。每个数据文件都包含相当数量的
- 阿里云默认yum命令下的MySQL是5.17****,安装mysql5.7之前先卸载以前的版本,包括清除以前的数据库——查看/var/lib
- 最近因为数学建模3天速成Python,然后做了一道网络的题,要画网络图。在网上找了一些,发现都是一些很基础的丑陋红点图,并且关于网络的一些算
- 最近运维上需要在测试环境调用http的post请求,实现自动化日切,我看了下我会的编程,也就python能符合我的要求,且简单好操作。但是在
- 当然如果想了解更多编辑器的原理制作方法,只有你自己去下载一个在线编辑器,慢慢研究,相信会有更多的收获!HTML在线编辑器的基本概念1,什么是
- 本篇文章将介绍3种常见的数据结构和同数据有关的算法。此外,在collections模块中也包含了针对各种数据结构的解决方案。Python内置
- 1. MySQL的安装与配置:在Ubuntu下安装MySQL方法很简单,使用如下命令:sudo apt-get install mysql-
- python使用函数改变list函数内改变外部的一个list如果这么写def rotate(nums, k): l