JS和jQuery註冊資訊的驗證功能實作程式碼
javascript
jquery
功能
用JS和JQuery實現註冊資訊的驗證功能的效果是一樣的。本文透過實例程式碼給大家分享了基於js+jquery實現的註冊資訊驗證功能，程式碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧，希望能幫助到大家。
HTML程式碼
<legend> 请填写注册信息</legend>
<form action="index.html" method="post">
<table style="text-align: right;">
<tr>
<td>用户名：</td>
<td><input type="text" name="userName" placeholder="由英文字母和数字组成的4-16位字符，以字母开头">
</td>
</tr>
<tr>
<td>昵称：</td>
<td><input type="text" name="nickName" placeholder="由2-6个汉字组成">
</td>
</tr>
<tr>
<td>邮箱：</td>
<td><input type="text" name="email" placeholder="邮箱账号@域名。如good@tom.com、whj@sina.com.cn">
</td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="pwd" placeholder="由英文字母和数字组成的4-10位字符">
</td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="pwd2" placeholder="确认密码">
</td>
</tr>
<tr>
<td>手机号码：</td>
<td><input type="text" name="phone" placeholder="手机号由11位数字组成，且以13,15,18开头">
</td>
</tr>
<tr>
<td>出生日期：</td>
<td><input type="text" name="date" placeholder="出生日期在1990-2009之间">
</tr>
<tr>
<td colspan="2" align="left"><input type="button" name="submit" value="提交"></td>
</tr>
</table>
</form>
</fieldset>登入後複製
CSS樣式
body {
text-align: center;
padding: 0;
margin: 0;
}
fieldset {
width: 800px;
}
table tr td ~ td {
text-align: left;
width: 600px;
}登入後複製
JS程式碼
//验证用户名
function check_userName() {
var userName = document.getElementById("name").value;
var regName = /[a-zA-Z]\w{4,16}/
if (userName == "" || userName.trim() == "") {
document.getElementById("err_name").innerHTML = "请输入用户名";
return false;
} else if (!regName.test(userName)) {
document.getElementById("err_name").innerHTML = "由英文字母和数字组成的4-16位字符，以字母开头";
return false;
} else {
document.getElementById("err_name").innerHTML = "ok!!!";
return true;
}
}
//验证昵称
function check_nickName() {
var nickName = document.getElementById("nick").value;
var regName = /[\u4e00-\u9fa5]{2,6}/
if (nickName == "" || nickName.trim() == "") {
document.getElementById("err_nick").innerHTML = "请输入昵称";
return false;
} else if (!regName.test(nickName)) {
document.getElementById("err_nick").innerHTML = "由2-6个汉字组成";
return false;
} else {
document.getElementById("err_nick").innerHTML = "ok!!!";
return true;
}
}
//验证邮箱
function check_email() {
var email = document.getElementById("email").value;
var regEmail = /^\w+@\w+((\.\w+)+)$/;
if (email == "" || email.trim() == "") {
document.getElementById("err_email").innerHTML = "请输入邮箱";
return false;
} else if (!regEmail.test(email)) {
document.getElementById("err_email").innerHTML = "邮箱账号@域名。如good@tom.com、whj@sina.com.cn";
return false;
} else {
document.getElementById("err_email").innerHTML = "ok!!!";
return true;
}
}
//验证密码
function check_pwd() {
var pwd = document.getElementById("pwd").value;
var regPwd = /^\w{4,10}$/;
if (pwd == "" || pwd.trim() == "") {
document.getElementById("err_pwd").innerHTML = "请输入密码";
return false;
} else if (!regPwd.test(pwd)) {
document.getElementById("err_pwd").innerHTML = "格式错误";
return false;
} else {
document.getElementById("err_pwd").innerHTML = "ok!!!";
return true;
}
}
//确认密码
function check_pwd2() {
var pwd = document.getElementById("pwd").value;
var pwd2 = document.getElementById("pwd2").value;
if (pwd2 == "" || pwd2.trim() == "") {
document.getElementById("err_pwd2").innerHTML = "请输入密码";
return false;
} else if (!pwd2.equals(pwd)) {
document.getElementById("err_pwd2").innerHTML = "两次输入密码不一致";
return false;
} else {
document.getElementById("err_pwd2").innerHTML = "ok!!!";
return true;
}
}
//验证手机号
function check_phone() {
var phone = document.getElementById("phone").value;
var regPhone = /[13,15,18]\d{9}/;
if (phone == "" || phone.trim() == "") {
document.getElementById("err_phone").innerHTML = "请输入手机号";
return false;
} else if (!regPhone.test(phone)) {
document.getElementById("err_phone").innerHTML = "手机号由11位数字组成，且以13,15,18开头";
return false;
} else {
document.getElementById("err_phone").innerHTML = "ok!!!";
return true;
}
}
//验证时间
function check_date() {
var birthday = document.getElementById("birthday").value;
var regDate = /[13,15,18]\d{9}/;
if (birthday == "" || birthday.trim() == "") {
document.getElementById("err_date").innerHTML = "请输入日期";
return false;
} else if (!regDate.test(birthday)) {
document.getElementById("err_date").innerHTML = "出生日期在1990-2009之间";
return false;
} else {
document.getElementById("err_date").innerHTML = "ok!!!";
return true;
}
}登入後複製
Jquery程式碼
$(function () {
var errMsg;
$.each($("input"), function (i, val) {
$(val).blur(function () {
if ($(val).attr("name") == "userName") {
$(".nameMsg").remove();
var userName = val.value;
var regName = /[a-zA-Z]\w{4,16}/
if (userName == "" || userName.trim() == "") {
errMsg = "<span class='nameMsg' style='color:red;'>用户名不能为空</span>";
} else if (!regName.test(userName)) {
errMsg = "<span class='nameMsg' style='color:red;'>由英文字母和数字组成的4-16位字符，以字母开头</span>";
} else {
errMsg = "<span class='nameMsg' style='color:red;'>OK！</span>";
}
$(this).parent().append(errMsg);
} else if ($(val).attr("name") == "nickName") {
$(".nickMsg").remove();
var nickName = val.value;
var regName = /[\u4e00-\u9fa5]{2,6}/
if (nickName == "" || nickName.trim() == "") {
errMsg = "<span class='nickMsg' style='color:red;'>昵称不能为空</span>";
} else if (!regName.test(nickName)) {
errMsg = "<span class='nickMsg' style='color:red;'>由2-6个汉字组成</span>";
} else {
errMsg = "<span class='nickMsg' style='color:red;'>OK！</span>";
}
$(this).parent().append(errMsg);
} else if ($(val).attr("name") == "email") {
$(".emailMsg").remove();
var email = val.value;
var regEmail = /^\w+@\w+((\.\w+)+)$/;
if (email == "" || email.trim() == "") {
errMsg = "<span class='emailMsg' style='color:red;'>邮箱不能为空</span>";
} else if (!regEmail.test(email)) {
errMsg = "<span class='emailMsg' style='color:red;'>邮箱账号@域名。如good@tom.com、whj@sina.com.cn</span>";
} else {
errMsg = "<span class='emailMsg' style='color:red;'>OK！</span>";
}
$(this).parent().append(errMsg);
} else if ($(val).attr("name") == "pwd") {
$(".pwdMsg").remove();
var pwd = val.value;
var regPwd = /^\w{4,10}$/;
if (pwd == "" || pwd.trim() == "") {
errMsg = "<span class='pwdMsg' style='color:red;'>密码不能为空</span>";
} else if (!regPwd.test(pwd)) {
errMsg = "<span class='pwdMsg' style='color:red;'>格式错误</span>";
} else {
errMsg = "<span class='pwdMsg' style='color:red;'>OK！</span>";
}
$(this).parent().append(errMsg);
} else if ($(val).attr("name") == "pwd2") {
$(".pwd2Msg").remove();
var pwd2 = val.value;
var pwd = $("input")[3].value;
if (pwd2 == "" || pwd2.trim() == "" || !pwd2.equals(pwd)) {
errMsg = "<span class='pwd2Msg' style='color:red;'>两次输入密码不一致</span>";
} else {
errMsg = "<span class='pwd2Msg' style='color:red;'>OK！</span>";
}
$(this).parent().append(errMsg);
} else if ($(val).attr("name") == "phone") {
$(".phoneMsg").remove();
var phone = val.value;
var regPhone = /[13,15,18]\d{9}/;
if (phone == "" || phone.trim() == "") {
errMsg = "<span class = 'phoneMsg' style = 'color:red;' > 手机号不能为空 < /span>"
} else if (!regPhone.test(phone)) {
errMsg = "<span class = 'phoneMsg' style = 'color:red;' > 格式错误 < /span>"
} else {
errMsg = "<span class = 'phoneMsg' style = 'color:red;' > OK！ < /span>"
}
$(this).parent().append(errMsg);
} else if ($(val).attr("name") == "date") {
$(".dateMsg").remove();
var birthday = val.value;
var regDate = /(199\d|200\d)[-/](0\d|1[0-2])[-/](0\d|[1-2]\d|30|31)/;
if (birthday == "" || birthday.trim() == "") {
errMsg = "<span class='dateMsg' style='color:red;'>请输入生日</span>";
} else if (!regDate.test(birthday)) {
errMsg = "<span class='dateMsg' style='color:red;'>格式错误</span>";
} else {
errMsg = "<span class='dateMsg' style='color:red;'>OK！</span>";
}
$(this).parent().append(errMsg);
}
});
});
});登入後複製
相關推薦：
JQuery validate外掛程式驗證使用者註冊資訊_jquery
##js簡單實作使用者註冊資訊的校驗程式碼_javascript技巧以上是JS和jQuery註冊資訊的驗證功能實作程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
Windows 11 KB5054979中的新功能以及如何解決更新問題
4 週前
By DDD
如何修復KB5055523無法在Windows 11中安裝？
3 週前
By DDD
Inzoi：如何申請學校和大學
1 個月前
By DDD
如何修復KB5055518無法在Windows 10中安裝？
3 週前
By DDD
在哪裡可以找到Atomfall中的站點辦公室鑰匙
4 週前
By DDD
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
豆包app有什麼功能
Mar 01, 2024 pm 10:04 PM
豆包app裡會有很多ai創作的功能，那麼豆包app有什麼功能呢？使用者可以透過這個軟體來創作繪畫，和ai進行聊天，也能夠為用戶生成文章，幫助大家搜尋歌曲等。這篇豆包app功能介紹就能夠告訴大家具體的操作方法，以下就是具體內容，趕快看看吧！豆包app有什麼功能答：可以畫畫、聊天、寫文、找歌。功能介紹：1、問題查詢：可以透過ai來更快的找到問題的答案，什麼樣的問題都是可以詢問。 2.圖片生成：可以有ai來為大家創造不同的圖片，只需要告訴大家大概的要求。 3.ai聊天：能夠為用戶創建一個可以聊天的ai，
vivox100s和x100區別：效能比較及功能解析
Mar 23, 2024 pm 10:27 PM
vivox100s和x100手機都是vivo手機產品線中的代表機型，它們分別代表了vivo在不同時間段內的高端技術水平，因此這兩款手機在設計、性能和功能上均有一定區別。本文將從效能比較和功能解析兩個面向對這兩款手機進行詳細比較，幫助消費者更好地選擇適合自己的手機。首先，我們來看vivox100s和x100在效能上的比較。 vivox100s搭載了最新的
自媒體到底是什麼？它的主要特點和功能有哪些？
Mar 21, 2024 pm 08:21 PM
隨著網路的快速發展，自媒體這個概念已經深入人心。那麼，自媒體到底是什麼呢？它有哪些主要特點和功能呢？接下來，我們將一一探討這些問題。一、自媒體到底是什麼？自媒體，顧名思義，就是自己就是媒體。它是指透過網路平台，個人或團隊可以自主創建、編輯、發布和傳播內容的資訊載體。不同於傳統媒體，如報紙、電視、電台等，自媒體具有更強的互動性和個人化，讓每個人都能成為訊息的生產者和傳播者。二、自媒體的主要特色和功能有哪些？ 1.低門檻：自媒體的崛起降低了進入媒體產業的門檻，不再需要繁瑣的設備和專業的團隊，一部手
小紅書帳號管理軟體有哪些功能？怎麼經營小紅書帳號？
Mar 21, 2024 pm 04:16 PM
隨著小紅書在年輕人中的流行，越來越多的人開始利用這個平台分享各方面的經驗和生活見解。如何有效管理多個小紅書帳號成為關鍵問題。在本文中，我們將討論一些小紅書帳號管理軟體的功能，並探討如何更好地經營小紅書帳號。隨著社群媒體的發展，許多人發現自己需要管理多個社群帳號。對於小紅書用戶來說，這也是一個挑戰。一些小紅書帳號管理軟體可以幫助使用者更輕鬆地管理多個帳號，包括自動發佈內容、定時發布、資料分析等功能。透過這些工具，使用者可以更有效率地管理他們的帳號，提高帳號的曝光率和關注。另一、小紅書帳號管理軟體有
PHP技巧：快速實現返回上一頁功能
Mar 09, 2024 am 08:21 AM
PHP技巧：快速實現回到上一頁功能在網頁開發中，常常會遇到需要實作返回上一頁的功能。這樣的操作可以提高使用者體驗，讓使用者更方便地在網頁之間進行導航。在PHP中，我們可以透過一些簡單的程式碼來實現這項功能。本文將介紹如何快速實現返回上一頁功能，並提供具體的PHP程式碼範例。在PHP中，我們可以使用$_SERVER['HTTP_REFERER']來取得上一頁的URL
什麼是Discuz？ Discuz的定義與功能介紹
Mar 03, 2024 am 10:33 AM
《探索Discuz：定義、功能及程式碼範例》隨著網路的快速發展，社群論壇已成為人們獲取資訊、交流觀點的重要平台。在眾多的社群論壇系統中，Discuz作為國內較知名的一種開源論壇軟體，備受廣大網站開發者和管理員的青睞。那麼，什麼是Discuz？它又有哪些功能，能為我們的網站提供怎樣的幫助呢？本文將對Discuz進行詳細介紹，並附上具體的程式碼範例，幫助讀者更
Linux下GDM的功能與作用詳解
Mar 01, 2024 pm 04:18 PM
Linux下GDM的功能和作用詳解在Linux作業系統中，GDM（GNOMEDisplayManager）是一種圖形化登入管理器，它提供了使用者在系統中登入和登出的介面。 GDM通常是GNOME桌面環境的一部分，但也可以被其他桌面環境所使用。 GDM的功能不僅是提供一個登入介面，還包括使用者會話管理、螢幕保護、自動登入等功能。 GDM的功能主要包括以下幾個面向：
PHP是做什麼用的？探究PHP的作用與功能
Mar 24, 2024 am 11:39 AM
PHP是一種廣泛應用於Web開發的伺服器端腳本語言，它主要的功能是產生動態網頁內容，與HTML結合使用，可以創造出豐富多彩的網頁。 PHP的功能強大，它可以執行各種資料庫操作、檔案操作、表單處理等任務，為網站提供強大的互動性和功能性。在接下來的文章中，我們將進一步探究PHP的作用與功能，並配以詳細的程式碼範例。首先，我們來看看PHP的常見用途：動態網頁生成：P
