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值为trueif(!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实现表单验证功能相关推荐

[Joomla] 利用joomla内置的表单验证功能
Joomla有自己的表单验证功能,可以很方便地实现验证,没有通过验证的输入框在提交报错后会用红色边框表示,很清楚地知道漏了那几项没填. 以下说一下使用方法: 在要使用表单功能的页面的最上面输入如下代码 ...
js与php表单验证,JS简单表单验证功能完整示例
本文实例讲述了JS简单表单验证功能.分享给大家供大家参考,具体如下: 简单js表单验证demo Document //当用户名获取焦点时 function focus_username(){ docu ...
JavaScript常用表单验证
JavaScript常用表单验证目录: 1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长度限制 2.:js判断汉字.判断是否汉字 .只能输入汉字 3:js判 ...
CSS骚操作之表单验证功能的实现代码
CSS骚操作之表单验证功能的实现代码效果图如下: 原理: 表单元素中,有一个pattern属性,可以自定义正则表达式(如手机号.邮箱.身份证-):valid伪类,可以匹配通过pattern验证的元 ...
第一百五十一节，封装库--JavaScript，表单验证--密码确认验证--回答验证--电子邮件验证加自动补全...
封装库--JavaScript,表单验证--密码确认验证--回答验证--电子邮件验证加自动补全效果图 html <div id="reg"><h2 class= ...
利用策略模式与装饰模式扩展JavaScript表单验证功能
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و [本文源址:http://blog.csdn.net/q1056843325/article/details/55097262 ...
JavaScript - JavaScript通用表单验证函数(实例)
Check.js JS函数文件 /* *--------------- 客户端表单通用验证CheckForm(oForm) ----------------- * 功能:通用验证所有的表单元素. ...
jquery 实现表单验证功能代码(简洁)
html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>表单验证页面</title&g ...
php登陆页面修改密码的功能,使用bootstrap创建登录注册页面并实现表单验证功能...
本篇文章给大家介绍一下使用bootstrap创建登录注册页面并实现单验证功能的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用bootstrap做登入注册页面,使用valid ...
JavaScript通用表单验证函数
表单定义: < form name = " form1 " action = "" style = " behavior:url('form ...

JavaScript实现表单验证功能

JavaScript实现表单验证功能相关推荐

最新文章

热门文章