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.htm
var 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">
<!-- onblur监听用户输入的值 -->
<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的正则校验，再此给个示例，有需要用到的童鞋可以自取
var nickname_target = $(".wrap_account_set input[name=nickname]");
var nickname = nickname_target.val();
var mobile_target = $(".wrap_account_set input[name=mobile]");
var mobile = mobile_target.val();
var email_target = $(".wrap_account_set input[name=email]");
var email = email_target.val();
var login_name_target = $(".wrap_account_set input[name=login_name]");
var login_name = login_name_target.val();
var login_pwd_target = $(".wrap_account_set input[name=login_pwd]");
var login_pwd = login_pwd_target.val();
var name = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{4,8}$/;//4-8位登陆用户名的校验(英文可包含数字)
var phone = /^(?:\+?86)?1\d{10}$/ //11位手机号的校验
var eml = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/ //邮箱的校验
var pwd = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,12}$/ //8-12位登录密码，包含数字特殊字符，大小写的校验
if( !name.exec(nickname) ){
common_ops.tip( "请输入符合规范的姓名~~",nickname_target );
return false;
}
if( !phone.exec(mobile)){
common_ops.tip( "请输入符合规范的手机号码~~",mobile_target );
return false;
}
if( !eml.exec(email)){
common_ops.tip( "请输入符合规范的邮箱~~",email_target );
return false;
}
if( !name.exec(login_name)){
common_ops.tip( "请输入符合规范的登录用户名~~",login_name_target );
return false;
}
if( !pwd.exec(login_pwd)){
common_ops.tip( "请输入符合规范的登录密码~~",login_pwd_target );
return false;
}
js 验证部分的内容解释都写在了注释里，各位童鞋可自行了解，如果想了解更多的验证方法，可以点击这里验证1还有这个验证2，这些都是我自己找的😂😂😂
效果图看这：
没有用户输入之前
获取用户输入之后
数据提交结果
表单注册所用到的图片文件（注意要放对文件路径）
对的提示：
验证码：
- 个人感悟： 感觉前端验证的安全性非常的低，虽然我用的验证方法非常的low（有比较高级的验证方法）,普通的正则，再加上几个if,else语句就搞定了，会一点点技术的童鞋都可以直接绕过或者直接改验证源码，大佬可能会说（正经人谁搞前端验证啊…），哈哈哈哈哈，唉，菜鸡落泪😥😥😥😥！学习这些验证方法其实还是让我收获了很多东西的，比如说有哪些验证类型，以及如何破解这些验证，同样也拓宽了我的学习视野（学的东西还是太狭隘了，有些东西还是要有一定的了解的，比如说前后端…）
- 我将js代码和css代码分开放置在各自的文件夹中，需要下载该测试内容的童鞋可以点击下方链接
百度网盘源码下载
- 总结：学习终究还是要有恒心，不能三天打鱼两天晒网，终究还是浪费了太多时间，唉，自律打卡第一天，学习！学习！学习！
- 搞点轻松点的好东西😉😉😉
199
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
