HTML表单验证(含用户名，密码，邮箱，手机号，验证码)

前几天对表单注册有点感兴趣，于是在课余时间了解了一些注册表单的验证方法，自己也试着做了一个表单的验证(前端验证)，很low，各位童鞋应该都看得懂，话不多说，上代码

<html lang="en">
<head><meta charset="UTF-8"><title>注册页面</title><style>body {background: url("img/register.png") no-repeat fixed 0 0;margin: 0 auto;background-size: cover;width: 100%;}.para{font-size: 14px;font-weight: lighter;text-align: center;}.rg_layout {width: 900px;height:1000px;border: 8px solid #EEEEEE;background-color: white;margin: auto;}        .rg_left {float: left;margin: 15px;}.rg_center {float: left;}.rg_right {float: right;margin: 15px;}.rg_left > p:first-child {color:#AAD026;font-size: 20px;}.rg_left > p:last-child {color:#A6A6A6;font-size: 20px;}.rg_right > p:first-child {font-size: 15px;}.rg_right p a {color:pink;}.td_left {width: 100px;height: 45px;text-align: right;}.td_right {padding-left: 50px ;}.box{position: relative;padding-left: 0 ;}.box img{position: absolute;right: 5px;top:2px;width: 24px;height: 24px;}#username, #password, #password2, #email, #name,#address, #telphone, #birthday, #checkcode {width: 251px;height: 32px;border: 1px solid #A6A6A6;border-radius: 5px;padding-left: 10px;}#checkcode {width: 110px;}       #img_check {height: 32px;vertical-align: middle;}#btn_sub {width: 150px;height: 40px;background-color: #FFDF26;border: 1px solid #FFD026 ;border-radius: 12px;cursor: pointer;}#btn_subs {width: 150px;height: 40px;background-color: #FFD026;border: 1px solid #FFD026 ;border-radius: 12px;cursor: pointer;}              .error {color:red;}#td_sub {padding-left: 150px;}</style><script>// js正则验证相关字符的意义// 1.  /^$/ 这个是个通用的格式。// ^ 匹配输入字符串的开始位置；$匹配输入字符串的结束位置// 2. 里面输入需要实现的功能。// * 匹配前面的子表达式零次或多次；// + 匹配前面的子表达式一次或多次；// ？匹配前面的子表达式零次或一次；// \d  匹配一个数字字符，等价于[0-9]window.onload = function(){document.getElementById("form").onsubmit = function(){return checkUsername() && checkPassword() && checkPassword2() && mailbox() && checkMobilePhone() && imgCode();};document.getElementById("username").onblur = checkUsername;document.getElementById("password").onblur = checkPassword;document.getElementById("password2").onblur = checkPassword2;document.getElementById("email").onblur = mailbox; document.getElementById("telphone").onblur = checkMobilePhone; document.getElementById("checkcode").onblur = imgCode; }            function checkUsername(){//固定六位到十位字符用户名包含大小写字母与数字的组合var username = document.getElementById("username").value;var reg_username =/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;var flag = reg_username.test(username);var s_username = document.getElementById("s_username");if(flag){s_username.innerHTML = "<img width='35' height='25' src='img/right.png'/>";return true;}else{s_username.innerHTML = "用户名格式有误";return false;}}function checkPassword(){//固定六位到十位字符密码包含大小写字母与数字的组合，当然你也可以改变正则方式，详情可见https://www.jb51.net/article/115170.htmvar password = document.getElementById("password").value;var reg_password = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;var flag = reg_password.test(password);var s_password = document.getElementById("s_password");if(flag){s_password.innerHTML = "<img width='35' height='25' src='img/right.png'/>";return true;}else{s_password.innerHTML = "密码格式有误";return false;}}function checkPassword2(){//与上步的password正则验证一样，加了个密码一致的匹配var password2 = document.getElementById("password2").value;var reg_password2 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/;var flag = reg_password2.test(password2);var s_password2 = document.getElementById("s_password2");if(flag && password2 == document.getElementById("password").value){s_password2.innerHTML = "<img width='35' height='25' src='img/right.png'/>";return true;}else{s_password2.innerHTML = "密码格式不一致";return false;}}function mailbox(){//定义正则表达式的变量:邮箱正则邮箱地址 必须由 大小写字母 或 数字 或下划线开头，其后可以跟上任意的 \w字符 和 中划线 加号 英文句号 @ 跟上任意的 \w字符 和 中划线(-) 加号 英文句号(.)var email =document.getElementById("email").value; var emailReg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;var flag = emailReg.test(email);var test_email = document.getElementById("test_email");if(flag){test_email.innerHTML = "<img width='35' height='25' src='img/right.png'/>";return true;}else{test_email.innerHTML = "邮箱格式有误";return false;}}   function checkMobilePhone() {//定义正则表达式的变量:1.手机号正则，/^[1][3,4,5,6,7,8,9][0-9]{9}$/ //2.电话号码正则：/^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$///手机号正则表达式的意思是：以1为开头,第二位可为3,4,5,6,7,8,9,中的任意一位,最后以0-9的9个整数结尾。//电话号码正则,你懂的就是区号加后面几位用户号码var telphone = document.getElementById("telphone").value; var phoneReg= /^[1][3,4,5,6,7,8,9][0-9]{9}$/;var flag = phoneReg.test(telphone);var mobile_input = document.getElementById("mobile_input");if(flag){mobile_input.innerHTML = "<img width='35' height='25' src='img/right.png'/>";return true;}else{mobile_input.innerHTML = "电话号码格式有误";return false;}}   function imgCode(){//为了偷懒，写了个固定的验证码，验证码可以是动态改变，也可以静态更换，静态的利用js，用一个数组将验证码图片存起来//当用户点击更换验证码图片时，触发onclick事件更新验证码，用户可输入不同的验证码进行登录，但这样账号的安全性极其//的低(毕竟是前端验证												


											

HTML表单验证(含用户名，密码，邮箱，手机号，验证码-验证)相关推荐
	

    
								
  1. 用javascript写一个简单的登录表单，包含用户名、密码和手机号码。提交数据时验证用户名、密码和手机号输入格式。
		
    题目:写一个用于登录的表单,包含用户名.密码和手机号码.提交数据的时候,要求验证: 1. 用户名必须输入汉字: 2. 密码总共6位,前2位为字母,后4位为数字: 3. 手机号码符合中国大陆手机号码格式 ...
    
		
    2. 
						
  2. Html利用函数输入学生的性别,JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)...
		
    JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证) 发布时间:2020-10-08 04:15:08 来源:脚本之家 阅读:73 作者:水山奇 问题:表单怎么在输入后 ...
    
		
    3. 
						
  3. Vue 正则表达式验证表单字段(如用户名/密码/真实姓名/身份证/手机号/邮箱)的合法性
		
    1. 给页面表单对象添加验证属性 由于我的项目使用的el-form,则给el-form添加属性  :rules="registerRules" ref="register ...
    
		
    4. 
						
  4. vue+Element表单验证+数字英文密码和手机号验证（详细）
		
    项目开发时需要用到表单验证,密码验证和手机验证都是使用正则表达式,特此记录一下. 1.表单图 2.代码 <template><!-- 结构 --> //就是你要输入的名称< ...
    
		
    5. 
						
  5. javascript正则检测用户名验证密码邮箱手机号
		
    正则验证用户名密码手机号邮箱 html <body><!--账号--><form><div> 请输入账号:<input type="te ...
    
		
    6. 
						
  6. html自动识别密码,HTML登录表单：提供用户名,自动填写密码
		
    这种行为通常由浏览器定义.但是,您可以采取一些措施来改善此行为. 确保为表单使用描述性名称 Username Password 使用这些名称可以真正发挥作用.我例如使用Opera浏览器,在我的设置中, ...
    
		
    7. 
						
  7. java验证码验证码_Java登录页面实时验证用户名密码和动态验证码
		
    ●登录名和密码是同时验证的,并不是先验证登录名是否存在,然后再验证密码是否正确,是同时进行验证,若登录名和密码当中一个条件不符合,则提示用户登录名或者密码错误, 这样做的意义是为了保证用户信息的安全( ...
    
		
    8. 
						
  8. Java登录页面实时验证用户名密码和动态验证码
		
    ●登录名和密码是同时验证的,并不是先验证登录名是否存在,然后再验证密码是否正确,是同时进行验证,若登录名和密码当中一个条件不符合,则提示用户登录名或者密码错误, 这样做的意义是为了保证用户信息的安全( ...
    
		
    9. 
						
  9. html表单用户名,10、 编写HTML注册表单, 需要字段: 用户名,
		
    2013-01-07 回答 //html文档如下,其实还能更简洁,请采纳 HTML注册表单 function sub(){ var f = document.form1;//取form对象 var u ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. 发现一款3D 打印的pcDuino外壳
		
    2. 
						
  2. ZOJ 2770 Burn the Linked Camp 差分约束+SPFA
		
    3. 
						
  3. 怎么在搭建Android开发环境？
		
    4. 
						
  4. c语言取奇数位构成新数,2、给定程序MODI1.C中函数fun的功能是：从低位开始取出长整型变量s中奇数位上的数,依次构成一个新数放在t中.高位...
		
    5. 
						
  5. 全国计算机二级office基础知识,全国计算机二级office考试内容
		
    6. 
						
  6. linux查看java虚拟机内存_深入理解java虚拟机(linux与jvm内存关系)
		
    7. 
						
  7. jodd忽略ssl证书_关于java访问https资源时,忽略证书信任问题
		
    8. 
						
  8. 简述与oracle相关的程序组,北语网院18秋《Oracle数据库开发》作业_4答案
		
    9. 
						
  9. 1.1为什么选择序列模型
		
    10. 
						
  10. 增值税发票的种类_以及税率---财务知识工作笔记001
		
    11. 
						
  11. 看咒语，知情节？他们用《哈利·波特》让AI学习剧透
		
    12. 
						
  12. 美图为什么布局AR增强现实？
		
    13. 
						
  13. 菜鸟教程ajax概念原理及使用
		
    14. 
						
  14. High-Sierra，MacOS10.13，增加IntelHD3000显存的方法_php_sir_新浪博客
		
    15. 
						
  15. Flink中水位线/Periodic周期水印/Punctuated每个事件水印实现原理/ PunctuatedWatermarks/PeriodicWatermarks
		
    16. 
						
  16. 【GNN报告】Mila实验室/蒙特利尔大学朱兆成：基于图神经网络的知识图谱推理
		
    17. 
						
  17. 【超长序列建模】美团CIKM‘22：《Sampling Is All You Need on Modeling Long-Term User Behaviors for CTR Prediction》
		
    18. 
						
  18. linux提权参考方法
		
    19. 
						
  19. 1、电子负载如何用来给电池放电
		
    20. 
						
  20. 内存管理（四）SGI STL 空间配置器
		
    21. 
		

	


热门文章
	

    
									
  1. Cisco 动态路由（RIP协议）设计(含.pkt文件） 计算机网络课设/实验
			
    2. 
						
  2. 指令系统——CISC和RISC
			
    3. 
						
  3. 一、分布式关系型数据库 DRDS介绍
			
    4. 
						
  4. Linux vim 纵向编辑
			
    5. 
						
  5. 第十二节：按住一个独立按键不松手的连续步进触发
			
    6. 
						
  6. 【视频分享】Java Spring 经典入门基础教程详解
			
    7. 
						
  7. 多校训练2 F Girlfriend 数论（球冠）
			
    8. 
						
  8. 华为鸿蒙系统英语报纸_华为鸿蒙系统报名方法
			
    9. 
						
  9. 如何绘制甘特图？这些软件来帮你
			
    10. 
						
  10. 一份来自数据森麟的2018年终总结
			
    11.