个人中心
gpt4 book ai didi

JavaScript实现表单验证功能

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章JavaScript实现表单验证功能由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
//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 == "" ;
}

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!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 >

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我.

原文链接：https://blog.csdn.net/qq_44723773/article/details/110825757 。

最后此篇关于JavaScript实现表单验证功能的文章就讲到这里了,如果你想了解更多关于JavaScript实现表单验证功能的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： ES6中的类（Class）示例详解
文章推荐： laravel5.5框架的上传图片功能实例分析【仅传到服务器端】
文章推荐： PHP设计模式之中介者模式(Mediator Pattern)入门与应用案例详解
文章推荐： php双层循环(九九乘法表)
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com