简单的jquery表单验证+添加+删除+全选/反选
<body>
<h4><a href="#">首页</a>><a href="#">延时预约</a></h4>
<div class="mesg">
<p>请您认真填写以下信息.请您认真填写以下信息.请您认真填写以下信息.请您认真填写以下信息.请您认真填写以下信息.请您认真填写以下信息.请您认真填写以下信息.请您认真填写以下信息.请您认真填写以下信息.</p>
<div class="info">
<ul>
<li>
公司名称:<input type="text" class="cname"><span>用户名格式不正确</span><span>√</span>
</li>
<li>
联系人:<input type="text" class="name"><span>联系人格式不正确</span><span>√</span>
</li>
<li>
性 别:<input type="radio" class="nan" name="sex" value="男">男
<input type="radio" class="nv" name="sex" value="女">女
<span>必选</span><span>√</span>
</li>
<li>
<p>手机的格式必须是11位整数数字</p>
</li>
<li>
手 机:<input type="text" class="mobile"><span>手机号码有误</span><span>√</span>
</li>
<li>
邮 箱:<input type="email" class="email" placeholder="必须是以.com结尾并且包含@"><span>email格式不正确</span><span>√</span>
</li>
<li>
需 求:
<ul>
<li><input type="checkbox" name="check" value="人力资源">人力资源</li>
<li><input type="checkbox" name="check" value="客户关系">客户关系</li>
<li><input type="checkbox" name="check" value="项目管理">项目管理</li>
<li><input type="checkbox" name="check" value="项目财务">项目财务</li>
<li><input type="checkbox" name="check" value="工时管理">工时管理</li>
<li><input type="checkbox" name="check" value="费用管理">费用管理</li>
<li><input type="checkbox" name="check" value="文档管理">文档管理</li>
<li><input type="checkbox" name="check" value="物品管理">物品管理</li>
<li><input type="checkbox" name="check" value="员工自助">员工自助</li>
<li><input type="checkbox" name="check" value="智能BI">智能BI</li>
<li><input type="checkbox" name="check" value="移动办公（可多选）">移动办公（可多选）</li>
</ul>
</li>
</ul> <button class="submit">提交申请</button>
<hr>
<p>想了解更多...........</p>
</div>
<div class="tinfos">
<table border="1px #ff0" cellspacing="0">
<tr>
<th><input type="checkbox" class="all"></th>
<th><span>公司名</span></th>
<th><span>联系人</span></th>
<th><span>性别</span></th>
<th><span>手机</span></th>
<th><span>邮箱</span></th>
<th><span>需求</span></th>
<th><span>操作</span></th>
<th><span>提交日期</span></th>
</tr>
</table>
</div>
</div>
</body>
html布局
//样式
1 <style>
li{
list-style: none;
}
.mesg {
margin: 0 auto;
width: 1000px;
height: 800px;
background-color: #f4f4f4;
padding: 20px;
} .mesg .info {
background-color: #ffffff;
width: 900px;
margin: 0 auto;
text-align: center;
margin-inside: 100px; } .submit {
font-size: 25px;
width: 200px;
height: 50px;
border: 1px solid #3ba2ff;
color: #3ba2ff;
background-color: #fff;
display: block;
margin: 0 auto;
}
table{
margin: 0 auto;
}
table th{
color: red;
}
.tinfos{
width: 1000px;
height: auto;
margin: 0 auto;
text-align: center;
}
h4{
margin-left: 20%;
}
</style>
jquery实现的代码
<script>
$(function () {
//隐藏
$("li span").hide();
$(".cname").blur(function () {
if($(this).val().length<5){
$(this).next("span").css("color","red").show();
}else{
$(".cname").next("span").hide();
$(".cname").next("span").next("span").show();
}
})
$("input:radio[name='sex']:checked").blur(function () {
if($(this).val()==""){
$(this).next("span").css("color","red").show();
}else{
$(this).next("span").hide();
$(this).next("span").next("span").show();
}
});
$(".name").blur(function () {
if($(this).val().length<3){
$(this).next("span").css("color","red").show();
}else{
$(this).next("span").hide();
$(this).next("span").next("span").show();
}
})
$(".email").blur(function () {
if($(this).val()==""||(this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) )){
$(".email").next("span").css("color","red").show();
}else{
$(".email").next("span").hide();
$(".email").next("span").next("span").show();
}
})
$(".mobile").blur(function () {
if($(this).val()==""||(this.value!="" && !/^1[3456789]\d{9}$/.test(this.value) )){
$(this).next("span").css("color","red").show();
}else{
$(this).next("span").hide();
$(this).next("span").next("span").show();
}
});
$("input:checkbox[name='check']:checked").click(function () {
if($(this).val()==""){
$(this).next("span").css("color","red").show();
}else{
$(this).next("span").hide();
$(this).next("span").next("span").show();
}
})
//移除结点
$(".sc").click(function () {
$(this).parents("tr").remove();
});
//提交,添加数据
$(".submit").click(function () {
var $cname=$(".cname").val();
var $name = $(".name").val();
var $sex = $("input:radio[name='sex']:checked").val();
var $mobile = $(".mobile").val();
var $email = $(".email").val();
var chk_lists = "";
var $checked = $("input:checkbox[name='check']:checked");
$checked.each(function () {
chk_lists+=$(this).val()+",";
});
if ($cname!=null&&$cname!=""||$name!=null&&$name!=""||$mobile!=null&&$mobile!=""||$email!=null&&$email!=""||$sex!=null&&$sex!=""||chk_lists!=null&&chk_lists!=""){
alert($cname+"=="+$name+"===="+$sex+"=="+$mobile+"==="+$email+"==="+chk_lists);
var addtext = "<tr><td><input type='checkbox' class='checkItem'></td><td><span>"+$cname+"</span></td><td><span>"+$name+"</span></td><td><span>"+$sex+"</span></td><td><span>"+$mobile+"</span></td><td><span>"+$email+"</span></td><td><span>"+chk_lists+"</span></td><td><button class='sc'>删除</button></td><td><span>提交日期</span></td></tr>";
$("table").append(addtext);
//清空
$(".cname,.name,.sex,.mobile,.email").val("");
$(".info input:checkbox").attr("checked",false);
chk_lists = "";
//删除
$(".sc").click(function () {
$(this).parents("tr").remove();
});
}else{
alert("数据不能为空");
}
});
//全选
$(".all").click(function () {
if($(this).is(":checked")){
$(".checkItem").prop("checked",true);
}else{
$(".checkItem").prop("checked",false);
}
})
})
</script>
jquery代码
//以下为效果
简单的jquery表单验证+添加+删除+全选/反选的更多相关文章
- 【jquery】Validform，一款不错的 jquery 表单验证插件
关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...
- python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
- jquery validate强大的jquery表单验证插件
jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...
- jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
- jquery表单验证使用插件formValidator
JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...
- JQuery 表单验证--jquery validation
jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
- jQuery表单验证以及将表单序列化为json对象小练习
jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...
随机推荐
- 使用VS2005编译安装openssl1.1.1c
1.首先获取openssl源码包 openssl-1.1.1c.tar.gz: 2.安装 ActivePerl: 2.解压源码包,打开vs2005命令行工具,通过命令行进入openssl源码包根目录: ...
- Linux中环境变量相关文件的区别
Linux下各种不同环境变量相关文件的作用: 1. /etc/environment 设置整个系统的环境,系统启动时,该文件被执行. 2. /etc/profile 设置所有用户的环境,当用 ...
- 搭建私人的云笔记_使用webdav服务
搭建私人的云笔记_使用webdav服务 转载注明来源: 本文链接 来自osnosn的博客,写于 2019-10-10. 手机上有很多云笔记app,大多支持云存储.可是把笔记放在别人的服务器上,总觉得不 ...
- 【CF528D】Fuzzy Search
Problem Description 你有一个长度为 \(n\) 的串 \(S\),以及长度为 \(m\) 的串 \(T\). 现给定一个数 \(k\) ,我们说 \(T\) 在 \(S\) 的位置 ...
- [转]UiPath Build Data Table
本文转自:https://docs.uipath.com/activities/docs/build-data-table UiPath.Core.Activities.BuildDataTable ...
- Markdown: color list
Color name | hex character | Name AliceBlue #F0F8FF rgb(240, 248, 255) AntiqueWhite #FAEBD7 rgb(250, ...
- 图片切换器（ImageSwitcher）的功能与用法
ImageSwitcher继承了ViewSwitcher,因此它具有与ViewSwitcher相同的特征:可以在切换View组件时使用动画效果.ImageSwitcher继承了ViewSwitcher ...
- 分析Android APK-反编译修改打包
2.2 这个章节的主要作用就是,修改一个别人的app,在里边增加一段自己的广告代码. 2.2.1 UAA 编译修改,工具安装配置之前讲过,无需再赘述.我们找到了一款游戏app的apk, 找到所在的ap ...
- CentOS7 安装Python3.6.8
CentOS7 安装Python3.6.8 1. 安装依赖环境 yum -y groupinstall "Development tools" yum -y install zli ...
- Redis内存数据库在Exchange会议室的整体应用架构
注:本文是别人写的,感觉写得很好就转过来,版权归原作者所有哦,谁知道出处可以告诉我,谢谢. 根据以上的会议室应用现状分析,该架构的核心是把历史发生的会议室申请数据定时同步到Redis内存数据库中,对于 ...