JavaScript实现表单验证功能


Posted in Javascript onDecember 09, 2020

本文实例为大家分享了JavaScript实现表单验证功能的具体代码,供大家参考,具体内容如下

以下是JavaScript的表单验证功能,可根据JS代码编写出你想要的HTML和CSS的代码。

关于正则表达式的使用,以及常用的正则表达式,笔者目前还在整理中,后期整理完成后,会将链接放在下面,供大家一起学习。

//1.声明变量
var emailObj;
var usernameObj;
var passwordObj;
var confirmObj;
var emailMsg;
var usernameMsg;
var passwordMsg;
var confirmMsg;
//页面加载之后,获取页面中的对象
window.onload = function() {
  emailObj = document.getElementById("email");
  usernameObj = document.getElementById("username");
  passwordObj = document.getElementById("password");
  confirmObj = document.getElementById("confirm");
  emailMsg = document.getElementById("emaileMsg");
  usernameMsg = document.getElementById("usernameMsg");
  confirmMsg = document.getElementById("confirmMsg");
};
//3.检验整个表单
function checkForm() {
  var bEmail = checkEmail();
  var bUsername = checkUsername();
  var bPassword = checkPassword();
  var bConfirm = checkCondfirm();
  return bUsername && bPassword && bConfirm && bEmail;
}
//4.验证邮箱
function checkEmail() {
  var regex = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
  var value = emailObj.value;
  var msg = "";
  if(!value) {
    msg = "邮箱必须填写";
  } else if (!regex.test(value)) {
    msg = "邮箱格式不合法";
  }
  emailMsg.innerHTML = msg;
  emailObj.parentNode.parentNode.style.color = msg == ""?"black":"red";
  return msg == "";
}
//5.验证用户名‘
function checkUsername() {
  var regex = /^[a-zA-Z0-9_-]\w{0,9}$/;  //字母数字下划线1-10位,不能是数字开头
  var value = usernameObj.value;     //获取usernameObj中的文本
  var msg = "";              //最后的提示小事,默认为空
  //如果用户名是null或"",!value的值为false,如果不为空 !value值为true
  if(!value) {
    msg = "用户名必须填写";
  } else if (regex.test(value)) {
    msg = "用户名不合法";
  }
  usernameMsg.innerHTML = msg;
  usernameObj.parentNode.parentNode.style.color = msg == ""?"black":"red";
  return msg == "";            //如果提示消息为空则代表没出错,返回true
}
//6.验证密码
function checkPassword() {
  var regex = /^.{6,16}$/;      //任意字符,6-16位
  var value = passwordObj.value;
  var msg = "";
  if(!value) {
    msg = "密码必须填写";
  } else if (!regex.test(value)) {
    msg = "密码不合法";
  }
  passwordMsg.parentNode.parentNode.style.color = msg == ""?"black":"red";
  return msg == "";
}
//7.验证确认密码
function checkCondfirm() {
  var passwordValue = passwordObj.value;
  var confirmValue = confirmObj.value;
  var msg = "";
  if(!confirmValue) {
    msg = "确认密码填写";
  } else if (passwordValue != confirmValue) {
    msg = "密码必须保持一致";
  confirmMsg.innerHTML = msg;
  confirmObj.parentNode.parentNode.style.color = msg == ""?"black":"red";
  return msg == "";
}

以下代码是简单的测试邮箱是否匹配成功的代码,可根据下面来实现具体的逻辑

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <input type="text" placeholder="请输入邮箱" id="email">
</body>
<script>
 email.onchange = function(){
 var email = this.value;
 var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
 if(reg.test(email)){
  alert("邮箱格式正确");
 }else{
  alert("邮箱格式不正确");
 }
 }
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用IE的地址栏来辅助调试Web页脚本
Mar 08 Javascript
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
JavaScript Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
基于Jquery与WebMethod投票功能实现代码
Jan 19 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
纯javascript实现简单下拉刷新功能
Mar 13 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
基于javascript实现移动端轮播图效果
Dec 21 Javascript
javascript canvas实现雨滴效果
Jun 09 Javascript
element中Steps步骤条和Tabs标签页关联的解决
Dec 08 #Javascript
javascript全局自定义鼠标右键菜单
Dec 08 #Javascript
javascript局部自定义鼠标右键菜单
Dec 08 #Javascript
JavaScript对象访问器Getter及Setter原理解析
Dec 08 #Javascript
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 #Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 #Vue.js
vue中如何自定义右键菜单详解
Dec 08 #Vue.js
You might like
用PHP实现WEB动态网页静态
2006/10/09 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
PHP fopen 读取带中文URL地址的一点见解
2012/09/25 PHP
关于laravel5.5的定时任务详解(demo)
2019/10/23 PHP
PHP实现随机发扑克牌
2020/04/22 PHP
JSON 学习之完全手册 图文
2007/05/29 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
jQuery中height()方法用法实例
2014/12/24 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
浅谈JS的基础类型与引用类型
2016/09/13 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
[08:44]DOTA2发布会群星聚首 我们都是刀塔人
2014/03/21 DOTA
Python爬虫库BeautifulSoup获取对象(标签)名,属性,内容,注释
2020/01/25 Python
python add_argument()用法解析
2020/01/29 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
Pytorch损失函数nn.NLLLoss2d()用法说明
2020/07/07 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
python输入中文的实例方法
2020/09/14 Python
基于Python正确读取资源文件
2020/09/14 Python
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
护士个人简历自荐信
2013/10/18 职场文书
建筑专业自荐信
2013/10/18 职场文书
英文求职信结束语大全
2013/10/26 职场文书
生日主持词
2014/03/20 职场文书
国庆促销活动总结
2014/08/29 职场文书
介绍信格式样本
2015/05/05 职场文书
2015年测量员工作总结
2015/05/23 职场文书
文明上网主题班会
2015/08/14 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android