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('提交成功!');
});
});
复制代码 代码如下:
<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('提交成功!');
});
});
标签:
表单验证
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“Jquery练习之表单验证实现代码”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。