用javascript写的表单验证

简介:

用javascript写的表单验证,可以用网站的前后台的登陆,大家可以给提点意见。这是以前做项目的时候写的

 

 
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>验证表单</title> 
  6. <script language="JavaScript"> 
  7. function check(){  
  8. var user = document.getElementById("username").value;  
  9. var pass = document.getElementById("pass").value;  
  10. var rpass = document.getElementById("rpass").value;  
  11. var cardnum = document.getElementById("cardnum").value;  
  12. var email = document.getElementById("email").value;  
  13.  
  14. //用户名只能由字母、数字、下划线组成,其它字符一律过滤,这样也确保了安全性,  
  15. //正则表达式的意思是,当输入0-9、a-z、A-Z、_以外的任何一个或者多个字符时则提示错误  
  16. if (user.match("([^a-zA-Z0-9_]+)") != null || user.length < 3 || user.length > 15) {  
  17. alert("您输入的用户名应由字母数字下划线组成,长度在3~15位之间!");  
  18. return false;  
  19. }  
  20. else   
  21. if ((pass.length > 20 || pass.length < 6) || (pass == user)) {  
  22. alert("您的密码长度过短或者密码与姓名相同,请重新输入!");  
  23. return false;  
  24. }  
  25. else   
  26. if (pass != rpass) {  
  27. alert("您两次输入的密码不一致!");  
  28. return false;  
  29. }  
  30. else   
  31. //身份证号用于匹配两种模式,一种是15位的,一种是18位的  
  32. //这个正则表达式分三部分:第一位必须为1,最后一位可以是x、X、0-9中的任意一位  
  33. //中间一块是指匹配13或者16位数字  
  34. if (cardnum.match("1\\d{16}[0-9xX]+|1\\d{13}[0-9xX]+") == null) {  
  35. alert("您的身份证号码不正确,请重新输入!");  
  36. return false;  
  37. }  
  38. else   
  39. //正则表达式匹配a-zA-Z0-9_中的一位或者多位,而且必须要有@.这是一个email必须的  
  40. if (email.match("[a-zA-Z0-9_]*@.") == null) {  
  41. alert("您输入的E-Mail不正确,请重新输入!");  
  42. return false;  
  43. }  
  44. else {  
  45. alert("登陆成功!");  
  46. }  
  47. }  
  48. </script> 
  49. </head> 
  50. <body> 
  51. <form action="ff.html" method="get" onsubmit="return check();"> 
  52. 用户名:<input id="username" type="text" name="username"/><p/>密 码: <input id="pass" type="password" name="password"/><p/>重新输入密码:<input id="rpass" type="password"/><p/>身份证号码:<input id="cardnum" type="text"/><p/>E-Mail:<input id="email" type="text"/> 
  53. <br/> 
  54. <br/> 
  55. <input type="submit" value="提交" /><input type="reset" value="重置"/> 
  56. </form> 
  57. </body> 
  58. </html> 

 


本文转自sucre03 51CTO博客,原文链接:http://blog.51cto.com/sucre/380692,如需转载请自行联系原作者

相关文章
|
6月前
|
移动开发 运维 供应链
通过array.some()实现权限检查、表单验证、库存管理、内容审查和数据处理;js数组元素检查的方法,some()的使用详解,array.some与array.every的区别(附实际应用代码)
array.some()可以用来权限检查、表单验证、库存管理、内容审查和数据处理等数据校验工作,核心在于利用其短路机制,速度更快,节约性能。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
ractive.js联系表单动画效果源码
一款ractive.js联系表单动画效果,很有创意的发送邮件、联系内容等表单,基于ractive.js实现的动画效果,以发送信件的方式。
92 1
|
10月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
166 3
|
11月前
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
175 4
|
11月前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
|
JavaScript 前端开发
JavaScript 表单验证
JavaScript 表单验证
48 9
|
移动开发 前端开发 JavaScript
JavaScript 表单
JavaScript 表单
61 9
|
12月前
|
移动开发 JavaScript 前端开发
js之操作表单 | 12-4
js之操作表单 | 12-4
|
前端开发 微服务 API
微服务浪潮下的JSF革新:如何在分散式架构中构建统一而强大的Web界面
【8月更文挑战第31天】随着微服务架构的兴起,企业将应用拆分成小型、独立的服务以提高系统可维护性和可扩展性。本文探讨如何在微服务架构下构建和部署JavaServer Faces (JSF) 应用,通过RESTful服务实现前后端分离,提升灵活性和适应性。
144 1
|
12月前
|
JavaScript 前端开发
js登录注册简单tab切换页面(含前台表单验证)
文章介绍了如何使用HTML、CSS和JavaScript创建一个简单的登录注册页面,并实现Tab切换效果。包括了表单验证,点击登录或注册按钮时,可以切换显示相应的表单。同时提供了完整的前端代码和实现效果图。