JavaScript實現(xiàn)簡單表單驗證案例
更新時間：2022年08月25日 11:16:47 作者：無言月梧桐
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單表單驗證案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)簡單表單驗證的具體代碼，供大家參考，具體內容如下
一.需求分析
要實現(xiàn)的功能：
1.出現(xiàn)如下圖所示的內容：（HTML和CSS完成）
2.對表單中的每一個表單項進行校驗，使得文本框發(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 ;
? ? ? ? ? ? /*設置邊框圓角*/
? ? ? ? ? ? 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;
? ? ? ? ? ? //校驗手機號
? ? ? ? ? ? document.getElementById("tel").onblur=checkTel;
? ? ? ? }
? ? ? ? function checkUsesrname() {//校驗用戶名
? ? ? ? ? ? //1.獲取用戶名
? ? ? ? ? ? var username = document.getElementById("username").value;
? ? ? ? ? ? //2.校驗標準（正則表達式）
? ? ? ? ? ? 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.校驗標準（正則表達式）
? ? ? ? ? ? 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.校驗標準（正則表達式）
? ? ? ? ? ? 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(){//校驗手機號
? ? ? ? ? ? //1.獲取手機號
? ? ? ? ? ? var tel = document.getElementById("tel").value;
? ? ? ? ? ? //2.校驗標準（正則表達式）
? ? ? ? ? ? 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="手機號輸入錯誤";
? ? ? ? ? ? }
? ? ? ? ? ? //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">手機號</label></td>
? ? ? ? ? ? ? ? ? ? ? ? <td class="td_right"><input type="text" name="tel" id="tel" placeholder="請輸入手機號"></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>三.總結
通過此案例，我大致掌握了靜態(tài)資源三劍客----HTML，CSS，JavaScript。
HTML：是一門超文本標簽語言，在靜態(tài)頁面中負責顯示頁面內容。
CSS：是一門標簽語言，在靜態(tài)頁面中負責內容樣式，使其頁面更加美觀。
JavaScript：是一門腳本語言，負責與HTML元素標簽進行交互，控制其屬性的變化，達到動態(tài)效果，再加上事件監(jiān)聽機制，使其可以呈現(xiàn)比較好看的動態(tài)效果。
四.心得體會
空，非空，書中內容并不是空洞的，只有動手做了，才發(fā)現(xiàn)是這樣的。書中，總結的數十個字，可能濃縮著幾百行代碼。路漫漫其修遠兮，吾將上下而求索。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了微信小程序中顯示倒計時，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
本文給大家總結了三種移動適配方案，具體哪三種感興趣的朋友可以通過本文詳細學習下2016-11-11
JavaScript和其它面向對象語言一樣，對象類型采用引用方式。持有對象的變量只是一個地址，而基本類型數據是值。當原型上存儲對象時，就可能有一些陷阱2013-12-12
這篇文章主要介紹了JavaScript代碼簡化技巧實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-09-09
這篇文章主要介紹了JavaScript實現(xiàn)輪播圖效果代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
vite添加環(huán)境變量import.meta.env的方法
在不同的文件里面配置不同的環(huán)境變量,可以讓我們的配置更加容易維護和使用,這里我們說下vite配置環(huán)境變量和模式是怎么配置的,對vite環(huán)境變量相關知識感興趣的朋友跟隨小編一起看看吧2023-10-10
JavaScript中字符串GBK與GB2312的編解碼示例講解
在瀏覽器JavaScript環(huán)境中,可以使用TextEncoder和TextDecoder?API?來進行?GBK?編碼和解碼,也可以使用?encodeURIComponent?函數對字符串進行編碼,最好使用第三方庫,比如iconv-lite來實現(xiàn)2023-12-12
在layui框架中select下拉框監(jiān)聽更改事件的例子
今天小編就為大家分享一篇在layui框架中select下拉框監(jiān)聽更改事件的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
創(chuàng)建一個新的用戶對象，接受一個有許多屬性的對象作為參數2009-12-12
下面小編就為大家?guī)硪黄狫S數組操作中的經典算法實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07