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 相关文章推荐
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
javascript使用正则表达式实现去掉空格之后的字符
Feb 15 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
Mar 01 Javascript
用javascript实现倒计时效果
Feb 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基础知识:类与对象(1)
2006/12/13 PHP
PHP实例分享判断客户端是否使用代理服务器及其匿名级别
2014/06/04 PHP
PHP pear安装配置教程
2016/05/14 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
2013/07/31 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
Vue2.0 $set()的正确使用详解
2020/07/28 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
Python虚拟环境virtualenv的安装与使用详解
2017/05/28 Python
python爬虫中多线程的使用详解
2019/09/23 Python
win10下opencv-python特定版本手动安装与pip自动安装教程
2020/03/05 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
27个经典Linux面试题及答案,你知道几个?
2013/01/10 面试题
UNIX特点都有哪些
2016/04/05 面试题
怎么写好自荐信
2013/10/30 职场文书
大学班级计划书
2014/04/29 职场文书
社区低保工作总结2015
2015/07/23 职场文书
Python进度条的使用
2021/05/17 Python