js表单验证实现代码-js教程-PHP中文网

首页

web前端

js教程

js表单验证实现代码

小云云

May 22, 2018 pm 04:39 PM

javascript 代码实现

本文主要和大家分享js表单验证实现代码，运用了正则表达式，进行匹配。希望能帮助到大家。

javascript的17种正则表达式

"^\\d+$"　　//非负整数（正整数 + 0） 
"^[0-9]*[1-9][0-9]*$"　　//正整数 
"^((-\\d+)|(0+))$"　　//非正整数（负整数 + 0） 
"^-[0-9]*[1-9][0-9]*$"　　//负整数 
"^-?\\d+$"　　　　//整数 
"^\\d+(\\.\\d+)?$"　　//非负浮点数（正浮点数 + 0） 
"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$"　　//正浮点数
"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$"　　//非正浮点数（负浮点数 + 0） 
"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$"　　//负浮点数
"^(-?\\d+)(\\.\\d+)?$"　　//浮点数 
"^[A-Za-z]+$"　　//由26个英文字母组成的字符串 
"^[A-Z]+$"　　//由26个英文字母的大写组成的字符串 
"^[a-z]+$"　　//由26个英文字母的小写组成的字符串 
"^[A-Za-z0-9]+$"　　//由数字和26个英文字母组成的字符串 
"^\\w+$"　　//由数字、26个英文字母或者下划线组成的字符串 
"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$"　　　　//email地址 
"^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$"　　//url

登录后复制

当然也可以通过使用JQurey插件实现，我们为了体现实现的过程。

中间的表单应该使用标签来定位，而不是使用p，这样出现的不美观，不能统一牌面。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
h4{
background-color: aquamarine;
width: 100%;
}
a{
color: red;
}

p{
margin-left: 300px;
}

</style>
<script>
function nameve(){
var name=document.getElementById("name");
var name1=document.getElementById("name1");
var verify=name.value;
if(verify==""){
name1.innerHTML="账号不能为空";
name1.style.color="red";
}
if((verify.length<4&&verify.length>0)||verify.length>16){
name1.innerHTML="长度过长或过短";
name1.style.color="red";
}
if(verify.length>=4&&verify.length<=16){
name1.innerHTML="格式正确";
name1.style.color="green";
}
}
function passve(){
var name=document.getElementById("pass");
var name1=document.getElementById("pass1");
var verify=name.value;
if(verify==""){
name1.innerHTML="密码不能为空";
name1.style.color="red";
}
if((verify.length<6&&verify.length>0)||verify.length>16){
name1.innerHTML="长度过长或过短";
name1.style.color="red";
}
if(verify.length>=6&&verify.length<=16){
name1.innerHTML="格式正确";
name1.style.color="green";
}
}
function passwordve(){
var name=document.getElementById("password");
var name1=document.getElementById("password1");
var pass=document.getElementById("pass");
var verify=name.value;
var verify1=pass.value;
if(verify==verify1){
name1.innerHTML="正确";
name1.style.color="green";
}
   else{
   	name1.innerHTML="两次输入的密码不一致";
   	name1.style.color="red";
   }
}
function ageve(){
var age0=/^((19\d{2})|(20\d{2}))--(0?[1-9]|1[0-2])--(0?[1-9]|[1-2]\d|3[0-1])$/;
var age=document.getElementById("age").value;
var age1=document.getElementById("age1");
if(age0.test(age)==true){
age1.innerHTML="正确";
age1.style.color="green";
}
else{
age1.innerHTML="格式错误";
   	age1.style.color="red";
}
}
function emave(){
var ema0=/^\w+@\w+.[A-Za-z]{2,3}(.[A-Za-z]{2,3})?$/;
var ema=document.getElementById("ema").value;
var ema1=document.getElementById("ema1");
if(ema0.test(ema)==true){
ema1.innerHTML="正确";
ema1.style.color="green";
}
else{
ema1.innerHTML="格式错误";
   	ema1.style.color="red";
}
}
function telve(){
var tel0=/^1\d{10}$/;
var ema=document.getElementById("tel").value;
var ema1=document.getElementById("tel1");
if(tel0.test(ema)==true){
ema1.innerHTML="正确";
ema1.style.color="green";
}
else{
ema1.innerHTML="格式错误";
   	ema1.style.color="red";
}
}

</script>
</head>
<body>
<form action="" method="get">
<h5><a>*</a>为必填内容</h5>
<h4>你的账号信息</h4>
<p><p><a>*</a>昵称：<input id="name" type="text" onblur="nameve()" /><a id="name1"></a>
<br />英文字符，数字或者下划线，长度为4-16个字符
</p>
</p>
<p><p><a>*</a>密码：<input id="pass" type="password" onblur="passve()" /><a id="pass1"></a>
<br />6-16个字符组成
</p>
</p>
<p><p><a>*</a>重新输入密码：<input id="password" type="password" onblur="passwordve()" /><a id="password1"></a>
<br />
</p>
</p>
<h4>你的个人信息</h4>
<p><p><a>*</a>出生年月：<input id="age"  type="text" onblur="ageve()" /><a id="age1"></a>
<br />日期格式yyyy--mm--dd
</p>
</p>
<p ><p><a>*</a>性别：<input type="radio" id="man" />男<input type="radio" id="woman" />女
<br />
</p>
</p>
<p><p><a>*</a>电子邮件：<input type="email" id="ema" onblur="emave()"/><a id="ema1"></a>
</p>
</p>
<p><p><a>*</a>电话号码：<input type="tel" id="tel" onblur="telve()"/><a id="tel1"></a>
<br />
</p>
</p>
<h4>所在地区</h4>
<p><p>国家：<select>
<option value="中华人民共和国">中华人民共和国</option>
<option value="华侨">美国</option>
</select>
</p>
</p>
<p><p>省份：<select>
<option value="河南省">河南省</option>
<option value="河北省">河北省</option>
</select>
</p>
</p>
<h4>相关服务条例</h4>
<p><p><input type="checkbox" value="我同意以下条款" />
服务条款
</p>
</p>
<p><p><input type="submit" value="提交注册" />
</p></p>
</form>
</body>
</html>

登录后复制

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7499

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

蓝屏代码0x0000001怎么办 Feb 23, 2024 am 08:09 AM

蓝屏代码0x0000001怎么办蓝屏错误是电脑系统或硬件出现问题时的一种警告机制，代码0x0000001通常表示出现了硬件或驱动程序故障。当用户在使用电脑时突然遇到蓝屏错误，可能会感到惊慌和无措。幸运的是，大多数蓝屏错误都可以通过一些简单的步骤进行排除和处理。本文将为读者介绍一些解决蓝屏错误代码0x0000001的方法。首先，当遇到蓝屏错误时，我们可以尝试重

华为手机如何实现双微信登录？ Mar 24, 2024 am 11:27 AM

华为手机如何实现双微信登录？随着社交媒体的兴起，微信已经成为人们日常生活中不可或缺的沟通工具之一。然而，许多人可能会遇到一个问题：在同一部手机上同时登录多个微信账号。对于华为手机用户来说，实现双微信登录并不困难，本文将介绍华为手机如何实现双微信登录的方法。首先，华为手机自带的EMUI系统提供了一个很便利的功能——应用双开。通过应用双开功能，用户可以在手机上同

GE通用远程代码可在任何设备上编程 Mar 02, 2024 pm 01:58 PM

如果您需要远程编程任何设备，这篇文章会给您带来帮助。我们将分享编程任何设备的顶级GE通用远程代码。通用电气的遥控器是什么？GEUniversalRemote是一款遥控器，可用于控制多个设备，如智能电视、LG、Vizio、索尼、蓝光、DVD、DVR、Roku、AppleTV、流媒体播放器等。GEUniversal遥控器有各种型号，具有不同的功能和功能。GEUniversalRemote最多可以控制四台设备。顶级通用遥控器代码，可在任何设备上编程GE遥控器配备一组代码，使其能够与不同设备相配合。您可

PHP编程指南：实现斐波那契数列的方法 Mar 20, 2024 pm 04:54 PM

编程语言PHP是一种用于Web开发的强大工具，能够支持多种不同的编程逻辑和算法。其中，实现斐波那契数列是一个常见且经典的编程问题。在这篇文章中，将介绍如何使用PHP编程语言来实现斐波那契数列的方法，并附上具体的代码示例。斐波那契数列是一个数学上的序列，其定义如下：数列的第一个和第二个元素为1，从第三个元素开始，每个元素的值等于前两个元素的和。数列的前几个元

如何在华为手机上实现微信分身功能 Mar 24, 2024 pm 06:03 PM

如何在华为手机上实现微信分身功能随着社交软件的普及和人们对隐私安全的日益重视，微信分身功能逐渐成为人们关注的焦点。微信分身功能可以帮助用户在同一台手机上同时登录多个微信账号，方便管理和使用。在华为手机上实现微信分身功能并不困难，只需要按照以下步骤操作即可。第一步：确保手机系统版本和微信版本符合要求首先，确保你的华为手机系统版本已更新到最新版本，以及微信App

如何使用Copilot生成代码 Mar 23, 2024 am 10:41 AM

作为一名程序员，对于能够简化编码体验的工具，我感到非常兴奋。借助人工智能工具的帮助，我们可以生成演示代码，并根据需求进行必要的修改。在VisualStudioCode中新引入的Copilot工具让我们能够创建具有自然语言聊天交互的AI生成代码。通过解释功能，我们可以更好地理解现有代码的含义。如何使用Copilot生成代码？要开始，我们首先需要获得最新的PowerPlatformTools扩展。要实现这一点，你需要进入扩展页面，搜索“PowerPlatformTool”，然后点击Install按钮

掌握Golang如何实现游戏开发的可能性 Mar 16, 2024 pm 12:57 PM

在当今的软件开发领域中，Golang（Go语言）作为一种高效、简洁、并发性强的编程语言，越来越受到开发者的青睐。其丰富的标准库和高效的并发特性使它成为游戏开发领域的一个备受关注的选择。本文将探讨如何利用Golang来实现游戏开发，并通过具体的代码示例来展示其强大的可能性。1.Golang在游戏开发中的优势作为一种静态类型语言，Golang在构建大型游戏系统

PHP游戏需求实现指南 Mar 11, 2024 am 08:45 AM

PHP游戏需求实现指南随着互联网的普及和发展，网页游戏的市场也越来越火爆。许多开发者希望利用PHP语言来开发自己的网页游戏，而实现游戏需求是其中一个关键步骤。本文将介绍如何利用PHP语言来实现常见的游戏需求，并提供具体的代码示例。1.创建游戏角色在网页游戏中，游戏角色是非常重要的元素。我们需要定义游戏角色的属性，比如姓名、等级、经验值等，并提供方法来操作这些

See all articles

js表单验证实现代码

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题