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延迟执行实现方法(setTimeout)
Dec 30 Javascript
jquery实现简单易懂的图片展示小例子
Nov 21 Javascript
JS实现文字向下滚动完整实例
Feb 06 Javascript
浅谈JavaScript正则表达式分组匹配
Apr 10 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
JS面向对象编程详解
Mar 06 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
详解Vue.js搭建路由报错 router.map is not a function
Jun 27 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
ES6 Object属性新的写法实例小结
Jun 25 Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 Javascript
vue element 关闭当前tab 跳转到上一路由操作
Jul 22 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
中国的第一台收音机
2021/03/01 无线电
php中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
PHP整合PayPal支付
2015/06/11 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
PHP实现的简单异常处理类示例
2017/05/04 PHP
最常用的12种设计模式小结
2011/08/09 Javascript
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
原生JS可拖动弹窗效果实例代码
2013/11/09 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
原生JS实现的双色球功能示例
2018/02/02 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
css3实现椭圆轨迹旋转的示例代码
2018/10/29 HTML / CSS
你的自行车健身专家:FaFit24
2016/11/16 全球购物
成立公司计划书
2014/05/07 职场文书
大学新生入学教育方案
2014/05/16 职场文书
日语系毕业求职信
2014/07/27 职场文书
2014年司法所工作总结
2014/11/22 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
vue3中的组件间通信
2021/03/31 Vue.js
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题