2. 程式人生 > >JavaScript實現簡單表單驗證

JavaScript實現簡單表單驗證

阿新 • • 發佈：2019-02-01

在我們進行註冊的時候，把滑鼠點進“請輸入帳號”的輸入框時，輸入框的旁邊會有提示資訊，提示我們要輸入的資訊格式，在我們輸入後滑鼠點進下一個輸入框時，已經填寫過的輸入框會對於我們填入的內容進行判斷，若不符合要求會提示我們重新輸入，大致如下圖所示:
這裡寫圖片描述

這裡寫圖片描述

上述功能的實現程式碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單驗證</title>
</head>
<body>

    <form
 
 action="" id="my">
        手機號: <input type="text" name="username"><span id="message"></span><br>
        密碼: <input type="password"><br>
        <input type="submit" value="註冊">
    </form>
    <script>
        //獲取表單資訊
        var content=document.getElementById('my'
 
);
        //獲取提示資訊內容
        var ts=document.getElementById('message');
        //定義變數存放手機號
        var val=null;
        //定義變數存放正則表示式
        var reg=null

        // onfocus 獲取焦點事件
        content.username.onfocus=function(){
            ts.innerHTML='請輸入11位有效手機號';
            ts.style.color='green';
        }

        //onblur 失去焦點事件
 

        content.username.onblur=function(){
            val=content.username.value;
            reg=/^1\d{10}$/;

            if(reg.test(val)){
                ts.innerHTML='手機號可用';
                ts.style.color='blue';
            }else{
                ts.innerHTML='手機號無效';
                ts.style.color='red';
            }
        }

        //onsubmit提交事件
        content.onsubmit=function(){
            if(!reg.test(val)){
                //預設取消操作
                return false;
            }
        }
    </script>

</body>
</html>

相關推薦

JavaScript實現簡單表單驗證

在我們進行註冊的時候，把滑鼠點進“請輸入帳號”的輸入框時，輸入框的旁邊會有提示資訊，提示我們要輸入的資訊格式，在我們輸入後滑鼠點進下一個輸入框時，已經填寫過的輸入框會對於我們填入的內容進行判斷，若不符合要求會提示我們重新輸入，大致如下圖所示: 上述功能

html5 實現的簡單表單驗證

平常我們做表單驗證的時候都是利用一些 js 庫或者自己去寫一些正則去匹配，最近看到 html5 裡面的 input 標籤上有一個 pattern 屬性裡面可以寫正則去驗證輸入框的內容，並且可以和:valid，:invalid 結合讓驗證視覺化，發現其實也可以用

練習：vue.js實現購物車+表單驗證

購物車 <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>購物車</title> <script src="../js/vue.js">

實現Vue表單驗證外掛

表單驗證存在於每一個後臺系統中，它承載了許多的邏輯以及狀態。但是，過於某些的場景，會導致程式碼臃腫，如何更好地梳理它，來解決開發的痛點。 1. 前言 上篇文章介紹了，如何函式式呼叫表單元件從而減少維護其狀態的方法基於Vue構造器建立Form元件的通用解決方案。現在來介紹下如何處理表單驗證問題，現

原生JavaScript實現form表單序列化的方法

當我們有form表單而且裡面的表單元素較多時，咱們總不能一個個去獲取表單元素內的值來進行拼接吧！這樣會很讓人蛋疼！為了方便與後臺互動並且提高自己的開發效率，並且不讓你蛋疼；我們一起用原生來寫一個表單序列化方法： 先介紹一下jquery中有相應的表單序列化的方法： 1.serializ

使用FormAuthenticationFilter中的重要方法實現了表單驗證

FormAuthenticationFilter有一個方法 protected boolean onAccessDenied(ServletRequest request, ServletResponse response) throws Exception {

javascript實現簡單使用者登入表單驗證功能

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <html> <head> <meta http-equiv="C

javascript中利用正則表示式實現表單驗證

    <html xmlns="http://www.w3.org/1999/xhtml">     <head>     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    

純H5+c3實現表單驗證

mail ida 網址 put 滿足 字段 address ini css3 客戶端驗證是網頁客戶端程序最常用的功能之一，我們之前使用了各種各樣的js庫來進行表單的驗證。HTML5其實早已為我們提供了表單驗證的功能。至於為啥沒有流行起來估計是兼容性的問題還有就是樣式太醜陋了

Java Script 第10章 JavaScript表單驗證

cnblogs ges scrip isp asc ima javascrip lock 分享 Java Script 第10章 JavaScript表單驗證

JavaScript表單驗證和正則表達式

sco 集合 innertext ner rep tell 一次 臨時 軟件 JavaScript表單驗證 分為四類： 　　1.非空驗證 　　　　常用於用戶名等 　　2.相等驗證 　　　　常用於驗證兩次輸入的密碼 　　3.範圍驗證 　　　　常用於年齡等　　

JavaScript表單驗證

號碼 網址 處理 漢字 dsm 嵌套 15位 使用 修正 匹配中文字符的正則表達式： [u4e00-u9fa5] 評註：匹配中文還真是個頭疼的事。有了這個表達式就好辦了 匹配雙字節字符(包含漢字在內)：[^x00-xff] 評註：能夠用來計算字符串的長度（一個雙字節字符長

用javascript實現簡單的用戶登錄驗證

-c turn get https 沒有 驗證 utf-8 .com head 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="

15個最佳的 JavaScript 表單驗證庫

就是 www. 信用卡 號碼 大型 端口 共享 魯棒性 max 客戶端驗證在任何項目都是不夠的，因為 JavaScript 可以直接忽略，人們可以提交請求到服務器。 然而這並不意味著客戶端驗證都沒必要了，很多時候我們需要在用戶提交到服務器之前給予提示。JavaScript

layer,Jquery,validate實現表單驗證，刷新頁面，關閉子頁面

名稱 ron primary ocl span () bsp money 新頁面 1、表單驗證 　　　　　　　　　　 //獲取父層 var index = parent.layer.getFrameIndex(window.na

JavaScript 表單驗證正則表達式大全

提取 ascii 需求 格式 mat 則表達式 位數 ava 英文字母 1 JavaScript 表單驗證正則表達式大全【轉載】 3 4 5 6 匹配中文字符的正則表達式： [u4e00-u9fa5] 7 評註：匹配中文還真是個頭疼的事，

簡單的jquery表單驗證

append 提交 ren pre img als pri button font <tr>

jquery簡單的表單驗證密碼

submit click log function func put jquer wid post <tbody> <tr> <td style="width:25%">修改密碼:</td>

JavaScript表單驗證登錄

inpu tex 後端服務 false asc 輸入 user var .get 　　在登錄時，通常是將輸入的信息原封不動的傳送給後端的處理程序，然後處理之後返回結果，那麽可能後端服務器的壓力就很大，所以可以先在提交表單之前進行一些簡單的檢測，然後再發給後端，減小服務器的一

javascript:正則表達式、一個表單驗證的例子

alt 來替 replace 組合 mail 優先 html javascrip get 閱讀目錄 本文內容： 正則表達式： 利用正則表達式進行表單驗證的例子： 回到頂部 本文內容： 正則表達式 正則表達式的使用方法 正則表達式的特殊匹配字符 正則表