//布局
 <body>

 <h4><a href="#">首页</a>&gt;<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>

                     性&nbsp;别:<input type="radio" class="nan" name="sex" value="男">男

                     &nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" class="nv" name="sex" value="女">女

                     <span>必选</span><span>√</span>

                 </li>

                 <li>

                     <p>手机的格式必须是11位整数数字</p>

                 </li>

                 <li>

                     手&nbsp;机:<input type="text" class="mobile"><span>手机号码有误</span><span>√</span>

                 </li>

                 <li>

                     邮&nbsp;箱:<input type="email" class="email" placeholder="必须是以.com结尾并且包含@"><span>email格式不正确</span><span>√</span>

                 </li>

                 <li>

                     需&nbsp;求:

                     <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表单验证+添加+删除+全选/反选的更多相关文章

  1. 【jquery】Validform，一款不错的 jquery 表单验证插件

    关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便 ...

  2. python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式

    python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...

  3. jquery validate强大的jquery表单验证插件

    jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...

  4. jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件

    jQuery框架学习第一天:开始认识jQueryjQuery框架学习第二天:jQuery中万能的选择器jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQuer ...

  5. 【jQuery基础学习】06 jQuery表单验证插件-Validation

    jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...

  6. jquery表单验证使用插件formValidator

    JQuery表单验证使用插件formValidator 作者: 字体:[增加 减小] 类型:转载 时间:2012-11-10我要评论 jquery表单验证使用插件formValidator,可供有需求 ...

  7. JQuery 表单验证--jquery validation

    jquery validation,表单验证控件 官方地址 :http://jqueryvalidation.org/ jquery表单验证 默认值校验规则 jquery表单验证 默认的提示 < ...

  8. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

  9. jQuery表单验证以及将表单序列化为json对象小练习

    jquery表单验证(非实时验证),同时,将表单序列化为json对象提交表单. <!DOCTYPE html> <html lang="en"> <h ...

随机推荐

  1. 利用Azure虚拟机安装Dynamics 365 Customer Engagement之六：安装后端服务器

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  2. Java面试题_第一阶段(static、final、面向对象、多线程、集合、String、同步、接口、GC、JVM)

    1.1 简述static和final的用法? static:修饰属性,方法,代码块 (1)静态属性:也可叫类变量  类名.属性名  来访问 (共有的类变量与对象无关,只和类有关) 注意:类中的实例变量 ...

  3. Sql Server数据库常用Transact-SQL脚本

    数据库 1.创建数据库 USE master ; GO CREATE DATABASE Sales ON ( NAME = Sales_dat, FILENAME = 'C:\Program File ...

  4. 2019icpc上海站 打星体验，首次感想 D K代码

    暑期训练以来首次参赛,体验还行吧,过程有些战战兢兢. 刚开始以为是正式队,热身赛只过了一题,有很大的压力,正赛前一天晚上才知道是打星队,有点如释重负的感觉.也幸好都是打星队,不然真的有可能打铁,虽然实 ...

  5. IT兄弟连 HTML5教程 CSS3属性特效 动画-animation

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...

  6. springboot + springcloud +nacos实战

    首先从整个软件的功能和应用场景来说,nacos更像consul,而非eureka,nacos设计的时候自带的配置中心功能,让我们省下了去搞springcloud config的时间,但这里并不是说na ...

  7. go路由httprouter中的压缩字典树算法图解及c++实现

    目录 go路由httprouter中的压缩字典树算法图解及c++实现 前言 httprouter简介 压缩字典树 概念 插入操作 查询操作 c+++实现 go路由httprouter中的压缩字典树算法 ...

  8. Git实战指南----跟着haibiscuit学Git(第十篇)

    笔名:  haibiscuit 博客园: https://www.cnblogs.com/haibiscuit/ Git地址: https://github.com/haibiscuit?tab=re ...

  9. 修改so库中的依赖名

    修改so库中的依赖名 在ArchLinuxArm上有一些针对aarch64, arm, armeabi-v7a等Android常用架构的so库可以下载,有时候可以省去很多编译时间,且都是编译optim ...

  10. SpringCloud之Hystrix：集群容错框架

    分布式环境中,可能会有一些被依赖的服务会失效,影响系统的稳定运行.Hystrix通过添加延迟阈值以及容错的逻辑,以控制分布式系统间组件的交互.Hystrix通过隔离服务间的访问点.停止它们之间的级联故 ...