2. 程式人生 > >JS實現表單內容驗證、阻止表單提交（onsubmit）

JS實現表單內容驗證、阻止表單提交（onsubmit）

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

onsubmit屬性只在 <form> 表單中使用。
onsubmit事件是當表單提交時進行相關JS操作的一個事件。
onsubmit事件會在表單中的確認按鈕被點選時發生。當該事件觸發的函式中返回false時，表單就不會被提交。

<!DOCTYPE html>
<html>
<head>
    <title>onSubmit</title>
    <script type="text/javascript">
        function check(){//function check(f)對應下面程式中的this。f代表表單資訊
 

            //var e = f.email.value;
            var e = document.myform.email.value;//可以直接用document獲取表單指定內容
            //document.write(e); 
            if(!/^\[email protected]\w+.\w+$/.test(e)){//JS中正則表示式的test方法用來驗證是否與該正則表示式匹配，匹配就返回true，不匹配就返回false
                alert("輸入格式不正確");
                f.email.focus();//將焦點定位到email框
 

                f.email.select();//選中框內全部內容
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
<form action="" method="post" name="myform" onsubmit="return check()">
<!--<form action="" method="post" name="myform" onsubmit="return check(this)">this就表示該表單-->
 

    EMAIL:<input type="text" name="email">
    <input type="submit" value="提交">
</form>
</body>
</html>

相關推薦

JS實現表單內容驗證、阻止表單提交（onsubmit）

onsubmit屬性只在 <form> 表單中使用。 onsubmit事件是當表單提交時進行相關JS操作的一個事件。 onsubmit事件會在表單中的確認按鈕被點選時發生。當該事件觸發的

S實現表單內容驗證、阻止表單提交（onsubmit）

onsubmit屬性只在 <form> 表單中使用。  onsubmit事件是當表單提交時進行相關JS操作的一個事件。  onsubmit事件會在表單中的確認按鈕被點選時發生。當該事件觸發的函式中返回false時，表單就不會被提交。 <!DOCTYPE h

JS實現最小生成樹之克魯斯卡爾（Kruskal）演算法

  克魯斯卡爾演算法列印最小生成樹： 　　構造出所有邊的集合 edges，從小到大，依次選出篩選邊列印，遇到閉環（形成迴路）時跳過。 JS程式碼： 1 //定義鄰接矩陣 2 let Arr2 = [ 3 [0, 10, 65535, 65535, 65535,

純js實現的serialize函式，序列化表單資料

jquery的serialize用起來很爽吧，可惜jquery用在移動端的話效率很低，因為專案原因需要用到此函式，所以自己寫了一個，程式碼有些冗餘請見諒 function nodeEach(list){ //將NodeList轉換為Array var arr

純js實現checkbox的全選、反選、全不選

純js實現checkbox的全選、反選、分開：a. 代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> &l

js實現復制內容到剪切板，兼容pc和手機端，支持Safari瀏覽器

阻止 sele doc length rev 鍵盤 編輯狀態 nts pconnect Javascript原生有一些事件：copy、paste、cut， 這些事件可以作用的目標元素： 　　能獲得焦點的元素 (如contentEditable內容能編輯或者可以選中的元素)，

js實現判斷輸入內容是否為數字

有時候需要根據輸入的內容來進行計算，這個時候就需要判斷輸入的內容是否是數字。JavaScript判斷輸入內容是否為數字的方法很多，接下來就來了解一下。 使用isNaN(x) 函式檢查其引數是否是非數字值，x是數字返回false，返回true表示非數字。（注意：當x為0的時候返回的也是true，所

js實現textarea根據內容大小自適應高度

首先，我們來看看原始碼： /** * 文字框根據輸入內容自適應高度 * @param                {HTMLElement}        輸入框元素 * @param                {Number}                設定游標

Layer.js實現表格溢位內容省略號顯示,懸停顯示全部

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格內容溢位省略號顯示</title>

js實現Excel檔案匯入匯出、利用 js-xlsx 實現 Excel 檔案匯入匯出-功能示例

1.匯入功能實現 下載js-xlsx到dist複製出xlsx.full.min.js引入到頁面中 然後通過FileReader物件讀取檔案利用js-xlsx轉成json資料 <!DOCTYPE html> <html> <head>

jquery結合js實現動態新增內容，並給動態新增的內容新增事件

jquery結合js實現向後臺傳送請求，給頁面動態新增內容，並給動態新增的內容新增事件.html內容如下： <button class="btn btn-md customButton" id="add_red_envelope">新增紅包&

Asp.net MVC 利用(aspose+pdfobject.js) 實現線上預覽word、excel、ppt、pdf檔案

線上預覽word、excel、ppt利用aspose動態生成html 主要程式碼 private bool OfficeDocumentToHtml(string sourceDoc, string saveDoc) { bool result = false;

一段js實現複製文字內容到剪下板（該方法相容所有瀏覽器~）

function copyUrl2() { var Url2=document.getElementById("biao1").innerText; var oInput = document.createElement('input'); oInpu

java實現詳細的身份證驗證、能正確驗證身份證正確性

IdCardExpUtil.java package com.javazs.util; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; import

js實現頁面展示內容多餘的用點代替

實現效果就是多餘的內容用三個點表示,然後點選檢視詳情彈出來一個模態框展示全部內容,實現過程就是下面程式碼裡的兩個js方法,再替換前把全部內容存入到陣列當中去,然後點選檢視詳情根據陣列下標獲取出對應的值.內容兩邊的div即style樣式必須加上.如果想使用模態框的話,匯入bootstrap的js和cs

JS實現瀏覽器的title閃爍、滾動、聲音提示、通知

通知 JS 實現瀏覽器的 title 閃爍、滾動、聲音提示、chrome、Firefox、Safari等系統通知。 這是重複造輪子...，標題閃爍、或者滾動提示，favicon數字顯示。開啟chrome瀏覽器除錯工具，按照下面截圖的方式放到除錯裡面呼叫一下，

webgl(three.js)實現室內定位,樓宇bim、實時定位三維視覺化解決方案

（寫在前面，談談物聯網展會）上次深圳會展中心舉行物聯網展會，到了展會一看，80%以上的物聯網應用都是在搞RFID，室內定位，我一度懷疑物聯網落地方案的方向侷限性與市場導向，後來多方面瞭解才明白，展會上看到的不能體現目前物聯網最前沿最廣泛的應用，很多大的企業與技術前沿企業沒有參與這樣的展會，一是不屑於參加，二是

Javascript控制回車鍵進行表單（form）提交（轉）

html urn enter text ctype ret put 焦點 cti 一、采用鉤子事件去捕獲 鍵盤事件有3個： keydown，keypress，keyup分別是按下，按著沒上擡，上擡鍵盤 。 $(document).keyup(function(ev

設計一個程序，有一個虛擬存儲區和內存工作區，實現下述三種算法中的任意兩種，計算訪問命中率（命中率=1-頁面失效次數/頁地址流長度）。附加要求：能夠顯示頁面置換過程。算法包括：先進先出的算法（FIFO）、最少使用算法（LFU）、最近未使用算法（NUR）

== oat 程序 表示 隊列 ini ++ 等待 進程 第一部分。。。 #include <cstdlib>#include<conio.h> #include<stdio.h>#include<stdlib.h>#incl

JavaWeb學習總結(十三)——使用Session防止表單重復提交（轉）

Coding etc pub submit exce sdf patch 傳輸 alt 　在平時開發中，如果網速比較慢的情況下，用戶提交表單後，發現服務器半天都沒有響應，那麽用戶可能會以為是自己沒有提交表單，就會再點擊提交按鈕重復提交表單，我們在開發中必須防止表單重復提交。