HTML表单验证(含用户名，密码，邮箱，手机号，验证码 |
您所在的位置：网站首页 › html注册表单小结 › HTML表单验证(含用户名，密码，邮箱，手机号，验证码 |
HTML表单验证(含用户名，密码，邮箱，手机号，验证码
HTML表单验证(含用户名，密码，邮箱，手机号，验证码)
前几天对表单注册有点感兴趣，于是在课余时间了解了一些注册表单的验证方法，自己也试着做了一个表单的验证(前端验证)，很low，各位童鞋应该都看得懂，话不多说，上代码
注册页面
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;
}
// 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 = " ";
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 = "";
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 = "";
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 = "";
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 = "";
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 = "";
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;
}
}
USER REGISTER 新用户注册 用户名 密码
请确认密码
电子邮箱
ID-代号
手机号
性别
男
女
出生日期
喜欢的游戏
治愈
射击
塔防
住址
个人简介
你的座右铭
验证码
已有账号?;;;;;;立即登录 //获取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; } }关于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，这些都是我自己找的😂😂😂 效果图看这： 没有用户输入之前
  
|
【本文地址】
今日新闻 |
推荐新闻 |