纯JS实现表单验证实例

表单我实现了，input属性是text（文本框）、radio（单选按钮）、checkBox（多选按钮）的知识点，

fieldset标签（组合表单中的相关元素）、select标签（选择列表）和textarea标签（多行文本框）。

rush:js;">

学生选课基本信息姓名：
学号：
性别：男 dio" name="sex" value="女">女
邮箱：
喜欢的老师：
还有话说：

<br/><br/> 
  <button type="submit">提交</button> 
  <button type="reset">重置</button> 
</form> </pre>
</div>
<p>css样式如下图：</p>
<p style="text-align: center"><p class="pic_center"><img  src="https://files.jb51.cc/file_images/article/201612/201612241152527.png" /></p></p>
<p>css这部分写的不太好，请大家批评指正。（参考的网上的一些资料，网址忘了）</p>
<div class="jb51code">
<pre class="b<a href="https://www.jb51.cc/tag/rush/" target="_blank" class="keywords">rush</a>:js;">
*{ 
  margin-left:auto; 
  margin-right:auto; 
  max-width: 500px; 
  background: #F8F8F8; 
  padding: 10px; 
  font: 12px Arial,Helvetica,sans-serif; 
  color: #666; 
  border-radius: 5px; 
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px; 
} 
body,form{ 
  padding: 15px; 
  /*width: 500px;*/ 
  background: #F4F4F4; 
} 
h2 { 
  padding-b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om:2px; 
   *padding:0; 
font: 24px "Trebuchet MS",Arial,sans-serif; 
padding: 20px 0px 20px 40px; 
<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play: block; 
margin: -30px -30px 10px -30px; 
color: #FFF; 
background: #9DC45F; 
text-shadow: 1px 1px 1px #949494; 
border-radius: 5px 5px 0px 0px; 
-webkit-border-radius: 5px 5px 0px 0px; 
-moz-border-radius: 5px 5px 0px 0px; 
border-b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om:1px solid #89AF4C; 
} 
/*label { 
<a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play: block; 
margin: 0px 0px 0px; 
}*/ 
 select { 
color: #555; 
height: 30px; 
line-height:12px; 
width: 30%; 
padding: 0px 0px 0px 10px; 
margin-top: 2px; 
border: 1px solid #E5E5E5; 
background: #FBFBFB; 
outline: 0; 
-webkit-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>-shadow: inset 1px 1px 2px rgba(238,238,0.2); 
<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>-shadow: inset 1px 1px 2px rgba(238,0.2); 
font: <a href="https://www.jb51.cc/tag/nor/" target="_blank" class="keywords">nor</a>mal 12px/12px Arial,sans-serif; 
} 
.classes input{ 
  vertical-align:middle;  
  margin-top:-2px;  
  margin-b<a href="https://www.jb51.cc/tag/ott/" target="_blank" class="keywords">ott</a>om:1px; 
  height: 35px; 
} 
textarea{ 
height:100px; 
width: 90%; 
padding-top: 10px; 
} 
button { 
background-color: #9DC45F; 
border-radius: 5px; 
-webkit-border-radius: 5px; 
-moz-border-border-radius: 5px; 
border:none; 
padding: 10px 25px 10px 25px; 
color: #FFF; 
text-shadow: 1px 1px 1px #949494; 
} 
button:hover { 
background-color:#80A24A; 
} 
#name,#num,#email{vertical-align:middle;}/*input和<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>在一行*/ 
#namePrompt,#numPrompt,#emailPrompt{ 
  vertical-align:middle;/*input和<a href="https://www.jb51.cc/tag/tupian/" target="_blank" class="keywords">图片</a>在一行*/ 
  <a href="https://www.jb51.cc/tag/dis/" target="_blank" class="keywords">dis</a>play: inline-block; 
  padding: 0px; 
  color: red; 
  background-color:#F4F4F4;  
} 
/*验证表单的格式*/ 
/*当鼠标放到文本框时，<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>文本的样式*/ 
.import_prompt{ 
  border:solid 1px #ffcd00; 
  background-color:#ffffda; 
  } 
下来就是js表单验证了。。。。。。
这是js验证的目标。
1.当鼠标放在姓名文本框时，<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>文本及样式。
2./*当鼠标离开姓名文本框时，<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>文本及样式*/ 汉字 
3.当鼠标放在学号文本框时，<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>文本及样式。
4./*当鼠标离开学号文本框时，<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>文本及样式*/只能是数字
5.邮箱的验证，必须符合邮箱的格式。
6.表单提交时验证表单<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>输入的有效性。
其中用到了正则表达式来匹配。
匹配简体<a href="https://www.jb51.cc/tag/zhongwen/" target="_blank" class="keywords">中文</a>的正则是^[\u4e00-\u9fa5]+$
匹配邮箱格式的正则是 [\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?
直接上<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>：
[javascript] view plain <a href="https://www.jb51.cc/tag/cop/" target="_blank" class="keywords">cop</a>y 在CODE上查看<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>片派生到我的<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a>片
// 通过getElementById得到相应元素 
function $(id){ 
  return document.getElementById(id); 
} 
// 当鼠标放在姓名文本框时，<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>文本及样式。 
function checkNameFocus(){ 
  var userNameId=$("name"); 
  userNameId.className="import_prompt"; 
  var namePrompt=$("namePrompt"); 
  namePrompt.innerHTML="必须是汉字哦~"; 
} 
/*当鼠标离开姓名文本框时，<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>文本及样式*/  
function checkNameBlur(){ 
  var namePrompt=$("namePrompt"); 
  namePrompt.innerHTML=null; 
  var reg1=/^[\u4e00-\u9fa5]+$/;//匹配简体<a href="https://www.jb51.cc/tag/zhongwen/" target="_blank" class="keywords">中文</a>的正则表达式 
  var name=$("name").value; 
  // 先查看是否为空 
  if(name==""){ 
    namePrompt.innerHTML="名字不能为空！" 
    return false; 
  } 
  else if(!reg1.test(name)){ 
    var trueimg=document.createElement("img"); 
    trueimg.src="./formimages/false.png"; 
    trueimg.width="15"; 
    namePrompt.appendChild(trueimg); 
    return false; 
  }else{ 
    var trueimg=document.createElement("img"); 
    trueimg.src="./formimages/true.png"; 
    trueimg.width="15"; 
    namePrompt.appendChild(trueimg); 
    return true; 
  } 
} 
//当鼠标放在学号文本框时，<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>文本及样式。 
function checkNumFocus(){ 
  var studentNum=$("num"); 
  studentNum.className="import_prompt"; 
  var numPrompt=$("numPrompt"); 
  numPrompt.innerHTML="必须是0-9的10位数字哦~"; 
} 
/*当鼠标离开学号文本框时，<a href="https://www.jb51.cc/tag/tishi/" target="_blank" class="keywords">提示</a>文本及样式*/ 
function checkNumBlur(){ 
  var numPrompt=$("numPrompt"); 
  numPrompt.innerHTML=null; 
  var reg2=/^\d{10}$/; 
  var xuehao=$("num").value; 
  //先验证是否为空 
  if(xuehao==""){ 
    numPrompt.innerHTML="学号不能为空！"; 
    return false; 
  } 
  else if(!reg2.test($("num").value)){//好奇怪，使用变量就变成空的了，在外边就有值。 
    var trueimg=document.createElement("img"); 
    trueimg.src="./formimages/false.png"; 
    trueimg.width="15"; 
    numPrompt.appendChild(trueimg); 
    return false; 
  } 
  else{ 
    var trueimg=document.createElement("img"); 
    trueimg.src="./formimages/true.png"; 
    trueimg.width="15"; 
    numPrompt.appendChild(trueimg); 
    return true; 
  } 
} 
//邮箱的验证，必须符合邮箱的格式。 
function checkEmailFocus(){ 
  var email=$("email"); 
  email.className="import_prompt"; 
  var emailPrompt=$("emailPrompt"); 
  emailPrompt.innerHTML="请输入您常用的电子邮箱"; 
} 
function checkEmailBlur(){ 
  var emailPro=$("emailPrompt");; 
  emailPrompt.innerHTML=null; 
  var emailValue=$("email").value; 
  var reg3=/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/; 
  //先验证是否为空 
  if(emailValue==""){ 
    emailPrompt.innerHTML="邮箱不能为空！"; 
    return false; 
  } 
  else if(!reg3.test(emailValue)){ 
    var trueimg=document.createElement("img"); 
    trueimg.src="./formimages/false.png"; 
    trueimg.width="15"; 
    emailPrompt.appendChild(trueimg); 
    return false; 
  } 
  else{ 
    var trueimg=document.createElement("img"); 
    trueimg.src="./formimages/true.png"; 
    trueimg.width="15"; 
    emailPrompt.appendChild(trueimg); 
    return true; 
  } 
} 
//验证复选框 
function checkCourse(){  
  var courses=$("course"); 
  var cbs = courses.getElementsByTagName("input");  
  var b = false;  
  for(var i=0;i<cbs.length;i++){  
    if(cbs[i].type == "check<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>" && cbs[i].checked){  
      b = true;  
    }  
  }  
  if(!b){  
    alert("请至少选择一门课程！！！");  
    return false;  
  }  
}  
//表单提交时验证表单<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>输入的有效性 
function checkForm(){ 
   var flagName=checkNameBlur(); 
   var flagNum=checkNumBlur(); 
   var flagEmail=checkEmailBlur(); 
   var flagCourse=checkCourse(); 
   if(flagName==true &&flagNum==true &&flagEmail==true &&flagCourse==true){ 
     return true; 
    } 
    else{ 
      return false; 
     }   
  } </pre>
</div>
<p>以上所述是小编给大家介绍的纯JS实现表单验证实例。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可<a href="https://www.jb51.cc/tag/fenxiang/" target="_blank" class="keywords">分享</a>给好友！感谢<a href="https://www.jb51.cc/tag/zhichi/" target="_blank" class="keywords">支持</a>。</p><ins class="adsbygoogle"
                     style="display:inline-block;width:780px;height:90px"
                     data-ad-client="ca-pub-4605373693034661"
                     data-ad-slot="4286417769"></ins>
                <script>
                     (adsbygoogle = window.adsbygoogle || []).push({});
                </script><p class="small text-muted">版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。</p>
                            </div><div class="topcard-tags"><a href="https://www.jb51.cc/tag/jsbiaodanyanzheng/" class="tag_link" target="_blank">js表单验证</a></div><ul class="list-group">
                  <li class="list-group-item"><a href="https://www.jb51.cc/js/43199.html" title="DropDownList控件绑定数据源的三种方法">上一篇：DropDownList控件绑定数据源的三种</a><a href="https://www.jb51.cc/js/43192.html" title="js实现的xml对象转json功能示例" class="text-muted pull-right">下一篇：js实现的xml对象转json功能示例</a>

</li>
                </ul>
                        </div>
                    </div>
                </div>
                <div class="row row-sm">
                    <div class="col-sm-12 col-md-12 col-lg-12">
                        <div class="card">
                            <h4>相关推荐</h4>
                            <hr />
<div class="list_con">
                                 <a href="https://www.jb51.cc/js/4742335.html" title="自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗"><img class="lazy" src="https://www.jb51.cc/images/np.jpg" data-original="https://www.jb51.cc/res/2024/09-25/18/879e7ec08a36083a57dfc8b44214469d.gif" title="" width="160" height="90" style="float:right;margin-left:30px;" /><div class="title">自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗</div>
                                <div class="summary">前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为layUI的一个重要组件，使用简单、接口参数丰富，功能健壮，深受广大开发者的喜爱，作为一个热（经）爱（常）工（划）作（水），喜欢钻研探索技术的程序员（狗），我们自己来实现一个web弹窗/层，一窥layer的本源（/手动滑稽脸），进步，从</div>
                  <time class="summary">作者：huanzi-qch 时间：2024-09-25</time>
                                </a>
                            </div><div class="list_con">
                                 <a href="https://www.jb51.cc/js/4742334.html" title="nice-validator表单验证插件的简单使用"><img class="lazy" src="https://www.jb51.cc/images/np.jpg" data-original="https://www.jb51.cc/res/2024/09-25/18/84bd76d88488cafdfb2789b5a991fecf.png" title="" width="160" height="90" style="float:right;margin-left:30px;" /><div class="title">nice-validator表单验证插件的简单使用</div>
                                <div class="summary">前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步，是数据安全的第一道关卡，虽然我们不能100%相信客户端提交的数据（真正的校验还得在服务端进行），但设置前端表单校验也是至关重要的，自己写逻辑代码一个一个表单字段去校验不现实，又不想自己造轮子，使用jquery插件是不错的选择，这里记录一下在</div>
                  <time class="summary">作者：huanzi-qch 时间：2024-09-25</time>
                                </a>
                            </div><div class="list_con">
                                 <a href="https://www.jb51.cc/js/4742333.html" title="基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现"><img class="lazy" src="https://www.jb51.cc/images/np.jpg" data-original="https://www.jb51.cc/res/2024/09-25/18/cf659cff914621d918c6072273c30973.gif" title="" width="160" height="90" style="float:right;margin-left:30px;" /><div class="title">基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现</div>
                                <div class="summary">前言 图片上传是web项目常见的需求，我基于之前的博客的代码（请戳：formData批量上传的多种实现）里的第三种方法实现多图片的预览、上传，并且支持三种方式添加图片到上传列表：选择图片、复制粘贴图片、鼠标拖拽图片，同时支持从上传列表中移除图片（点击“X”号） 效果演示 选择图片 页面操作 后台接参</div>
                  <time class="summary">作者：huanzi-qch 时间：2024-09-25</time>
                                </a>
                            </div><div class="list_con">
                                 <a href="https://www.jb51.cc/js/4742332.html" title="踹掉后端，前端导出Excel！"><img class="lazy" src="https://www.jb51.cc/images/np.jpg" data-original="https://www.jb51.cc/res/2024/09-25/18/02f80db4fdf55f3a24674e2854e018f2.png" title="" width="160" height="90" style="float:right;margin-left:30px;" /><div class="title">踹掉后端，前端导出Excel！</div>
                                <div class="summary">前言 导出Excel文件这个功能，通常都是在后端实现返回前端一个下载链接，但有时候我们只想导出前端页面上已经有了的数据，不想再调后端导出接口浪费服务器资源，学习本文demo例子，我们踹掉后端，直接在前端导出Excel！ 代码实现 1、利用Blob对象构造一个a标签的href链接，从而实现文件下载，E</div>
                  <time class="summary">作者：huanzi-qch 时间：2024-09-25</time>
                                </a>
                            </div><div class="list_con">
                                 <a href="https://www.jb51.cc/js/4742331.html" title="Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量"><img class="lazy" src="https://www.jb51.cc/images/np.jpg" data-original="https://www.jb51.cc/res/2024/09-25/18/db8dce1453ed09a8230451f2a9fcdc68.png" title="" width="160" height="90" style="float:right;margin-left:30px;" /><div class="title">Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量</div>
                                <div class="summary">前言 众所周知，js是单线程的，从上往下，从左往右依次执行，当我们有耗时的任务需要处理时，便会阻塞线程造成页面卡顿等问题。web worker的目的，就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务</div>
                  <time class="summary">作者：huanzi-qch 时间：2024-09-25</time>
                                </a>
                            </div><div class="list_con">
                                 <a href="https://www.jb51.cc/js/4742330.html" title="select标签 禁止选择但又能通过序列化form表单传值到后台"><img class="lazy" src="https://www.jb51.cc/images/np.jpg" data-original="https://www.jb51.cc/res/2024/09-25/18/1cd1c972ce822d1a99b7d1b2c8f9cfcd.png" title="" width="160" height="90" style="float:right;margin-left:30px;" /><div class="title">select标签 禁止选择但又能通过序列化form表单传值到后台</div>
                                <div class="summary">前言 项目开发中，我们可能会碰到这样的需求：select标签，禁止选择但又能通过序列化form表单传值到后台，但是当我们使用disabled=&quot;disabled&quot;时发现，无法序列化form获取到select标签的值；当我们使用readonly=&quot;readonly&quo</div>
                  <time class="summary">作者：huanzi-qch 时间：2024-09-25</time>
                                </a>
                            </div><div class="list_con">
                                 <a href="https://www.jb51.cc/js/4742329.html" title="还在问跨域？本文记录js跨域的多种实现实例"><img class="lazy" src="https://www.jb51.cc/images/np.jpg" data-original="https://www.jb51.cc/res/2024/09-25/18/b3d33681769f85a34baa6f533017a87e.png" title="" width="160" height="90" style="float:right;margin-left:30px;" /><div class="title">还在问跨域？本文记录js跨域的多种实现实例</div>
                                <div class="summary">前言 众所周知，受浏览器同源策略的影响，产生了跨域问题，那么我们应该如何实现跨域呢？本文记录几种跨域的简单实现 前期准备 为了方便测试，我们启动两个服务，10086（就是在这篇博客自动生成的项目，请戳：SpringBoot系列——Spring-Data-JPA（究极进化版） 自动生成单表基础增、删、</div>
                  <time class="summary">作者：huanzi-qch 时间：2024-09-25</time>
                                </a>
                            </div><div class="list_con">
                                 <a href="https://www.jb51.cc/js/4742328.html" title="formData批量上传的多种实现"><img class="lazy" src="https://www.jb51.cc/images/np.jpg" data-original="https://www.jb51.cc/res/2024/09-25/18/f653266552cf5647e3a76ba22e73dece.png" title="" width="160" height="90" style="float:right;margin-left:30px;" /><div class="title">formData批量上传的多种实现</div>
                                <div class="summary">前言 最近项目需要批量上传附件，查了下资料，网上很多但看着一脸懵，只贴部分代码，介绍也不详细，这里记录一下自己的采坑与多种实现，以免以后忘记。 这里先介绍下FormData对象，以下内容摘自：https://developer.mozilla.org/zh-CN/docs/Web/API/FormD</div>
                  <time class="summary">作者：huanzi-qch 时间：2024-09-25</time>
                                </a>
                            </div><div class="list_con">
                                 <a href="https://www.jb51.cc/js/4742327.html" title="laypage 物理分页与逻辑分页实例"><img class="lazy" src="https://www.jb51.cc/images/np.jpg" data-original="https://www.jb51.cc/res/2024/09-25/18/132e831d786a4bdd438d96a8d4cc755e.png" title="" width="160" height="90" style="float:right;margin-left:30px;" /><div class="title">laypage 物理分页与逻辑分页实例</div>
                                <div class="summary">前言 以下介绍摘自&#160;layui官网laypage layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。自 layui 2.0 开始，无论是从核心代码还是API设计，layPage 都完成了一次蜕变。清爽的UI、灵活的排版，极简的调用方式，这一切的优质元素</div>
                  <time class="summary">作者：huanzi-qch 时间：2024-09-25</time>
                                </a>
                            </div><div class="list_con">
                                 <a href="https://www.jb51.cc/js/4742326.html" title="乐观锁机制解决多层嵌套异步ajax问题"><div class="title">乐观锁机制解决多层嵌套异步ajax问题</div>
                                <div class="summary">前言 在项目中我们通常需要使用ajax异步嵌套去请求数据并做数据的展示，当我们多次快速的多次的发起ajax，因为ajax是异步的，每个ajax触发回调的时间都是不可控的，这样就会造成前面发起的ajax跟后面发起的ajax都有可能去修改同一个DOM，导致展示的数据顺序错乱或数据重复，我们希望DOM展示</div>
                  <time class="summary">作者：huanzi-qch 时间：2024-09-25</time>
                                </a>
                            </div></div>
                    </div>
</div>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-3">
              
          <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">

<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:600px"
     data-ad-client="ca-pub-4605373693034661"
     data-ad-slot="7541177540"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
              </div>
            </div>
          </div>
          
           
          <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card" style="padding:20px;">
                <label class="main-content-label ">小编推荐</label><div class="entry-img"><img src="https://www.jb51.cc/res/2023/06-29/12/fa513c17761076a6649593e2bd17f268.jpg" height="150" width="100%"><div class="entry-wrap"><a href="https://www.jb51.cc/mp/4606010.html" title="苹果市值2025年有望达4万亿美元" >苹果市值2025年有望达4万亿美元</a> </div></div><ul class="n-list"><li><a href="https://www.jb51.cc/mp/4742234.html" title="微信青少年模式全新升级：视频号内容分级与家长控制功能上线！" >• 微信青少年模式全新升级：视频号内容分</a></li><li><a href="https://www.jb51.cc/mp/4742229.html" title="《地下城与勇士DNF》永久交通卡卡面上线华为钱包！" >• 《地下城与勇士DNF》永久交通卡卡面上线</a></li><li><a href="https://www.jb51.cc/mp/4742227.html" title="优酷为方便长辈看视频，上线银发剧场！" >• 优酷为方便长辈看视频，上线银发剧场！</a></li><li><a href="https://www.jb51.cc/mp/4742224.html" title="微信读书集成腾讯混元AI技术，可以一日阅读千页？" >• 微信读书集成腾讯混元AI技术，可以一日</a></li><li><a href="https://www.jb51.cc/mp/4742221.html" title="京东快递上线11项会员权益" >• 京东快递上线11项会员权益</a></li><li><a href="https://www.jb51.cc/mp/4742219.html" title="高德地图功能升级，新增安全预警" >• 高德地图功能升级，新增安全预警</a></li><li><a href="https://www.jb51.cc/mp/4742214.html" title="小爱同学多模态能力升级，引领智能生活新潮流" >• 小爱同学多模态能力升级，引领智能生活</a></li></ul>
              </div>
            </div>
          </div>
          
          
          <div class="row row-sm">
            <div class="col-sm-12 col-md-12 col-lg-12">
              <div class="card">
                <label class="main-content-label ">热门标签<a href="https://www.jb51.cc/all" class="pull-right">更多</a>
                </label>
                <div class="topcard-tags"><a href="https://www.jb51.cc/tag/python/" title="python">python</a><a href="https://www.jb51.cc/tag/JavaScript/" title="JavaScript">JavaScript</a><a href="https://www.jb51.cc/tag/java/" title="java">java</a><a href="https://www.jb51.cc/tag/HTML/" title="HTML">HTML</a><a href="https://www.jb51.cc/tag/PHP/" title="PHP">PHP</a><a href="https://www.jb51.cc/tag/reactjs/" title="reactjs">reactjs</a><a href="https://www.jb51.cc/tag/C/" title="C#">C#</a><a href="https://www.jb51.cc/tag/Android/" title="Android">Android</a><a href="https://www.jb51.cc/tag/CSS/" title="CSS">CSS</a><a href="https://www.jb51.cc/tag/Nodejs/" title="Node.js">Node.js</a><a href="https://www.jb51.cc/tag/sql/" title="sql">sql</a><a href="https://www.jb51.cc/tag/rp/" title="r">r</a><a href="https://www.jb51.cc/tag/python3x/" title="python-3.x">python-3.x</a><a href="https://www.jb51.cc/tag/MysqL/" title="MysqL">MysqL</a><a href="https://www.jb51.cc/tag/jQuery/" title="jQuery">jQuery</a><a href="https://www.jb51.cc/tag/c4343/" title="c++">c++</a><a href="https://www.jb51.cc/tag/pandas/" title="pandas">pandas</a><a href="https://www.jb51.cc/tag/flutter/" title="Flutter">Flutter</a><a href="https://www.jb51.cc/tag/angular/" title="angular">angular</a><a href="https://www.jb51.cc/tag/IOS/" title="IOS">IOS</a><a href="https://www.jb51.cc/tag/django/" title="django">django</a><a href="https://www.jb51.cc/tag/linux/" title="linux">linux</a><a href="https://www.jb51.cc/tag/swift/" title="swift">swift</a><a href="https://www.jb51.cc/tag/typescript/" title="typescript">typescript</a><a href="https://www.jb51.cc/tag/luyouqi/" title="路由器">路由器</a><a href="https://www.jb51.cc/tag/JSON/" title="JSON">JSON</a><a href="https://www.jb51.cc/tag/luyouqishezhi/" title="路由器设置">路由器设置</a><a href="https://www.jb51.cc/tag/wuxianluyouqi/" title="无线路由器">无线路由器</a><a href="https://www.jb51.cc/tag/h3c/" title="h3c">h3c</a><a href="https://www.jb51.cc/tag/huasan/" title="华三">华三</a><a href="https://www.jb51.cc/tag/huasanluyouqishezhi/" title="华三路由器设置">华三路由器设置</a><a href="https://www.jb51.cc/tag/huasanluyouqi/" title="华三路由器">华三路由器</a><a href="https://www.jb51.cc/tag/diannaoruanjianjiaocheng/" title="电脑软件教程">电脑软件教程</a><a href="https://www.jb51.cc/tag/arrays/" title="arrays">arrays</a><a href="https://www.jb51.cc/tag/docker/" title="docker">docker</a><a href="https://www.jb51.cc/tag/ruanjiantuwenjiaocheng/" title="软件图文教程">软件图文教程</a><a href="https://www.jb51.cc/tag/C/" title="C">C</a><a href="https://www.jb51.cc/tag/vuejs/" title="vue.js">vue.js</a><a href="https://www.jb51.cc/tag/laravel/" title="laravel">laravel</a><a href="https://www.jb51.cc/tag/springboot/" title="spring-boot">spring-boot</a></div>
              </div>
            </div>
          </div>
</div>
        </div>
    </div>
    <footer id="footer">
    <div class="container" style="width:1440px;">
        <div class="row hidden-xs">
            <div class="col-sm-12 col-md-9 col-lg-9 site-link">
                <ul class="list-inline">
                    <li>友情链接:</li><li><a href="https://ai.jb51.cc/" title="ai导航是编程之家旗下ai方向的ai资讯、ai工具类集合导航站。" target="_blank" rel="nofollow">ai导航</a></li></ul>
                <ul class="list-inline">
                    <li><a href="https://www.jb51.cc" title="编程之家">编程之家</a></li>-<li><a href="https://t5m44pq3f7.jiandaoyun.com/f/638ca61b7b079a000a5d2dd6" rel="nofollow" title="我要投稿" target="_blank">我要投稿</a></li>-<li><a target="_blank" rel="nofollow" href="https://t5m44pq3f7.jiandaoyun.com/f/638ca8c69ad234000a79561f" title="广告合作">广告合作</a></li>-<li><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=76874919&site=qq&menu=yes">联系我们</a></li>-<li><a href="https://www.jb51.cc/disclaimers.html" title="免责声明">免责声明</a></li>-<li><a href="https://www.jb51.cc/sitemap/all/index.xml" title="网站地图" target="_blank">网站地图</a></li>
                </ul>
                <div>版权所有 © 2018编程之家<a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">闽ICP备13020303号-8</a>
                </div>
            </div>
            <div class="col-sm-12 col-md-3 col-lg-3"><img src="https://www.jb51.cc/qrcode.jpg" width="90" alt="微信公众号搜索 “ 程序精选 ” ，选择关注！">
                <div class="pull-right">微信公众号搜<span class="text-danger">"智元新知"</span>关注<br />微信扫一扫可直接关注哦！</div>
            </div>
        </div>
    </div>
</footer>
<script>
(function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
<script src="https://www.jb51.cc/js/count.js"></script>
    
</body>
</html>