Jquery练习之表单验证实现代码


Posted in Javascript onDecember 14, 2010

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('提交成功!'); 
}); 
});
Javascript 相关文章推荐
select组合框option的捕捉实例代码
Sep 30 Javascript
JS批量修改PS中图层名称的方法
Jan 26 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
js删除Array数组中指定元素的两种方法
Aug 03 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
Vue实现的父组件向子组件传值功能示例
Jan 19 Javascript
CocosCreator入门教程之网络通信
Apr 16 Javascript
基于Jquery的淡入淡出的特效基础练习
Dec 13 #Javascript
Juqery Html(),append()等方法的Bug解决方法
Dec 13 #Javascript
JQuery中getJSON的使用方法
Dec 13 #Javascript
JavaScript 学习历程和心得分享
Dec 12 #Javascript
JavaScript Title、alt提示(Tips)实现源码解读
Dec 12 #Javascript
js中的值类型和引用类型小结 文字说明与实例
Dec 12 #Javascript
JS俄罗斯方块,包含完整的设计理念
Dec 11 #Javascript
You might like
PHP4实际应用经验篇(3)
2006/10/09 PHP
json的键名为数字时的调用方式(示例代码)
2013/11/15 PHP
php基于GD库画五星红旗的方法
2015/02/24 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
javascript图片滑动效果实现
2021/01/28 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
jquery获取复选框checkbox的值实现方法
2016/05/30 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
2018/01/21 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
Element-ui DatePicker显示周数的方法示例
2019/07/19 Javascript
js实现指定时间倒计时效果
2019/08/26 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
js实现登录拖拽窗口
2020/02/10 Javascript
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
windows下安装python的C扩展编译环境(解决Unable to find vcvarsall.bat)
2018/02/21 Python
浅谈Python 递归算法指归
2019/08/22 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
Django启动时找不到mysqlclient问题解决方案
2020/11/11 Python
Python爬虫爬取微博热搜保存为 Markdown 文件的源码
2021/02/22 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
加州风格的游泳和沙滩装品牌:Cupshe
2019/06/10 全球购物
进口业务员岗位职责
2014/04/06 职场文书
软件项目实施计划书
2014/05/02 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
律师函格式范本
2015/05/27 职场文书
冲出亚马逊观后感
2015/06/03 职场文书