JavaScript實(shí)現(xiàn)簡(jiǎn)單表單驗(yàn)證案例
更新時(shí)間：2022年08月25日 11:16:47 作者：無(wú)言月梧桐
這篇文章主要為大家詳細(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è)頁(yè)面</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)用戶(hù)名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)用戶(hù)名
? ? ? ? ? ? //1.獲取用戶(hù)名
? ? ? ? ? ? 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="用戶(hù)名輸入錯(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>新用戶(hù)注冊(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">用戶(hù)名</label></td>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_right"><input type="text" name="username" id="username" placeholder="請(qǐng)輸入用戶(hù)名"></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é)
通過(guò)此案例，我大致掌握了靜態(tài)資源三劍客----HTML，CSS，JavaScript。
HTML：是一門(mén)超文本標(biāo)簽語(yǔ)言，在靜態(tài)頁(yè)面中負(fù)責(zé)顯示頁(yè)面內(nèi)容。
CSS：是一門(mén)標(biāo)簽語(yǔ)言，在靜態(tài)頁(yè)面中負(fù)責(zé)內(nèi)容樣式，使其頁(yè)面更加美觀。
JavaScript：是一門(mén)腳本語(yǔ)言，負(fù)責(zé)與HTML元素標(biāo)簽進(jìn)行交互，控制其屬性的變化，達(dá)到動(dòng)態(tài)效果，再加上事件監(jiān)聽(tīng)機(jī)制，使其可以呈現(xiàn)比較好看的動(dòng)態(tài)效果。
四.心得體會(huì)
空，非空，書(shū)中內(nèi)容并不是空洞的，只有動(dòng)手做了，才發(fā)現(xiàn)是這樣的。書(shū)中，總結(jié)的數(shù)十個(gè)字，可能濃縮著幾百行代碼。路漫漫其修遠(yuǎn)兮，吾將上下而求索。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Active控件問(wèn)題小結(jié)(附解決辦法)的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
JS實(shí)現(xiàn)的隨機(jī)排序功能算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)的隨機(jī)排序功能算法,結(jié)合具體實(shí)例形式分析了javascript常用的排序算法實(shí)現(xiàn)技巧,需要的朋友可以參考下2017-06-06
JavaScript實(shí)現(xiàn)Tab欄切換功能詳解
這篇文章主要介紹了JavaScript實(shí)現(xiàn)Tab欄切換的實(shí)現(xiàn)方式,是面向?qū)ο蟮膶?xiě)法，本文給大家分享詳細(xì)案例代碼，需要的朋友可以參考下2022-10-10
js+div實(shí)現(xiàn)文字滾動(dòng)和圖片切換效果代碼
這篇文章主要介紹了js+div實(shí)現(xiàn)文字滾動(dòng)和圖片切換效果代碼,涉及javascript鼠標(biāo)事件及頁(yè)面元素圖片滾動(dòng)效果實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
js實(shí)現(xiàn)移動(dòng)端圖片滑塊驗(yàn)證功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)移動(dòng)端圖片滑塊驗(yàn)證功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了JavaScript定時(shí)器原理,setTimeout()方法用于設(shè)置一個(gè)定時(shí)器，該定時(shí)器在定時(shí)器到期后執(zhí)行調(diào)用函數(shù),文章圍繞JavaScript定時(shí)器相關(guān)資料展開(kāi)以下內(nèi)容,需要的朋友可以參考一下2021-12-12
JavaScript清空數(shù)組元素的兩種方法簡(jiǎn)單比較
這篇文章主要介紹了JavaScript清空數(shù)組元素的兩種方法簡(jiǎn)單比較,羅列了幾種常見(jiàn)的情況javascript數(shù)組的方法,并且比較了其中的兩種常見(jiàn)方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
多種方法實(shí)現(xiàn)load加載完成后把圖片一次性顯示出來(lái)
如何一個(gè)load 加載完成后把圖片一次性顯示出來(lái)，下面有個(gè)不錯(cuò)的方法，希望對(duì)大家有所幫助2014-02-02
看代碼主要是用css控制div的顯示和div的顯示位置和式樣的代碼2008-06-06
javascript 實(shí)現(xiàn)的多瀏覽器支持的貪吃蛇webgame
兼容FF IE的javascript版貪吃蛇游戲，非常厲害的高手。2008-01-01