JavaScript實現(xiàn)簡單表單驗證案例
更新時間：2022年08月25日 11:16:47 作者：無言月梧桐
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡單表單驗證案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)簡單表單驗證的具體代碼，供大家參考，具體內(nèi)容如下
一.需求分析
要實現(xiàn)的功能：
1.出現(xiàn)如下圖所示的內(nèi)容：（HTML和CSS完成）
2.對表單中的每一個表單項進(jìn)行校驗，使得文本框發(fā)生失去焦點事件后，校驗信息。（javascript完成）
3.點擊注冊功能后判斷每一個表單項是否正確，若全部正確才能提交，否則不能提交。（javascript完成）
二.具體實現(xiàn)
<!DOCTYPE html>
<html lang="ch">
<head>
? ? <meta charset="UTF-8">
? ? <title>注冊頁面</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 () {
? ? ? ? //校驗表單
? ? ? ? ? ? document.getElementById("form").onsubmit=function () {
? ? ? ? ? ? ? ? // return checkUsername()&&checkPassword()
? ? ? ? ? ? ? ?// return false;
? ? ? ? ? ? ? ? return checkUsesrname() &&checkPassword()&&checkEmail()&&checkTel();
? ? ? ? ? ? }
? ? ? ? ? ? //校驗用戶名checkUsername()
? ? ? ? ? ? document.getElementById("username").onblur=checkUsesrname;
? ? ? ? ? ? //校驗密碼checkPassword()
? ? ? ? ? ? document.getElementById("password").onblur=checkPassword;
? ? ? ? ? ? //校驗email
? ? ? ? ? ? document.getElementById("email").onblur=checkEmail;
? ? ? ? ? ? //校驗手機(jī)號
? ? ? ? ? ? document.getElementById("tel").onblur=checkTel;
? ? ? ? }
? ? ? ? function checkUsesrname() {//校驗用戶名
? ? ? ? ? ? //1.獲取用戶名
? ? ? ? ? ? var username = document.getElementById("username").value;
? ? ? ? ? ? //2.校驗標(biāo)準(zhǔn)（正則表達(dá)式）
? ? ? ? ? ? reg=/^\w{6,8}$/;
? ? ? ? ? ? //3.校驗
? ? ? ? ? ? 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="用戶名輸入錯誤";
? ? ? ? ? ? }
? ? ? ? ? ? //5.返回flag
? ? ? ? ? ? return flag;
? ? ? ? }
? ? ? ? function checkPassword(){//校驗密碼
? ? ? ? ? ? //1.獲取密碼
? ? ? ? ? ? var password = document.getElementById("password").value;
? ? ? ? ? ? //2.校驗標(biāo)準(zhǔn)（正則表達(dá)式）
? ? ? ? ? ? reg=/^\w{6,8}$/;
? ? ? ? ? ? //3.校驗
? ? ? ? ? ? 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="密碼輸入錯誤";
? ? ? ? ? ? }
? ? ? ? ? ? //5.返回flag
? ? ? ? ? ? return flag;
? ? ? ? }
? ? ? ? function checkEmail(){//校驗email
? ? ? ? ? ? //1.獲取email
? ? ? ? ? ? var email = document.getElementById("email").value;
? ? ? ? ? ? //2.校驗標(biāo)準(zhǔn)（正則表達(dá)式）
? ? ? ? ? ? reg=/\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
? ? ? ? ? ? //3.校驗
? ? ? ? ? ? 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="郵箱輸入錯誤";
? ? ? ? ? ? }
? ? ? ? ? ? //5.返回flag
? ? ? ? ? ? return flag;
? ? ? ? }
? ? ? ? function checkTel(){//校驗手機(jī)號
? ? ? ? ? ? //1.獲取手機(jī)號
? ? ? ? ? ? var tel = document.getElementById("tel").value;
? ? ? ? ? ? //2.校驗標(biāo)準(zhǔn)（正則表達(dá)式）
? ? ? ? ? ? reg=/0?(13|14|15|18|17)[0-9]{9}/;
? ? ? ? ? ? //3.校驗
? ? ? ? ? ? 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ī)號輸入錯誤";
? ? ? ? ? ? }
? ? ? ? ? ? //5.返回flag
? ? ? ? ? ? return flag;
? ? ? ? }
? ? </script>
</head>
<body>
<div class="rg_layout">
? ? <div class="rg_left">
? ? ? ? <p>新用戶注冊</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="請輸入用戶名"></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="請輸入密碼">
? ? ? ? ? ? ? ? ? ? ? ? </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="請輸入郵箱"></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="請輸入姓名"></td>
? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_left"><label for="tel">手機(jī)號</label></td>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_right"><input type="text" name="tel" id="tel" placeholder="請輸入手機(jī)號"></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="請輸入出生日期"></td>
? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_left"><label for="checkcode" >驗證碼</label></td>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="請輸入驗證碼">
? ? ? ? ? ? ? ? ? ? ? ? ? ? <img id="img_check" src="img/verify_code.jpg">
? ? ? ? ? ? ? ? ? ? ? ? </td>
? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? ? ? <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注冊"></td>
? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? </table>
? ? ? ? ? ? </form>
? ? ? ? </div>
? ? </div>
? ? <div class="rg_right">
? ? ? ? <p>已有賬號?<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á)到動態(tài)效果，再加上事件監(jiān)聽機(jī)制，使其可以呈現(xiàn)比較好看的動態(tài)效果。
四.心得體會
空，非空，書中內(nèi)容并不是空洞的，只有動手做了，才發(fā)現(xiàn)是這樣的。書中，總結(jié)的數(shù)十個字，可能濃縮著幾百行代碼。路漫漫其修遠(yuǎn)兮，吾將上下而求索。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Active控件問題小結(jié)(附解決辦法)的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了JS實現(xiàn)的隨機(jī)排序功能算法,結(jié)合具體實例形式分析了javascript常用的排序算法實現(xiàn)技巧,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了JavaScript實現(xiàn)Tab欄切換的實現(xiàn)方式,是面向?qū)ο蟮膶懛ǎ疚慕o大家分享詳細(xì)案例代碼，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了js+div實現(xiàn)文字滾動和圖片切換效果代碼,涉及javascript鼠標(biāo)事件及頁面元素圖片滾動效果實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)移動端圖片滑塊驗證功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了JavaScript定時器原理,setTimeout()方法用于設(shè)置一個定時器，該定時器在定時器到期后執(zhí)行調(diào)用函數(shù),文章圍繞JavaScript定時器相關(guān)資料展開以下內(nèi)容,需要的朋友可以參考一下2021-12-12
JavaScript清空數(shù)組元素的兩種方法簡單比較
這篇文章主要介紹了JavaScript清空數(shù)組元素的兩種方法簡單比較,羅列了幾種常見的情況javascript數(shù)組的方法,并且比較了其中的兩種常見方法,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
多種方法實現(xiàn)load加載完成后把圖片一次性顯示出來
如何一個load 加載完成后把圖片一次性顯示出來，下面有個不錯的方法，希望對大家有所幫助2014-02-02
看代碼主要是用css控制div的顯示和div的顯示位置和式樣的代碼2008-06-06
javascript 實現(xiàn)的多瀏覽器支持的貪吃蛇webgame
兼容FF IE的javascript版貪吃蛇游戲，非常厲害的高手。2008-01-01