js實現(xiàn)注冊頁面校驗功能
更新時間：2022年08月25日 11:33:24 作者：欲游山河
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)注冊頁面校驗功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)注冊頁面的校驗代碼，供大家參考，具體內(nèi)容如下
基本操作
document.getElementById()：獲取頁面元素
alert()：向頁面彈出提示框。
innerHTML：操作頁面某個元素的內(nèi)容，可以獲取，也可以賦值。
document.write()：向頁面中寫內(nèi)容。
本案例實現(xiàn)注冊表單的基本驗證功能，主要實現(xiàn)非空驗證、重復(fù)輸入驗證、郵箱驗證（正則驗證），通過alert提示對話框給予用戶提示信息。并且當(dāng)用戶輸入非法時阻止表單提交。
步驟分析：
第一步：綁定事件(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)效果：當(dāng)點擊“注冊”按鈕時，驗證表單輸入內(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Math對象中的方法很常用,來跟我一起看看吧,下面這篇文章主要給大家介紹了關(guān)于JavaScript中Math對象相關(guān)知識全解的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
開啟Javascript中apply、call、bind的用法之旅模式
在Javascript中，F(xiàn)unction是一種對象。Function對象中的this指向決定于函數(shù)被調(diào)用的方式,使用apply，call 與 bind 均可以改變函數(shù)對象中this的指向。2015-10-10
JavaScript中的null和undefined用法解析
這篇文章主要介紹了JavaScript中的null和undefined用法解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)滑動驗證拼圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
JavaScript實現(xiàn)字符串與日期的互相轉(zhuǎn)換及日期的格式化
這篇文章主要介紹了JavaScript實現(xiàn)字符串與日期的互相轉(zhuǎn)換及日期的格式化的方法,這里格式化使用的是正則表達(dá)式來替換日期后進行格式化,需要的朋友可以參考下2016-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序tabBar底部導(dǎo)航中文注解api，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
CSV文件一般是以逗號為分隔值的文件(Comma-Separated?Values,CSV,有時也稱為字符分隔值,因為分隔字符也可以不是逗號),其文件以純文本形式存儲表格數(shù)據(jù)(數(shù)字和文本),下面這篇文章主要給大家介紹了JS小知識之如何將CSV轉(zhuǎn)換為JSON字符串的相關(guān)資料,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了JS實現(xiàn)進入頁面時漸變背景色的方法,涉及javascript操作css控制背景色漸變的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要為大家介紹了微信小程序網(wǎng)絡(luò)數(shù)據(jù)請求的方式和注意事項講解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要介紹了微信小程序圖片左右擺動效果詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07