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 相关文章推荐
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
JavaScript实现快速排序的方法
Jul 31 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
JavaScript 闭包详细介绍
Sep 28 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
Nov 21 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
js通过循环多张图片实现动画效果
Dec 19 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高手?学会“懒惰”的编程
2006/12/05 PHP
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
elementUI select组件使用及注意事项详解
2019/05/29 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
2020/05/20 Javascript
原生js实现购物车功能
2020/09/23 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
Python完全新手教程
2007/02/08 Python
Python中的装饰器用法详解
2015/01/14 Python
Python简单实现enum功能的方法
2016/04/25 Python
python try 异常处理(史上最全)
2019/03/07 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
自我反省检讨书
2014/01/23 职场文书
学生会主席事迹材料
2014/01/28 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
Python实现8种常用抽样方法
2021/06/27 Python