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('提交成功！');
});
});
标签：表单验证
0
投稿猜你喜欢
python小白切忌乱用表达式
2021-08-11 19:57:11
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2022-08-02 13:14:35
python 中关于pycharm选择运行环境的问题
2021-09-01 21:56:10
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2022-06-29 16:23:40
itchat接口使用示例
2022-09-01 05:16:36
Python作用域用法实例详解
2022-12-10 15:44:42
JS仿Windows开机启动Loading进度条的方法
2024-04-10 11:02:13
python中from module import * 的一个坑
2021-10-29 08:23:51
Pygame框架实现飞机大战
2023-09-15 02:14:24
Python开发的HTTP库requests详解
2021-09-06 19:08:09
Web设计中的黄金分割[译]
2009-02-20 13:41:00
你喜欢篮球吗?Python实现篮球游戏
2023-10-26 00:28:36
Python pyecharts模块安装与入门教程
2023-09-11 06:52:41
Pandas实现在线文件和剪贴板数据读取详解
2021-06-02 16:49:55
Python的for和break循环结构中使用else语句的技巧
2022-07-02 16:59:26
Python提高运行速度工具之Pandarallel的使用教程
2021-07-16 20:14:09
Oracle 随机数
2024-01-16 10:46:14
跟老齐学Python之关于循环的小伎俩
2022-07-20 07:03:36
js+html5实现手机九宫格密码解锁功能
2024-05-09 15:02:36
mysql 8.0.12 解压版安装教程
2024-01-24 15:31:57
