100字范文 > HTML表单验证(含用户名密码邮箱手机号验证码-验证)

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

时间：2019-11-08 10:43:32

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(){//固定六位到十位字符密码包含大小写字母与数字的组合，当然你也可以改变正则方式，详情可见/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事件更新验证码，用户可输入不同的验证码进行登录，但这样账号的安全性极其//的低(毕竟是前端验证🤣🤣🤣)var get_img=document.getElementById("checkcode").value;if(get_img== "7427"){code_input.innerHTML = "<img width='35' height='25' src='img/right.png'/>";return true;}else {code_input.innerHTML = "验证码输入有误，请重新输入";return false;}}function checkform(){//表单总确认if(checkUsername() && checkPassword () && checkPassword2() && mailbox() && checkMobilePhone() && imgCode()==true){window.alert("恭喜您！注册成功");return true;}else{window.alert("请您核对一下您的注册信息是否有误");return false;}}</script></head><body><div class="rg_layout"><div class="rg_left"><p>USER REGISTER</p><p>新用户注册</p></div><div class="rg_center"><div class="rg_form"><form action="#" id="form" method="post" οnsubmit="return true"><table><tr><td class="td_left"><label for="username">用户名</label></td><td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名" οnblur="checkUsername(this.value)"><span id="s_username" class="error"></span></td></tr><tr><td class="td_left"><label for="password">密码</label></td><td class="td_right"><span class="box"><input type="password" name="password" id="password" placeholder="请输入密码" ><label for="password"><img src="img/close.png" alt="" id= "eye1"></label></span><span id="s_password" class="error"></span></td></tr><tr><td class="td_left"><label for="password2">请确认密码</label></td><td class="td_right"><span class="box"><input type="password" name="password2" id="password2" placeholder="请再次输入密码" ><label for="password2"><img src="img/close.png" alt="" id= "eye2"></label></span><span id="s_password2" class="error"></span></td></tr><tr><td class="td_left"><label for="email">电子邮箱</label></td><td class="td_right"><input type="text" name="email" id="email" placeholder="请输入邮箱"><span id="test_email" class="error"></span></td></tr><tr><td class="td_left"><label for="name">ID-代号</label></td><td class="td_right"><input type="text" name="name" id="name" placeholder="请输入ID"></td></tr><tr><td class="td_left"><label for="telphone">手机号</label></td><td class="td_right"><input type="text" name="telphone" id="telphone" placeholder="请输入手机号" ><span class="error" id="mobile_input"></td></tr><tr><td class="td_left"><label>性别</label></td><td class="td_right"><input type="radio" name="gender" value="male" checked> 男<input type="radio" name="gender" value="female"> 女</td></tr><tr><td class="td_left"><label for="birthday">出生日期</label></td><td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td></tr><tr><td class="td_left">喜欢的游戏</td><td class="td_right"><select style="width:86%"><option>治愈</option><option>射击</option><option>塔防</option></select></td></tr><tr><td class="td_left"><label for="address">住址</label></td><td class="td_right"><input type="text" name="address" id="address" placeholder="address"></td></tr><tr><td class="td_left"><label >个人简介</label></td><td class="td_right"><textarea rows="7" cols="50" style="resize:none" name="comment" ></textarea></td></tr><tr><td class="td_left"><label>你的座右铭</label></td><td class="td_right"><textarea rows="7" cols="50" name="comment" style="resize:none" ></textarea> </td></tr><tr><td class="td_left"><label for="checkcode" >验证码</label></td><td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码" ><img id="img_check" src="img/code.png"><span class="error" id="code_input"></td></tr><tr><td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册" οnclick="checkform();"> <input type="reset" id="btn_subs" value="重置"></td></tr></table></form><p class="para">已有账号?      <a href="#">立即登录</a></p></div></div></div><script>//获取ID内容var eye1 = document.getElementById('eye1');var password = document.getElementById('password');var flag1 = 0;//触发点击事件处理程序eye1.onclick = function(){//点击一次后 flag一定要变化if (flag1 == 0){password.type = 'text';eye1.src='img/open.png';flag1 = 1;}else{password.type = 'password';eye1.src='img/close.png';flag1 = 0;}}var eye2 = document.getElementById('eye2');var password2 = document.getElementById('password2');var flag2 = 0;//点击触发事件处理程序eye2.onclick = function(){//点击一次后 flag一定要变化if (flag2 == 0){password2.type = 'text';eye2.src='img/open.png';flag2 = 1;}else{password2.type = 'password';eye2.src='img/close.png';flag2 = 0;}}</script></body></html>

js 验证部分的内容解释都写在了注释里，各位童鞋可自行了解，如果想了解更多的验证方法，可以点击这里验证1还有这个验证2，这些都是我自己找的😂😂😂

效果图看这：

没有用户输入之前

获取用户输入之后

数据提交结果

表单注册所用到的图片文件（注意要放对文件路径）

对的提示：

验证码：

个人感悟：感觉前端验证的安全性非常的低，虽然我用的验证方法非常的low（有比较高级的验证方法）,普通的正则，再加上几个if,else语句就搞定了，会一点点技术的童鞋都可以直接绕过或者直接改验证源码，大佬可能会说（正经人谁搞前端验证啊…），哈哈哈哈哈，唉，菜鸡落泪😥😥😥😥！学习这些验证方法其实还是让我收获了很多东西的，比如说有哪些验证类型，以及如何破解这些验证，同样也拓宽了我的学习视野（学的东西还是太狭隘了，有些东西还是要有一定的了解的，比如说前后端…）我将js代码和css代码分开放置在各自的文件夹中，需要下载该测试内容的童鞋可以点击下方链接