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信箱登陸入口在哪裡

7490

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版

熱門話題