JavaScript 登录注册表单验证

1. 验证用户名是否符合规则（idea2021 CTRL+R 修改替换）
1.1 获取用户名的输入框

1.2 绑定onblur事件》》》当元素失去焦点时发生此事件

1.3 获取用户在username输入框中输入的信息，排除掉空白字符

1.4 判断username的值是否符合规则

2. 验证密码是否符合规则（idea2021 CTRL+R 修改替换）
2.1 获取密码的输入框

2.2 绑定onblur事件》》》当元素失去焦点时发生此事件

2.3 获取用户在password输入框中输入的信息，排除掉空白字符
2.4 判断password的值是否符合规则

3. 验证手机号是否符合规则（idea2021 CTRL+R 修改替换）
3.1 获取手机号的输入框

3.2 绑定onblur事件》》》当元素失去焦点时发生此事件

3.3 获取用户在tel输入框中输入的信息，排除掉空白字符

3.4 判断tel的值是否符合规则

4.form表单的提交
4.1获取表单的对象

4.2为表单对象绑定onsubmit

html文件代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>欢迎注册</title><link href="css/register.css" rel="stylesheet">
</head>
<body><div class="form-div"><div class="reg-content"><h1>欢迎注册</h1><span>已有帐号？</span> <a href="#">登录</a></div><form id="reg-form" action="#" method="get"><table><tr><td>用户名</td><td class="inputs"><input name="username" type="text" id="username"><br><!--这里是被隐藏的提示信息--><span id="username_err" class="err_msg" style="display:none">用户名不合乎规则</span></td></tr><tr><td>密码</td><td class="inputs"><input name="password" type="password" id="password"><br><!--这里是被隐藏的提示信息--><span id="password_err" class="err_msg" style="display: none">密码格式有误</span></td></tr><tr><td>手机号</td><td class="inputs"><input name="tel" type="text" id="tel"><br><!--这里是被隐藏的提示信息--><span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span></td></tr></table><div class="buttons"><input value="注 册" type="submit" id="reg_btn"></div><br class="clear"></form></div>
</body>
</html>

JavaScript文件代码（HTML文件中没有引用，自己引用就好了）

<script>//1. 验证用户名是否符合规则//1.1 获取用户名的输入框var  username = document.getElementById("username");//1.2 绑定onblur事件  》》》 当元素失去焦点时发生此事件username.onblur =judgeUserName;function judgeUserName(){//1.3 获取用户在username输入框中输入的信息，排除掉空白字符var usernameValue = username.value.trim();//1.4 判断username的值是否符合规则var  flag = usernameValue.length>=6&&usernameValue.length<=12;if (flag){document.getElementById("username_err").style.display="none";}else{document.getElementById("username_err").style.display="";}return flag;}//2. 验证密码是否符合规则（CTRL+R 修改替换）//2.1 获取密码的输入框var  password = document.getElementById("password");//2.2 绑定onblur事件  》》》 当元素失去焦点时发生此事件password.onblur =judgePassword;function judgePassword(){//2.3 获取用户在password输入框中输入的信息，排除掉空白字符var passwordValue = password.value.trim();//2.4 判断password的值是否符合规则var flag = passwordValue.length>=6&&passwordValue.length<=12;if (flag){document.getElementById("password_err").style.display="none";}else{document.getElementById("password_err").style.display="";}return flag;}//3. 验证手机号是否符合规则//3.1 获取手机号的输入框var  tel = document.getElementById("tel");//3.2 绑定onblur事件  》》》 当元素失去焦点时发生此事件tel.onblur =judgeTel;function judgeTel(){//3.3 获取用户在tel输入框中输入的信息，排除掉空白字符var telValue = tel.value.trim();//3.4 判断tel的值是否符合规则var flag = telValue.length ==11 ;if (flag){document.getElementById("tel_err").style.display="none";}else{document.getElementById("tel_err").style.display="";}return flag;}//4.form表单的提交//4.1获取表单的对象var regForm = document.getElementById("reg-form");//4.2为表单对象绑定onsubmitregForm.onsubmit = function (){var flag = judgeUserName()&&judgePassword()&&judgeTel();if (flag){return true;}else {return false;}}
</script>

css文件代码

* {margin: 0;padding: 0;list-style-type: none;
}
.reg-content{padding: 30px;margin: 3px;
}
a, img {border: 0;
}body {background-image: url("imgs/reg_bg_min.jpg") ;text-align: center;
}table {border-collapse: collapse;border-spacing: 0;
}td, th {padding: 0;height: 90px;}
.inputs{vertical-align: top;
}.clear {clear: both;
}.clear:before, .clear:after {content: "";display: table;
}.clear:after {clear: both;
}.form-div {background-color: rgba(255, 255, 255, 0.27);border-radius: 10px;border: 1px solid #aaa;width: 424px;margin-top: 150px;margin-left:1050px;padding: 30px 0 20px 0px;font-size: 16px;box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3);text-align: left;
}.form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] {width: 268px;margin: 10px;line-height: 20px;font-size: 16px;
}.form-div input[type="checkbox"] {margin: 20px 0 20px 10px;
}.form-div input[type="button"], .form-div input[type="submit"] {margin: 10px 20px 0 0;
}.form-div table {margin: 0 auto;text-align: right;color: rgba(64, 64, 64, 1.00);
}.form-div table img {vertical-align: middle;margin: 0 0 5px 0;
}.footer {color: rgba(64, 64, 64, 1.00);font-size: 12px;margin-top: 30px;
}.form-div .buttons {float: right;
}input[type="text"], input[type="password"], input[type="email"] {border-radius: 8px;box-shadow: inset 0 2px 5px #eee;padding: 10px;border: 1px solid #D4D4D4;color: #333333;margin-top: 5px;
}input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus {border: 1px solid #50afeb;outline: none;
}input[type="button"], input[type="submit"] {padding: 7px 15px;background-color: #3c6db0;text-align: center;border-radius: 5px;overflow: hidden;min-width: 80px;border: none;color: #FFF;box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3);
}input[type="button"]:hover, input[type="submit"]:hover {background-color: #5a88c8;
}input[type="button"]:active, input[type="submit"]:active {background-color: #5a88c8;
}
.err_msg{color: red;padding-right: 170px;
}
#password_err,#tel_err{padding-right: 195px;
}#reg_btn{margin-right:50px; width: 285px; height: 45px; margin-top:20px;
}

图片自取：

效果：

JavaScript 登录注册表单验证相关推荐

java注册登录小程序,详解小程序之简单登录注册表单验证
这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容一.首先我是在util.js中引入表单正则验证规则,给予l ...
小程序之简单登录注册表单验证
这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容一.首先我是在util.js中引入表单正则验证规则,给予l ...
购物车的制作与注册表单验证
购物车的制作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
jQuery带背景切换登录注册表单
jQuery带背景切换登录注册表单原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :jQuery带背景切换登录注册 ...
JavaScript中的表单验证、正则表达式、数组的使用
表单验证.正则表达式.数组字符串的使用为什么要使用表单验证表单验证的常用步骤提交表单的2种方式文本框对象为什么要使用正则表达式正则表达式的两种创建方法正则表达式的模式正则表达式常用的 ...
JavaWeb前端开发注册表单验证
注册表单验证最近在尝试学习开发一个网站,现将登录页面的表单验证总结如下表单校验分析 1.用户名:单词字符,8到20位 2.密码:单词字符,8到20位 3.email:邮箱格式 4.姓名:汉字非空 ...
HTML5 CSS登录注册表单界面示例源码
先上图高质量前端技术交流,有问必答q群:579720104 html <!DOCTYPE html> <html lang="zh"> <head& ...
html5 注册协议弹出层,js制作带有遮罩弹出层实现登录注册表单特效代码分享
本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图: ----------------------查 ...
登录界面转换实现html,html5和css3登录注册表单界面切换动画
这是一款使用html5和css3 伪类:target制作的登录界面和注册表单界面切换动画. HTML html结构包含两个表单:登录表单和注册表单.开始时使用css将注册表单隐藏. Log in Yo ...
Graphql 初体验第十一章 | #13 Hitting the API（实现了登录注册表单）
对应内容:#13 Hitting the API | Build a Complete App with GraphQL, Node.js, MongoDB and React.js 主要内容: 完成 ...

JavaScript 登录注册表单验证

html文件代码

JavaScript文件代码（HTML文件中没有引用，自己引用就好了）

css文件代码

图片自取：

效果：

JavaScript 登录注册表单验证相关推荐

最新文章

热门文章