JavaScript实现表单验证功能
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
AngularJS实现表单验证
虽然我不是前端程序员,但明白前端做好验证是多么重要. 因为这样后端就可以多喘口气了,而且相比后端什么的果然还是前端可以提高用户的幸福感. AngularJS提供了很方便的表单验证功能,在此记录一番. 首先从下面这段代码开始 复制代码 代码如下: <form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate> <p&
-
JavaScript表单验证完美代码
用原生JS写一个简单的表单验证 首先,是html部分 <div class="divAll"> <div id="titles">新用户注册</div> <div id="contents"> <h3>基本信息</h3> <hr width="95%" color="#f2f2f2"/> <form action=&q
-
收藏的js表单验证控制代码大全第1/3页
关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单: 目录: 1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长度限制 2.:js判断汉字.判断是否汉字 .只能输入汉字 3:js判断是否输入英文.只能输入英文 4:js只能输入数字,判断数字.验证数字.检测数字.判断是否为数字.只能输入数字 5:只能输入英文字符和数字 6: js email验证 .js 判断email .信箱/邮箱格式验证 7:js字符过滤,屏蔽关键字 8:js
-
jquery validate.js表单验证的基本用法入门
这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码
-
js正则表达式注册页面表单验证
正则表达式方式的验证方式,这个验证比较标准而且比较全面,不过也是通过点击提交按钮才进行验证,本实例可以这样验证,具体内容如下 也可以这样验证 具体代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表单验证类Validator v1</title> <style&g
-
JavaScript表单验证实例之验证表单项是否为空
表单验证几乎在每一个需要注册或者登陆的网站是必不可少的,有些验证则非常的复杂,可以说是各种各样给你的要求,不过本章节只介绍一下表单中最简单的验证方式,就是判断是否为空,有些要求比较低的网站对此已经满足需要了. 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://ww
-
JavaScript 表单验证正则表达式大全[推荐]
具体和函数结合的使用方法,还请查看下篇文章 JavaScript 使用正则表达式进行表单验证的示例代码 复制代码 代码如下: 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[^x00-xff] 评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 匹配空白行的正则表达式:ns*r 评注:可以用来删除空白行 匹配HTML标记的正则表达式:< (S*?)[^>]*>.*?
-
js 常用正则表达式表单验证代码
正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证.替换文本.可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字.根据模式匹配从字符串中提取一个子字符串.可以用来在文本或输入字段中查找特定文字. 基本语法 在对正则表达式的功能和作用有了初步的了解之后,我们就来具体看一下正则表
-
javascript制作的简单注册模块表单验证
一个注册框 进行表单验证处理 如图 有简单的验证提示功能 代码思路也比较简单 输入框失去焦点时便检测,并进行处理 表单具有 onsubmit = "return check()"行为,处理验证情况 点击提交表单按钮时,进行最终的验证,达到是否通过表单提交的请求. 先是最基本的html+css部分 <style type="text/css"> body{margin:0;padding: 0;} .login{position:relative;mar
-
AngularJS使用ngMessages进行表单验证
AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM.模块化.自动化双向数据绑定.语义化标签.依赖注入等等. 名称为"ngMessages"的module,通过npm install angular-messages进行安装.在没有使用ngMessages之前,我们可能这样写验证: <form name="