gaoyl101
gaoyl101

JavaScript+正则表达式 完成简单表单验证

自己写了个简单表单验证：

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    2. 
   
   
   
   
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
    3. 
   
   
   
   
  3. <head> 
    4. 
   
   
   
   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    5. 
   
   
   
   
  5. <title>表单验证</title> 
    6. 
   
   
   
   
  6. <script language="javascript"> 
    7. 
   
   
   
   
  7. function checkUserNum(str){ 
    8. 
   
   
   
   
  8.     if(str.length<3 || str.length>18){ 
    9. 
   
   
   
   
  9.         document.getElementById("usernumErr").innerHTML = "<font color='red'>帐号长度在3-18字符内</font>"; 
    10. 
   
   
   
   
  10.         form1.password.focus(); 
    11. 
   
   
   
   
  11.         return false; 
    12. 
   
   
   
   
  12.     } 
    13. 
   
   
   
   
  13.      var flag = str.match(/\D/)==null; 
    14. 
   
   
   
   
  14.      if(!flag==true){ 
    15. 
   
   
   
   
  15.          document.getElementById("usernumErr").innerHTML = "<font color='red'>帐号必须有0-9数字组成</font>"; 
    16. 
   
   
   
   
  16.          form1.usernum.focus(); 
    17. 
   
   
   
   
  17.          return false; 
    18. 
   
   
   
   
  18.      } 
    19. 
   
   
   
   
  19.      document.getElementById("usernumErr").innerHTML = ""; 
    20. 
   
   
   
   
  20.      return true; 
    21. 
   
   
   
   
  21. }; 
    22. 
   
   
   
   
  22.  
    23. 
   
   
   
   
  23. function checkUserName(username){ 
    24. 
   
   
   
   
  24.     if(username.length == 0){ 
    25. 
   
   
   
   
  25.         document.getElementById("usernameErr").innerHTML = "<font color='red'>用户名不能为空</font>"; 
    26. 
   
   
   
   
  26.         form1.username.focus(); 
    27. 
   
   
   
   
  27.         return false; 
    28. 
   
   
   
   
  28.     } 
    29. 
   
   
   
   
  29.     var patn =   /^[a-zA-Z]+[a-zA-Z0-9]+$/; 
    30. 
   
   
   
   
  30.     if(!patn.test(username)){ 
    31. 
   
   
   
   
  31.         document.getElementById("usernameErr").innerHTML = "<font color='red'>用户名只能由英文字母或数字组成(不支持中文、不能以数字开头)</font>"; 
    32. 
   
   
   
   
  32.         form1.username.focus(); 
    33. 
   
   
   
   
  33.         return false; 
    34. 
   
   
   
   
  34.     } 
    35. 
   
   
   
   
  35.     document.getElementById("usernameErr").innerHTML = ""; 
    36. 
   
   
   
   
  36.     return true; 
    37. 
   
   
   
   
  37. }; 
    38. 
   
   
   
   
  38.  
    39. 
   
   
   
   
  39. function checkPwd(str){ 
    40. 
   
   
   
   
  40.     if(str.length<3 || str.length>18){ 
    41. 
   
   
   
   
  41.         document.getElementById("passwordErr").innerHTML = "<font color='red'>密码长度在3-18字符内</font>"; 
    42. 
   
   
   
   
  42.         form1.password.focus(); 
    43. 
   
   
   
   
  43.         return false; 
    44. 
   
   
   
   
  44.     } 
    45. 
   
   
   
   
  45.     if(escape(str).indexOf("%u")!=-1){ 
    46. 
   
   
   
   
  46.         document.getElementById("passwordErr").innerHTML = "<font color='red'>密码不能含有中文</font>"; 
    47. 
   
   
   
   
  47.         form1.password.focus(); 
    48. 
   
   
   
   
  48.         return false; 
    49. 
   
   
   
   
  49.     } 
    50. 
   
   
   
   
  50.    document.getElementById("passwordErr").innerHTML = ""; 
    51. 
   
   
   
   
  51.    return true; 
    52. 
   
   
   
   
  52. }; 
    53. 
   
   
   
   
  53.  
    54. 
   
   
   
   
  54. function confrimPwd(str){ 
    55. 
   
   
   
   
  55.     var pwd = document.form1.password.value; 
    56. 
   
   
   
   
  56.     if(str!=pwd){ 
    57. 
   
   
   
   
  57.         document.getElementById("password2Err").innerHTML = "<font color='red'>密码不一致!</font>"; 
    58. 
   
   
   
   
  58.         form1.password2.value=""; 
    59. 
   
   
   
   
  59.         form1.password2.focus(); 
    60. 
   
   
   
   
  60.         return false; 
    61. 
   
   
   
   
  61.     } 
    62. 
   
   
   
   
  62.    document.getElementById("password2Err").innerHTML = ""; 
    63. 
   
   
   
   
  63.    return true; 
    64. 
   
   
   
   
  64. }; 
    65. 
   
   
   
   
  65.  
    66. 
   
   
   
   
  66. function checkEmail(email){ 
    67. 
   
   
   
   
  67.    if(email==""){ 
    68. 
   
   
   
   
  68.       document.getElementById("emailErr").innerHTML = "<font color='red'>Email不能为空</font>";      
    69. 
   
   
   
   
  69.       form1.email.focus();           
    70. 
   
   
   
   
  70.       return false;          
    71. 
   
   
   
   
  71.    } 
    72. 
   
   
   
   
  72.    var reg=new RegExp("^[0-9a-zA-Z]+@[0-9a-zA-Z]+[\.]{1}[0-9a-zA-Z]+[\.]?[0-9a-zA-Z]+$"); 
    73. 
   
   
   
   
  73.    if(!reg.test(email)){ 
    74. 
   
   
   
   
  74.      document.getElementById("emailErr").innerHTML = "<font color='red'>E-MAIL格式输入不正确!</font>"; 
    75. 
   
   
   
   
  75.      form1.email.focus();                
    76. 
   
   
   
   
  76.      return false; 
    77. 
   
   
   
   
  77.    } 
    78. 
   
   
   
   
  78.          
    79. 
   
   
   
   
  79.     document.getElementById("emailErr").innerHTML = ""; 
    80. 
   
   
   
   
  80.     return true; 
    81. 
   
   
   
   
  81.  
    82. 
   
   
   
   
  82. }; 
    83. 
   
   
   
   
  83.  
    84. 
   
   
   
   
  84. function checkTel(tel){ 
    85. 
   
   
   
   
  85.      
    86. 
   
   
   
   
  86.     var i,j,strTemp; 
    87. 
   
   
   
   
  87.     strTemp="0123456789-()#"; 
    88. 
   
   
   
   
  88.     for(i=0;i<tel.length;i++){ 
    89. 
   
   
   
   
  89.       j=strTemp.indexOf(tel.charAt(i)); 
    90. 
   
   
   
   
  90.       if(j==-1){ 
    91. 
   
   
   
   
  91.         document.getElementById("telErr").innerHTML = "<font color='red'>Tel格式输入不正确!</font>"; 
    92. 
   
   
   
   
  92.         form1.tel.focus();   
    93. 
   
   
   
   
  93.         return false; 
    94. 
   
   
   
   
  94.       } 
    95. 
   
   
   
   
  95.     } 
    96. 
   
   
   
   
  96.     document.getElementById("telErr").innerHTML = ""; 
    97. 
   
   
   
   
  97.     return true; 
    98. 
   
   
   
   
  98. }; 
    99. 
   
   
   
   
  99.  
    100. 
   
   
   
   
  100. function checkForm(){ 
    101. 
   
   
   
   
  101.      
    102. 
   
   
   
   
  102.     if(document.form1.usernum.value.length == 0){ 
    103. 
   
   
   
   
  103.         document.getElementById("usernumErr").innerHTML = "<font color='red'>帐号不能为空</font>"; 
    104. 
   
   
   
   
  104.         form1.usernum.focus(); 
    105. 
   
   
   
   
  105.         return false; 
    106. 
   
   
   
   
  106.     } 
    107. 
   
   
   
   
  107.     if(document.form1.username.value.length == 0){ 
    108. 
   
   
   
   
  108.         document.getElementById("usernameErr").innerHTML = "<font color='red'>用户名不能为空</font>"; 
    109. 
   
   
   
   
  109.         form1.username.focus(); 
    110. 
   
   
   
   
  110.         return false; 
    111. 
   
   
   
   
  111.     } 
    112. 
   
   
   
   
  112.     if(document.form1.password.value.length == 0){ 
    113. 
   
   
   
   
  113.         document.getElementById("passwordErr").innerHTML = "<font color='red'>密码不能为空</font>"; 
    114. 
   
   
   
   
  114.         form1.password.focus(); 
    115. 
   
   
   
   
  115.         return false; 
    116. 
   
   
   
   
  116.     } 
    117. 
   
   
   
   
  117.     if( !(form1.sex[0].checked || form1.sex[1].checked) ){ 
    118. 
   
   
   
   
  118.         document.getElementById("sexErr").innerHTML = "<font color='red'>请选择性别</font>"; 
    119. 
   
   
   
   
  119.         form1.sex[0].focus(); 
    120. 
   
   
   
   
  120.         return false; 
    121. 
   
   
   
   
  121.     } 
    122. 
   
   
   
   
  122.     if(document.form1.email.value==""){ 
    123. 
   
   
   
   
  123.       document.getElementById("emailErr").innerHTML = "<font color='red'>Email不能为空</font>";      
    124. 
   
   
   
   
  124.       form1.email.focus();           
    125. 
   
   
   
   
  125.       return false;          
    126. 
   
   
   
   
  126.    } 
    127. 
   
   
   
   
  127.     document.getElementById("usernumErr").innerHTML = ""; 
    128. 
   
   
   
   
  128.     document.getElementById("usernameErr").innerHTML = ""; 
    129. 
   
   
   
   
  129.     document.getElementById("passwordErr").innerHTML = ""; 
    130. 
   
   
   
   
  130.     document.getElementById("sexErr").innerHTML = ""; 
    131. 
   
   
   
   
  131.     document.getElementById("emailErr").innerHTML = ""; 
    132. 
   
   
   
   
  132.     return true; 
    133. 
   
   
   
   
  133.  
    134. 
   
   
   
   
  134. }; 
    135. 
   
   
   
   
  135.  
    136. 
   
   
   
   
  136.  
    137. 
   
   
   
   
  137.  
    138. 
   
   
   
   
  138. </script> 
    139. 
   
   
   
   
  139. </head> 
    140. 
   
   
   
   
  140.  
    141. 
   
   
   
   
  141. <body> 
    142. 
   
   
   
   
  142.  
    143. 
   
   
   
   
  143. <form name="form1" action="#" method="post" onsubmit="return checkForm();" > 
    144. 
   
   
   
   
  144.  
    145. 
   
   
   
   
  145.   <table width="0" border="1"> 
    146. 
   
   
   
   
  146.     <tr> 
    147. 
   
   
   
   
  147.       <th scope="row">UserNumber:</th> 
    148. 
   
   
   
   
  148.       <td> 
    149. 
   
   
   
   
  149.        <input type="text" name="usernum" onblur="return checkUserNum(this.value);" /> 
    150. 
   
   
   
   
  150.        <span id="usernumErr"></span> 
    151. 
   
   
   
   
  151.       </td> 
    152. 
   
   
   
   
  152.     </tr> 
    153. 
   
   
   
   
  153.     <tr> 
    154. 
   
   
   
   
  154.       <th scope="row">UserName:</th> 
    155. 
   
   
   
   
  155.       <td>   
    156. 
   
   
   
   
  156.        <input type="text" name="username" onblur="return checkUserName(this.value);" /> 
    157. 
   
   
   
   
  157.        <span id="usernameErr"></span> 
    158. 
   
   
   
   
  158.       </td> 
    159. 
   
   
   
   
  159.     </tr> 
    160. 
   
   
   
   
  160.     <tr> 
    161. 
   
   
   
   
  161.       <th scope="row">PassWord:</th> 
    162. 
   
   
   
   
  162.       <td> 
    163. 
   
   
   
   
  163.        <input type="password" name="password" onblur="return checkPwd(this.value);" /> 
    164. 
   
   
   
   
  164.        <span id="passwordErr"></span> 
    165. 
   
   
   
   
  165.       </td> 
    166. 
   
   
   
   
  166.     </tr> 
    167. 
   
   
   
   
  167.     <tr> 
    168. 
   
   
   
   
  168.       <th scope="row">ConfirmPassword:</th> 
    169. 
   
   
   
   
  169.       <td> 
    170. 
   
   
   
   
  170.        <input type="password" name="password2" onblur="return confrimPwd(this.value);" /> 
    171. 
   
   
   
   
  171.        <span id="password2Err"></span> 
    172. 
   
   
   
   
  172.       </td> 
    173. 
   
   
   
   
  173.     </tr> 
    174. 
   
   
   
   
  174.     <tr> 
    175. 
   
   
   
   
  175.       <th scope="row">sex</th> 
    176. 
   
   
   
   
  176.       <td> 
    177. 
   
   
   
   
  177.       <input type="radio" name="sex" value="男" />男 
    178. 
   
   
   
   
  178.       <input type="radio" name="sex" value="女" />女 
    179. 
   
   
   
   
  179.       <span id="sexErr"></span> 
    180. 
   
   
   
   
  180.       </td> 
    181. 
   
   
   
   
  181.     </tr> 
    182. 
   
   
   
   
  182.      <tr> 
    183. 
   
   
   
   
  183.       <th scope="row">Email:</th> 
    184. 
   
   
   
   
  184.       <td> 
    185. 
   
   
   
   
  185.        <input type="text" name="email" onblur="return checkEmail(this.value);" /> 
    186. 
   
   
   
   
  186.        <span id="emailErr"></span> 
    187. 
   
   
   
   
  187.       </td> 
    188. 
   
   
   
   
  188.     </tr> 
    189. 
   
   
   
   
  189.      <tr> 
    190. 
   
   
   
   
  190.       <th scope="row">Tel:</th> 
    191. 
   
   
   
   
  191.       <td> 
    192. 
   
   
   
   
  192.        <input type="text" name="tel" onblur="return checkTel(this.value);" /> 
    193. 
   
   
   
   
  193.        <span id="telErr"></span> 
    194. 
   
   
   
   
  194.       </td> 
    195. 
   
   
   
   
  195.     </tr> <tr> 
    196. 
   
   
   
   
  196.       <th scope="row">&nbsp;</th> 
    197. 
   
   
   
   
  197.       <td>&nbsp;</td> 
    198. 
   
   
   
   
  198.     </tr> 
    199. 
   
   
   
   
  199.     <tr> 
    200. 
   
   
   
   
  200.       <th scope="row"><input type="submit" value="submit" /></th> 
    201. 
   
   
   
   
  201.       <td><input type="reset" value="reset" /></td> 
    202. 
   
   
   
   
  202.     </tr> 
    203. 
   
   
   
   
  203.   </table> 
    204. 
   
   
   
   
  204.  
    205. 
   
   
   
   
  205. </form> 
    206. 
   
   
   
   
  206. </body> 
    207. 
   
   
   
   
  207. </html> 
    208.

你可能感兴趣的:(JavaScript)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
    点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • 2019-05-29 vue-router的两种模式的区别 Kason晨
    1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
  • electron多标签页模式更像客户端 diygwcom electronjavascript前端
    Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
  • 外卖霸王餐返利外卖会员卡小程序开发 闹小艾 good506070微信小程序小程序
    外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账
  • Axure设计之全屏与退出全屏交互实现 招风的黑耳 Axureaxure交互
    在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure
  • 全面指南：用户行为从前端数据采集到实时处理的最佳实践 数字沉思 营销流量运营系统架构前端内容运营大数据
    引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信
  • EcmaScript和JavaScript的区别 每天吃八顿 前端ecmascript
    ECMAScript和JavaScript是经常被混淆的两个术语，但实际上它们之间存在一些区别：ECMAScript：ECMAScript（通常缩写为ES，并且有版本号如ES5,ES6和ES7等）是由ECMA国际（EuropeanComputerManufacturersAssociation）制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范，
  • javascript添加p元素，html添加文字，appendChild 游勇一 javascripthtml添加pappendChild
    javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}
  • CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制 SteveJi666 WebGLcesiumEarthSDKSuperMap3djavascript前端arcgis
    版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap
  • html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示 睿理
    html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格，可以填数的表格控件？首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以
  • 如何在 Python 中声明一个静态属性? 潮易 python开发语言
    在Python中，静态属性的定义和使用方式与JavaScript中的类似，主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问，它们属于类本身。###如何声明一个静态属性：1.首先，需要在属性名前添加`@staticmethod`装饰器。2.接下来，定义一个普通方法，该方法的第一个参数通常为`cls`（用于表示类的引用）。###代码示例：```pythoncla
  • 数据格式：什么是JSON和XML isNotNullX jsonxml
    JSON和XML都是数据交换的一种格式，用于在不同的系统和应用程序之间传输和存储数据。本文将解释JSON和XML的基础内容，并探讨两者的不同。一·什么是JSON？1.JSON（JavaScriptObjectNotation）即JavaScript对象标记法：-JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。-JSON基于JavaScript的一个子集，但JSON是
  • HighCharts图表自动化简介 知识的宝藏 Selenium高级篇Selenium图表自动化测试highcharts图表自动化Selenium图表自动化图表自动化测试highchartsSelenium
    什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互
  • java短路运算符和逻辑运算符的区别 3213213333332132 java基础
    /* * 逻辑运算符——不论是什么条件都要执行左右两边代码 * 短路运算符——我认为在底层就是利用物理电路的“并联”和“串联”实现的 * 原理很简单，并联电路代表短路或（||），串联电路代表短路与（&&）。 * * 并联电路两个开关只要有一个开关闭合，电路就会通。 * 类似于短路或（||），只要有其中一个为true（开关闭合）是
  • Java异常那些不得不说的事 白糖_ javaexception
    一、在finally块中做数据回收操作 比如数据库连接都是很宝贵的，所以最好在finally中关闭连接。 JDBCAgent jdbc = new JDBCAgent(); try{ jdbc.excute("select * from ctp_log"); }catch(SQLException e){ ... }finally{ jdbc.close();
  • utf-8与utf-8(无BOM)的区别 dcj3sjt126com PHP
    BOM——Byte Order Mark，就是字节序标记   在UCS 编码中有一个叫做"ZERO WIDTH NO-BREAK SPACE"的字符，它的编码是FEFF。而FFFE在UCS中是不存在的字符，所以不应该出现在实际传输中。UCS规范建议我们在传输字节流前，先传输 字符"ZERO WIDTH NO-BREAK SPACE"。这样如
  • JAVA Annotation之定义篇 周凡杨 java注解annotation入门注释
        Annotation: 译为注释或注解 An annotation, in the Java computer programming language, is a form of syntactic metadata that can be added to Java source code. Classes, methods, variables, pa
  • tomcat的多域名、虚拟主机配置 g21121 tomcat
    众所周知apache可以配置多域名和虚拟主机，而且配置起来比较简单，但是项目用到的是tomcat，配来配去总是不成功。查了些资料才总算可以，下面就跟大家分享下经验。 很多朋友搜索的内容基本是告诉我们这么配置： 在Engine标签下增面积Host标签，如下： <Host name="www.site1.com" appBase="webapps"
  • Linux SSH 错误解析（Capistrano 的cap 访问错误 Permission ） 510888780 linuxcapistrano
    1.ssh -v [email protected] 出现 Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password). 错误 运行状况如下： OpenSSH_5.3p1, OpenSSL 1.0.1e-fips 11 Feb 2013 debug1: Reading configuratio
  • log4j的用法 Harry642 javalog4j
    一、前言：     log4j 是一个开放源码项目，是广泛使用的以Java编写的日志记录包。由于log4j出色的表现，     当时在log4j完成时，log4j开发组织曾建议sun在jdk1.4中用log4j取代jdk1.4 的日志工具类，但当时jdk1.4已接近完成，所以sun拒绝使用log4j，当在java开发中
  • mysql、sqlserver、oracle分页，java分页统一接口实现 aijuans oraclejave
    定义：pageStart 起始页，pageEnd 终止页,pageSize页面容量 oracle分页： 　　　　select * from ( select mytable.*,rownum num from (实际传的SQL) where rownum<=pageEnd) where num>=pageStart sqlServer分页：  
  • Hessian 简单例子 antlove javaWebservicehessian
    hello.hessian.MyCar.java package hessian.pojo; import java.io.Serializable; public class MyCar implements Serializable { private static final long serialVersionUID = 473690540190845543
  • 数据库对象的同义词和序列 百合不是茶 sql序列同义词ORACLE权限
    回顾简单的数据库权限等命令; 解锁用户和锁定用户 alter user scott account lock/unlock; //system下查看系统中的用户 select * dba_users; //创建用户名和密码 create user wj identified by wj; identified by //授予连接权和建表权 grant connect to
  • 使用Powermock和mockito测试静态方法 bijian1013 持续集成单元测试mockitoPowermock
            实例： package com.bijian.study; import static org.junit.Assert.assertEquals; import java.io.IOException; import org.junit.Before; import org.junit.Test; import or
  • 精通Oracle10编程SQL(6)访问ORACLE bijian1013 oracle数据库plsql
    /* *访问ORACLE */ --检索单行数据 --使用标量变量接收数据 DECLARE v_ename emp.ename%TYPE; v_sal emp.sal%TYPE; BEGIN select ename,sal into v_ename,v_sal from emp where empno=&no; dbms_output.pu
  • 【Nginx四】Nginx作为HTTP负载均衡服务器 bit1129 nginx
     Nginx的另一个常用的功能是作为负载均衡服务器。一个典型的web应用系统，通过负载均衡服务器，可以使得应用有多台后端服务器来响应客户端的请求。一个应用配置多台后端服务器，可以带来很多好处：   负载均衡的好处 增加可用资源 增加吞吐量 加快响应速度，降低延时 出错的重试验机制 Nginx主要支持三种均衡算法： round-robin l
  • jquery-validation备忘 白糖_ jquerycssF#Firebug
    留点学习jquery validation总结的代码：   function checkForm(){ validator = $("#commentForm").validate({// #formId为需要进行验证的表单ID errorElement :"span",// 使用"div"标签标记错误， 默认:&
  • solr限制admin界面访问（端口限制和http授权限制） ronin47 限定Ip访问
    solr的管理界面可以帮助我们做很多事情，但是把solr程序放到公网之后就要限制对admin的访问了。 可以通过tomcat的http基本授权来做限制，也可以通过iptables防火墙来限制。 我们先看如何通过tomcat配置http授权限制。 第一步： 在tomcat的conf/tomcat-users.xml文件中添加管理用户，比如： <userusername="ad
  • 多线程-用JAVA写一个多线程程序，写四个线程，其中二个对一个变量加1，另外二个对一个变量减1 bylijinnan java多线程
    public class IncDecThread { private int j=10; /* * 题目:用JAVA写一个多线程程序，写四个线程，其中二个对一个变量加1，另外二个对一个变量减1 * 两个问题： * 1、线程同步--synchronized * 2、线程之间如何共享同一个j变量--内部类 */ public static
  • 买房历程 cfyme
        2015-06-21: 万科未来城，看房子   2015-06-26: 办理贷款手续，贷款73万，贷款利率5.65=5.3675   2015-06-27: 房子首付,签完合同   2015-06-28，央行宣布降息 0.25，就2天的时间差啊，没赶上。   首付，老婆找他的小姐妹接了5万，另外几个朋友借了1-
  • [军事与科技]制造大型太空战舰的前奏 comsci 制造
           天气热了........空调和电扇要准备好..........        最近,世界形势日趋复杂化,战争的阴影开始覆盖全世界..........        所以,我们不得不关
  • dateformat dai_lm DateFormat
    "Symbol Meaning Presentation Ex." "------ ------- ------------ ----" "G era designator (Text) AD" "y year
  • Hadoop如何实现关联计算 datamachine mapreducehadoop关联计算
        选择Hadoop，低成本和高扩展性是主要原因，但但它的开发效率实在无法让人满意。     以关联计算为例。     假设：HDFS上有2个文件，分别是客户信息和订单信息，customerID是它们之间的关联字段。如何进行关联计算，以便将客户名称添加到订单列表中？   &nbs
  • 用户模型中修改用户信息时，密码是如何处理的 dcj3sjt126com yii
    当我添加或修改用户记录的时候对于处理确认密码我遇到了一些麻烦，所有我想分享一下我是怎么处理的。 场景是使用的基本的那些(系统自带)，你需要有一个数据表(user)并且表中有一个密码字段(password),它使用 sha1、md5或其他加密方式加密用户密码。 面是它的工作流程: 当创建用户的时候密码需要加密并且保存，但当修改用户记录时如果使用同样的场景我们最终就会把用户加密过的密码再次加密，这
  • 中文 iOS/Mac 开发博客列表 dcj3sjt126com Blog
      本博客列表会不断更新维护，如果有推荐的博客，请到此处提交博客信息。 本博客列表涉及的文章内容支持 定制化Google搜索，特别感谢 JeOam 提供并帮助更新。 本博客列表也提供同步更新的OPML文件（下载OPML文件），可供导入到例如feedly等第三方定阅工具中，特别感谢 lcepy 提供自动转换脚本。这里有导入教程。
  • js去除空格，去除左右两端的空格 蕃薯耀 去除左右两端的空格js去掉所有空格js去除空格
    js去除空格，去除左右两端的空格 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>&g
  • SpringMVC4零配置--web.xml hanqunfeng springmvc4
    servlet3.0+规范后，允许servlet，filter，listener不必声明在web.xml中，而是以硬编码的方式存在，实现容器的零配置。 ServletContainerInitializer：启动容器时负责加载相关配置 package javax.servlet; import java.util.Set; public interface ServletContainer
  • 《开源框架那些事儿21》：巧借力与借巧力 j2eetop 框架UI
    同样做前端UI，为什么有人花了一点力气，就可以做好？而有的人费尽全力，仍然错误百出？我们可以先看看几个故事。 故事1：巧借力，乌鸦也可以吃核桃 有一个盛产核桃的村子，每年秋末冬初，成群的乌鸦总会来到这里，到果园里捡拾那些被果农们遗落的核桃。 核桃仁虽然美味，但是外壳那么坚硬，乌鸦怎么才能吃到呢？原来乌鸦先把核桃叼起，然后飞到高高的树枝上，再将核桃摔下去，核桃落到坚硬的地面上，被撞破了，于是，
  • JQuery EasyUI 验证扩展 可怜的猫 jqueryeasyui验证
      最近项目中用到了前端框架-- EasyUI，在做校验的时候会涉及到很多需要自定义的内容，现把常用的验证方式总结出来，留待后用。   以下内容只需要在公用js中添加即可。   使用类似于如下： <input class="easyui-textbox" name="mobile" id="mobile&
  • 架构师之httpurlconnection----------读取和发送(流读取效率通用类) nannan408
    1.前言.    如题. 2.代码. /* * Copyright (c) 2015, S.F. Express Inc. All rights reserved. */ package com.test.test.test.send; import java.io.IOException; import java.io.InputStream
  • Jquery性能优化 r361251 JavaScriptjquery
    一、注意定义jQuery变量的时候添加var关键字 这个不仅仅是jQuery，所有javascript开发过程中，都需要注意，请一定不要定义成如下： $loading = $('#loading'); //这个是全局定义，不知道哪里位置倒霉引用了相同的变量名，就会郁闷至死的 二、请使用一个var来定义变量 如果你使用多个变量的话，请如下方式定义： . 代码如下: var page
  • 在eclipse项目中使用maven管理依赖 tjj006 eclipsemaven
    概览: 如何导入maven项目至eclipse中 建立自有Maven  Java类库服务器 建立符合maven代码库标准的自定义类库 Maven在管理Java类库方面有巨大的优势，像白衣所说就是非常“环保”。 我们平时用IDE开发都是把所需要的类库一股脑的全丢到项目目录下，然后全部添加到ide的构建路径中，如果用了SVN/CVS，这样会很容易就 把
  • 中国天气网省市级联页面 x125858805 级联
    1、页面及级联js <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> &l
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他