JavaScript實(shí)現(xiàn)簡(jiǎn)單表單驗(yàn)證案例
更新時(shí)間：2022年08月25日 11:16:47 作者：無言月梧桐
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單表單驗(yàn)證案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)簡(jiǎn)單表單驗(yàn)證的具體代碼，供大家參考，具體內(nèi)容如下
一.需求分析
要實(shí)現(xiàn)的功能：
1.出現(xiàn)如下圖所示的內(nèi)容：（HTML和CSS完成）
2.對(duì)表單中的每一個(gè)表單項(xiàng)進(jìn)行校驗(yàn)，使得文本框發(fā)生失去焦點(diǎn)事件后，校驗(yàn)信息。（javascript完成）
3.點(diǎn)擊注冊(cè)功能后判斷每一個(gè)表單項(xiàng)是否正確，若全部正確才能提交，否則不能提交。（javascript完成）
二.具體實(shí)現(xiàn)
<!DOCTYPE html>
<html lang="ch">
<head>
? ? <meta charset="UTF-8">
? ? <title>注冊(cè)頁面</title>
? ? <style>
? ? ? ? *{
? ? ? ? ? ? margin: 0px;
? ? ? ? ? ? padding: 0px;
? ? ? ? ? ? box-sizing: border-box;
? ? ? ? }
? ? ? ? body{
? ? ? ? ? ? background: url("img/register_bg.png") no-repeat center;
? ? ? ? ? ? padding-top: 25px;
? ? ? ? }
? ? ? ? .rg_layout{
? ? ? ? ? ? width: 900px;
? ? ? ? ? ? height: 500px;
? ? ? ? ? ? border: 8px solid #EEEEEE;
? ? ? ? ? ? background-color: white;
? ? ? ? ? ? /*讓div水平居中*/
? ? ? ? ? ? margin: auto;
? ? ? ? }
? ? ? ? .rg_left{
? ? ? ? ? ? /*border: 1px solid red;*/
? ? ? ? ? ? float: left;
? ? ? ? ? ? margin: 15px;
? ? ? ? }
? ? ? ? .rg_left > p:first-child{
? ? ? ? ? ? color:#FFD026;
? ? ? ? ? ? font-size: 20px;
? ? ? ? }
? ? ? ? .rg_left > p:last-child{
? ? ? ? ? ? color:#A6A6A6;
? ? ? ? ? ? font-size: 20px;
? ? ? ? }
? ? ? ? .rg_center{
? ? ? ? ? ? float: left;
? ? ? ? ? ? /* border: 1px solid red;*/
? ? ? ? }
? ? ? ? .rg_right{
? ? ? ? ? ? /*border: 1px solid red;*/
? ? ? ? ? ? float: right;
? ? ? ? ? ? margin: 15px;
? ? ? ? }
? ? ? ? .rg_right > p:first-child{
? ? ? ? ? ? font-size: 15px;
? ? ? ? }
? ? ? ? .rg_right p a {
? ? ? ? ? ? color:pink;
? ? ? ? }
? ? ? ? .td_left{
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? text-align: right;
? ? ? ? ? ? height: 45px;
? ? ? ? }
? ? ? ? .td_right{
? ? ? ? ? ? padding-left: 50px ;
? ? ? ? }
? ? ? ? #username,#password,#email,#name,#tel,#birthday,#checkcode{
? ? ? ? ? ? width: 251px;
? ? ? ? ? ? height: 32px;
? ? ? ? ? ? border: 1px solid #A6A6A6 ;
? ? ? ? ? ? /*設(shè)置邊框圓角*/
? ? ? ? ? ? border-radius: 5px;
? ? ? ? ? ? padding-left: 10px;
? ? ? ? }
? ? ? ? #checkcode{
? ? ? ? ? ? width: 110px;
? ? ? ? }
? ? ? ? #img_check{
? ? ? ? ? ? height: 32px;
? ? ? ? ? ? vertical-align: middle;
? ? ? ? }
? ? ? ? #btn_sub{
? ? ? ? ? ? width: 150px;
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? background-color: #FFD026;
? ? ? ? ? ? border: 1px solid #FFD026 ;
? ? ? ? }
? ? ? ? .error{
? ? ? ? ? ? color: red;
? ? ? ? }
? ? </style>
? ? <script>
? ? ? ? window.onload=function () {
? ? ? ? //校驗(yàn)表單
? ? ? ? ? ? document.getElementById("form").onsubmit=function () {
? ? ? ? ? ? ? ? // return checkUsername()&&checkPassword()
? ? ? ? ? ? ? ?// return false;
? ? ? ? ? ? ? ? return checkUsesrname() &&checkPassword()&&checkEmail()&&checkTel();
? ? ? ? ? ? }
? ? ? ? ? ? //校驗(yàn)用戶名checkUsername()
? ? ? ? ? ? document.getElementById("username").onblur=checkUsesrname;
? ? ? ? ? ? //校驗(yàn)密碼checkPassword()
? ? ? ? ? ? document.getElementById("password").onblur=checkPassword;
? ? ? ? ? ? //校驗(yàn)email
? ? ? ? ? ? document.getElementById("email").onblur=checkEmail;
? ? ? ? ? ? //校驗(yàn)手機(jī)號(hào)
? ? ? ? ? ? document.getElementById("tel").onblur=checkTel;
? ? ? ? }
? ? ? ? function checkUsesrname() {//校驗(yàn)用戶名
? ? ? ? ? ? //1.獲取用戶名
? ? ? ? ? ? var username = document.getElementById("username").value;
? ? ? ? ? ? //2.校驗(yàn)標(biāo)準(zhǔn)（正則表達(dá)式）
? ? ? ? ? ? reg=/^\w{6,8}$/;
? ? ? ? ? ? //3.校驗(yàn)
? ? ? ? ? ? var flag = reg.test(username);
? ? ? ? ? ? //4.提示信息
? ? ? ? ? ? if (flag){
? ? ? ? ? ? ? ? document.getElementById("s_username").innerHTML="<img src=\"img/gou.png\" alt=\"\">";
? ? ? ? ? ? }else {
? ? ? ? ? ? ? ? document.getElementById("s_username").innerHTML="用戶名輸入錯(cuò)誤";
? ? ? ? ? ? }
? ? ? ? ? ? //5.返回flag
? ? ? ? ? ? return flag;
? ? ? ? }
? ? ? ? function checkPassword(){//校驗(yàn)密碼
? ? ? ? ? ? //1.獲取密碼
? ? ? ? ? ? var password = document.getElementById("password").value;
? ? ? ? ? ? //2.校驗(yàn)標(biāo)準(zhǔn)（正則表達(dá)式）
? ? ? ? ? ? reg=/^\w{6,8}$/;
? ? ? ? ? ? //3.校驗(yàn)
? ? ? ? ? ? var flag = reg.test(password);
? ? ? ? ? ? //4.提示信息
? ? ? ? ? ? if (flag){
? ? ? ? ? ? ? ? document.getElementById("s_password").innerHTML="<img src=\"img/gou.png\" alt=\"\">";
? ? ? ? ? ? }else {
? ? ? ? ? ? ? ? document.getElementById("s_password").innerHTML="密碼輸入錯(cuò)誤";
? ? ? ? ? ? }
? ? ? ? ? ? //5.返回flag
? ? ? ? ? ? return flag;
? ? ? ? }
? ? ? ? function checkEmail(){//校驗(yàn)email
? ? ? ? ? ? //1.獲取email
? ? ? ? ? ? var email = document.getElementById("email").value;
? ? ? ? ? ? //2.校驗(yàn)標(biāo)準(zhǔn)（正則表達(dá)式）
? ? ? ? ? ? reg=/\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
? ? ? ? ? ? //3.校驗(yàn)
? ? ? ? ? ? var flag = reg.test(email);
? ? ? ? ? ? //4.提示信息
? ? ? ? ? ? if (flag){
? ? ? ? ? ? ? ? document.getElementById("s_email").innerHTML="<img src=\"img/gou.png\" alt=\"\">";
? ? ? ? ? ? }else {
? ? ? ? ? ? ? ? document.getElementById("s_email").innerHTML="郵箱輸入錯(cuò)誤";
? ? ? ? ? ? }
? ? ? ? ? ? //5.返回flag
? ? ? ? ? ? return flag;
? ? ? ? }
? ? ? ? function checkTel(){//校驗(yàn)手機(jī)號(hào)
? ? ? ? ? ? //1.獲取手機(jī)號(hào)
? ? ? ? ? ? var tel = document.getElementById("tel").value;
? ? ? ? ? ? //2.校驗(yàn)標(biāo)準(zhǔn)（正則表達(dá)式）
? ? ? ? ? ? reg=/0?(13|14|15|18|17)[0-9]{9}/;
? ? ? ? ? ? //3.校驗(yàn)
? ? ? ? ? ? var flag = reg.test(tel);
? ? ? ? ? ? //4.提示信息
? ? ? ? ? ? if (flag){
? ? ? ? ? ? ? ? document.getElementById("s_tel").innerHTML="<img src=\"img/gou.png\" alt=\"\">";
? ? ? ? ? ? }else {
? ? ? ? ? ? ? ? document.getElementById("s_tel").innerHTML="手機(jī)號(hào)輸入錯(cuò)誤";
? ? ? ? ? ? }
? ? ? ? ? ? //5.返回flag
? ? ? ? ? ? return flag;
? ? ? ? }
? ? </script>
</head>
<body>
<div class="rg_layout">
? ? <div class="rg_left">
? ? ? ? <p>新用戶注冊(cè)</p>
? ? ? ? <p>USER REGISTER</p>
? ? </div>
? ? <div class="rg_center">
? ? ? ? <div class="rg_form">
? ? ? ? ? ? <!--定義表單 form-->
? ? ? ? ? ? <form action="#" method="get" id="form">
? ? ? ? ? ? ? ? <table>
? ? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_left"><label for="username">用戶名</label></td>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_right"><input type="text" name="username" id="username" placeholder="請(qǐng)輸入用戶名"></td>
? ? ? ? ? ? ? ? ? ? ? ? <td><span id="s_username" class="error"></span></td>
? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_left"><label for="password">密碼</label></td>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_right"><input type="password" name="password" id="password" placeholder="請(qǐng)輸入密碼">
? ? ? ? ? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? ? ? ? ? ? ? <td><span id="s_password" class="error"></span></td>
? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_left"><label for="email">Email</label></td>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_right"><input type="email" name="email" id="email" placeholder="請(qǐng)輸入郵箱"></td>
? ? ? ? ? ? ? ? ? ? ? ? <td><span id="s_email" class="error"></span></td>
? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_left"><label for="name">姓名</label></td>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_right"><input type="text" name="name" id="name" placeholder="請(qǐng)輸入姓名"></td>
? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_left"><label for="tel">手機(jī)號(hào)</label></td>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_right"><input type="text" name="tel" id="tel" placeholder="請(qǐng)輸入手機(jī)號(hào)"></td>
? ? ? ? ? ? ? ? ? ? ? ? <td><span id="s_tel" class="error"></span></td>
? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_left"><label>性別</label></td>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_right">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <input type="radio" name="gender" value="male"> 男
? ? ? ? ? ? ? ? ? ? ? ? ? ? <input type="radio" name="gender" value="female"> 女
? ? ? ? ? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_left"><label for="birthday">出生日期</label></td>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="請(qǐng)輸入出生日期"></td>
? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_left"><label for="checkcode" >驗(yàn)證碼</label></td>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="請(qǐng)輸入驗(yàn)證碼">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <img id="img_check" src="img/verify_code.jpg">
? ? ? ? ? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? ? ? <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注冊(cè)"></td>
? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? </table>
? ? ? ? ? ? </form>
? ? ? ? </div>
? ? </div>
? ? <div class="rg_right">
? ? ? ? <p>已有賬號(hào)?<a href="#" >立即登錄</a></p>
? ? </div>
</div>
</body>
</html>三.總結(jié)
通過此案例，我大致掌握了靜態(tài)資源三劍客----HTML，CSS，JavaScript。
HTML：是一門超文本標(biāo)簽語言，在靜態(tài)頁面中負(fù)責(zé)顯示頁面內(nèi)容。
CSS：是一門標(biāo)簽語言，在靜態(tài)頁面中負(fù)責(zé)內(nèi)容樣式，使其頁面更加美觀。
JavaScript：是一門腳本語言，負(fù)責(zé)與HTML元素標(biāo)簽進(jìn)行交互，控制其屬性的變化，達(dá)到動(dòng)態(tài)效果，再加上事件監(jiān)聽機(jī)制，使其可以呈現(xiàn)比較好看的動(dòng)態(tài)效果。
四.心得體會(huì)
空，非空，書中內(nèi)容并不是空洞的，只有動(dòng)手做了，才發(fā)現(xiàn)是這樣的。書中，總結(jié)的數(shù)十個(gè)字，可能濃縮著幾百行代碼。路漫漫其修遠(yuǎn)兮，吾將上下而求索。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了微信小程序中顯示倒計(jì)時(shí)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
本文給大家總結(jié)了三種移動(dòng)適配方案，具體哪三種感興趣的朋友可以通過本文詳細(xì)學(xué)習(xí)下2016-11-11
JavaScript和其它面向?qū)ο笳Z言一樣，對(duì)象類型采用引用方式。持有對(duì)象的變量只是一個(gè)地址，而基本類型數(shù)據(jù)是值。當(dāng)原型上存儲(chǔ)對(duì)象時(shí)，就可能有一些陷阱2013-12-12
JavaScript代碼簡(jiǎn)化技巧實(shí)例解析
這篇文章主要介紹了JavaScript代碼簡(jiǎn)化技巧實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
JavaScript實(shí)現(xiàn)輪播圖效果代碼實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)輪播圖效果代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
vite添加環(huán)境變量import.meta.env的方法
在不同的文件里面配置不同的環(huán)境變量,可以讓我們的配置更加容易維護(hù)和使用,這里我們說下vite配置環(huán)境變量和模式是怎么配置的,對(duì)vite環(huán)境變量相關(guān)知識(shí)感興趣的朋友跟隨小編一起看看吧2023-10-10
JavaScript中字符串GBK與GB2312的編解碼示例講解
在瀏覽器JavaScript環(huán)境中,可以使用TextEncoder和TextDecoder?API?來進(jìn)行?GBK?編碼和解碼,也可以使用?encodeURIComponent?函數(shù)對(duì)字符串進(jìn)行編碼,最好使用第三方庫(kù),比如iconv-lite來實(shí)現(xiàn)2023-12-12
在layui框架中select下拉框監(jiān)聽更改事件的例子
今天小編就為大家分享一篇在layui框架中select下拉框監(jiān)聽更改事件的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
javascript 動(dòng)態(tài)生成私有變量訪問器
創(chuàng)建一個(gè)新的用戶對(duì)象，接受一個(gè)有許多屬性的對(duì)象作為參數(shù)2009-12-12
JS數(shù)組操作中的經(jīng)典算法實(shí)例講解
下面小編就為大家?guī)硪黄狫S數(shù)組操作中的經(jīng)典算法實(shí)例講解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07