js實現(xiàn)注冊頁面校驗功能
更新時間：2022年08月25日 11:33:24 作者：欲游山河
這篇文章主要為大家詳細介紹了js實現(xiàn)注冊頁面校驗功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)注冊頁面的校驗代碼，供大家參考，具體內(nèi)容如下
基本操作
document.getElementById()：獲取頁面元素
alert()：向頁面彈出提示框。
innerHTML：操作頁面某個元素的內(nèi)容，可以獲取，也可以賦值。
document.write()：向頁面中寫內(nèi)容。
本案例實現(xiàn)注冊表單的基本驗證功能，主要實現(xiàn)非空驗證、重復輸入驗證、郵箱驗證（正則驗證），通過alert提示對話框給予用戶提示信息。并且當用戶輸入非法時阻止表單提交。
步驟分析：
第一步：綁定事件(onsubmit)。為form表單綁定onsubmit事件,并調(diào)用一個自定義函數(shù)。
第二步：編寫該函數(shù)(獲取用戶輸入的數(shù)據(jù)<獲取數(shù)據(jù)時需要在指定位置定義一個 id>)
第三步：對用戶輸入的數(shù)據(jù)進行判斷
第四步：數(shù)據(jù)合法(表單提交)
第五步：數(shù)據(jù)非法(給出錯誤提示信息，阻止表單提交)
【問題】如何控制表單提交？
關(guān)于事件 onsubmit：一般用于表單提交的位置，那么需要在定義函數(shù)的時候給出一個返回值。 onsubmit = return checkForm()
案例實現(xiàn)效果：當點擊“注冊”按鈕時，驗證表單輸入內(nèi)容是否合法，如果不合法則給出用戶提示對話框，并且表單無法提交。
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<script>
?? ??? ??? ?function checkFrm() {
?? ??? ??? ??? ?var usernameValue = document.getElementById("username").value;
?? ??? ??? ??? ?if(usernameValue == ""){
?? ??? ??? ??? ??? ?alert("用戶名不能為空");
?? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?var passwrodValue = document.getElementById("password").value;
?? ??? ??? ??? ?if(passwrodValue ==""){
?? ??? ??? ??? ??? ?alert("密碼不能為空");
?? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?var emailValue = document.getElementById("email").value;
?? ??? ??? ??? ?var rule = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
?? ??? ??? ??? ?if(rule.test(emailValue)) {
?? ??? ??? ??? ??? ?alert("輸入郵箱格式非法!");
?? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?</script>
?? ??? ?<style>
?? ??? ??? ?*{
?? ??? ??? ??? ?margin: 0px;
?? ??? ??? ??? ?padding: 0px;
?? ??? ??? ??? ?box-sizing: border-box;
?? ??? ??? ?}
?? ??? ??? ?body{
?? ??? ??? ??? ?background-color: azure;
?? ??? ??? ?}
?? ??? ??? ?.rg_layout{
?? ??? ??? ??? ?width:900px;
?? ??? ??? ??? ?height: 500px;
?? ??? ??? ??? ?margin: auto;
?? ??? ??? ??? ?background-color: white;
?? ??? ??? ??? ?border: 8px solid #EEEEEE;
?? ??? ??? ??? ?margin-top:30px;
?? ??? ??? ?}
?? ??? ??? ?.rg_left {
?? ??? ??? ??? ?border: 1px solid red;
?? ??? ??? ??? ?width: 200px;
?? ??? ??? ??? ?padding: 10px;
?? ??? ??? ??? ?float: left;
?? ??? ??? ?}
?? ??? ??? ?.rg_center{
?? ??? ??? ??? ?
?? ??? ??? ??? ?width:450px;
?? ??? ??? ??? ?float: left;
?? ??? ??? ?}
?? ??? ??? ?.rg_right{
?? ??? ??? ??? ?border: 1px solid red;
?? ??? ??? ??? ?width: 200px;
?? ??? ??? ??? ?float: right;
?? ??? ??? ?}
?? ??? ??? ?.td_left {
?? ??? ??? ??? ?width:100px;
?? ??? ??? ??? ?text-align: right;
?? ??? ??? ??? ?height: 45px;
?? ??? ??? ?}
?? ??? ??? ?.td_right{
?? ??? ??? ??? ?
?? ??? ??? ??? ?padding-left: 15px;
?? ??? ??? ?}
?? ??? ??? ?#username,#password,#email,#tel ,#name,#birthday,#checkcode{
?? ??? ??? ??? ?width: 251px;
?? ??? ??? ??? ?height: 32px;
?? ??? ??? ??? ?border: 1px solid #A6A6;
?? ??? ??? ??? ?border-radius: 5px;
?? ??? ??? ??? ?padding-left: 10px;
?? ??? ??? ?}
?? ??? ??? ?#checkcode{
?? ??? ??? ??? ?width: 110px;
?? ??? ??? ?}
?? ??? ??? ?#btn-sub{
?? ??? ??? ??? ?width:150px;
?? ??? ??? ??? ?height:40px;
?? ??? ??? ??? ?background-color: #00CCFF;
?? ??? ??? ??? ?border:1px solid #00CCFF;
?? ??? ??? ? ? ?border-radius: 5px;
?? ??? ??? ?}
?? ??? ??? ?#img_check{
?? ??? ??? ??? ?height: 32px;
?? ??? ??? ??? ?vertical-align: middle;//垂直居中
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div class="rg_layout">
?? ??? ??? ?<div class="rg_left">
?? ??? ??? ??? ?<p>新用戶注冊</p>
?? ??? ??? ??? ?<P>USER REGISTER</P>
?? ??? ??? ?</div>
?? ??? ??? ?<div class="rg_center">
?? ??? ??? ??? ?<form action="#" method="get" onsubmit="return checkFrm()">
?? ??? ??? ??? ??? ?<table>
?? ??? ??? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ??? ??? ?<td class="td_left">
?? ??? ??? ??? ??? ??? ??? ??? ?<label for="username">用戶名：</label>
?? ??? ??? ??? ??? ??? ??? ?</td>
?? ??? ??? ??? ??? ??? ??? ?<td class="td_right">
?? ??? ??? ??? ??? ??? ??? ??? ?<input type="text" name="username" placeholder="請輸入用戶名" id="username">
?? ??? ??? ??? ??? ??? ??? ?</td>
?? ??? ??? ??? ??? ??? ?</tr>
?? ??? ??? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ??? ??? ?<td class="td_left">
?? ??? ??? ??? ??? ??? ??? ??? ?<label for="password">密碼：</label>
?? ??? ??? ??? ??? ??? ??? ?</td>
?? ??? ??? ??? ??? ??? ??? ?<td class="td_right">
?? ??? ??? ??? ??? ??? ??? ??? ?<input type="password" name="password" placeholder="請輸入密碼"id="password">
?? ??? ??? ??? ??? ??? ??? ?</td>
?? ??? ??? ??? ??? ??? ?</tr>
?? ??? ??? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ??? ??? ?<td class="td_left">
?? ??? ??? ??? ??? ??? ??? ??? ?<label for="email">Email：</label>
?? ??? ??? ??? ??? ??? ??? ?</td>
?? ??? ??? ??? ??? ??? ??? ?<td class="td_right">
?? ??? ??? ??? ??? ??? ??? ??? ?<input type="email" name="email" ?id="email">
?? ??? ??? ??? ??? ??? ??? ?</td>
?? ??? ??? ??? ??? ??? ?</tr>
?? ??? ??? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ??? ??? ?<td class="td_left">
?? ??? ??? ??? ??? ??? ??? ??? ?<label for="name">姓名：</label>
?? ??? ??? ??? ??? ??? ??? ?</td>
?? ??? ??? ??? ??? ??? ??? ?<td class="td_right">
?? ??? ??? ??? ??? ??? ??? ??? ?<input type="text" name="name" id="name">
?? ??? ??? ??? ??? ??? ??? ?</td>
?? ??? ??? ??? ??? ??? ?</tr>
?? ??? ??? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ??? ??? ?<td class="td_left">
?? ??? ??? ??? ??? ??? ??? ??? ?<label for="tel">手機號：</label>
?? ??? ??? ??? ??? ??? ??? ?</td>
?? ??? ??? ??? ??? ??? ??? ?<td class="td_right">
?? ??? ??? ??? ??? ??? ??? ??? ?<input type="text" name="tel" id="tel">
?? ??? ??? ??? ??? ??? ??? ?</td>
?? ??? ??? ??? ??? ??? ?</tr>
?? ??? ??? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ??? ??? ?<td class="td_left"><label >性別：</label></td>
?? ??? ??? ??? ??? ??? ??? ?<td class="td_right">
?? ??? ??? ??? ??? ??? ??? ??? ?<input type="radio" name="gender" value="man">男
?? ??? ??? ??? ??? ??? ??? ? ? ?<input type="radio" name="gender" value="woman">女
?? ??? ??? ??? ??? ??? ??? ??? ?</td>
?? ??? ??? ??? ??? ??? ?</tr>
?? ??? ??? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ??? ??? ?<td class="td_left"><label for="birthday">出生日期</label></td>
?? ??? ??? ??? ??? ??? ??? ?<td class="td_right">
?? ??? ??? ??? ??? ??? ??? ??? ?<input type="date" name="birthday" id="birthday">
?? ??? ??? ??? ??? ??? ??? ?</td>
?? ??? ??? ??? ??? ??? ?</tr>
?? ??? ??? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ??? ??? ?<td class="td_left"><label for="checkcode">驗證碼</label></td>
?? ??? ??? ??? ??? ??? ??? ?<td class="td_right">
?? ??? ??? ??? ??? ??? ??? ??? ?<input type="text" name="checkcode" id="checkcode">
?? ??? ??? ??? ??? ??? ??? ??? ?<img src="#" id="img_check">
?? ??? ??? ??? ??? ??? ??? ?</td>
?? ??? ??? ??? ??? ??? ?</tr>
?? ??? ??? ??? ??? ??? ?<tr>
?? ??? ??? ??? ??? ??? ??? ?<td colspan="2" align="center"><input type="submit" value="注冊" id="btn-sub"/></td>?? ?
?? ??? ??? ??? ??? ??? ?</tr>
?? ??? ??? ??? ??? ?</table>?? ??? ?
?? ??? ??? ??? ?</form>?? ?
?? ??? ??? ?</div>
?? ??? ??? ?<div class="rg_right">
?? ??? ??? ??? ?<P>已有賬號<a href="#" rel="external nofollow" >立即登錄</a></P>?? ?
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?</body>
</html>以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js調(diào)用AJAX時Get和post的亂碼解決方法
在使用"get"時，抓取的頁面最后加上編碼類型，在使用post時用vbscript解決了編碼問題，具體實現(xiàn)如下，有類似情況的朋友可以參考下哈2013-06-06
這篇文章主要介紹了TS?中?never,void,unknown類型詳解,never?類型是 TypeScript 中的底層類型，unknown是TypeScript中比較特殊的一種類型，它用于描述類型不確定的變量，本文給大家介紹的非常詳細，需要的朋友可以參考下2023-05-05
Js注冊協(xié)議倒計時的小例子，需要的朋友可以參考一下2013-06-06
使用JavaScript實現(xiàn)一個簡單的哈希映射功能
哈希表大家應(yīng)該都經(jīng)常用到吧,那么大家有沒有想過哈希表是怎么實現(xiàn)的呢,本文我們就來從一道簡單的題目來了解一下哈希表的簡單原理和實現(xiàn)吧2024-02-02
Javascript動態(tài)創(chuàng)建表格及刪除行列的方法
這篇文章主要介紹了Javascript動態(tài)創(chuàng)建表格及刪除行列的方法,涉及javascript動態(tài)操作表格的相關(guān)技巧,需要的朋友可以參考下2015-05-05
這篇文章主要為大家介紹了使用Nest.js實現(xiàn)接口教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
淺談JavaScript中面向?qū)ο蠹夹g(shù)的模擬
淺談JavaScript中面向?qū)ο蠹夹g(shù)的模擬...2006-09-09
基于javascript實現(xiàn)頁面加載loading效果
這篇文章主要為大家詳細介紹了基于javascript實現(xiàn)頁面加載loading效果的相關(guān)資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
在js中phototype是JS中比較難理解的一個部分，下面通過本篇文章給大家介紹js中的prototype，需要的朋友可以參考下2015-09-09
這篇文章主要介紹了基于JS判斷對象是否是數(shù)組,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-01-01