2. 程式人生 > >onsubmit校驗表單時利用ajax的return false無效解決方法

onsubmit校驗表單時利用ajax的return false無效解決方法

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

原來的程式碼

function checkNewEmail(){

             var re_email=new RegExp("\\[email protected]\\w+\\.\\w+\\.?\\w*");
             var newEmail=$("#email_new").val();
             if(re_email.test(newEmail)){
                 $.ajax({
                     type:"post",
                     dataType:"json",
                     url:"existEmail?email="+newEmail,
                     success:function(dataResult){
                         if(dataResult=="true"){
                             $("#emial-error").text("郵箱已註冊。");
                             return false;
                         }else{
                             return true;
                         }
                     }
                 });
             }else{
                 return false;
             }

         }

每次郵箱格式正確用ajax判斷郵箱是否已存在時，無論成功否都執行submit，卡了好久，網上找了好多，終於找到原因也解決方案了。

問題原因

執行ajax時return false的function 與onsubmit()不是同一個函式，所以無論return 什麼都會直接執行submit()提交表單

ok知道錯誤原因了之後修改一下程式碼

修改後程式碼

function checkNewEmail(){

            var flat=false;

            var re_email=new RegExp("\\[email protected]

\\w+\\.\\w+\\.?\\w*");
             var newEmail=$("#email_new").val();
             if(re_email.test(newEmail)){
                 $.ajax({
                     type:"post",
                     dataType:"json",
                     url:"existEmail?email="+newEmail,
                     success:function(dataResult){
                         if(dataResult=="true"){
                             $("#emial-error").text("郵箱已註冊。");
                             flat=false;

                         }else{
                             flat=true;
                         }
                     }
                 });
             }else{
                 return false;
             }

             return flat;

         }

修改之後再執行,可是每次執行完都return false,就好像flat=true,不起作用一樣，可是除錯了發現明明有執行flat=true

問題原因

在執行ajax時，async預設的預設值為true,這種情況為非同步方式，就是說ajax傳送請求後，在等待服務端返回的這個過程中，前臺會繼續執行ajax塊後面的指令碼，直到服務端返回正確的結果才會執行success,也就是說這時執行的是兩個執行緒，一個執行緒在執行ajax時另一個程序已經執行return flat了。所以一直返回false.把async改為false，這時才是同步方式，只有一個執行緒。

找到原因後，再修改一下程式碼，最終終於成功了。

最終程式碼

function checkNewEmail(){
             var flat=false;
             var re_email=new RegExp("\\[email protected]\\w+\\.\\w+\\.?\\w*");
             var newEmail=$("#email_new").val();
             if(re_email.test(newEmail)){
                 $.ajax({
                     type:"post",
                     dataType:"json",
                     async:false,//同步方式
                     url:"existEmail?email="+newEmail,
                     success:function(dataResult){
                         if(dataResult=="true"){
                             $("#emial-error").text("郵箱已註冊。");
                             flat=false;
                         }else{
                             flat=true;
                         }
                     }
                 });
             }else{
                 $("#emial-error").text("郵箱格式不正確。");
                 return false;
             }
             return flat;
         }

相關推薦

onsubmit校驗表單時利用ajax的return false無效解決方法

原來的程式碼 function checkNewEmail(){              var re_email=new RegExp("\\[email protected]\\w+\\.\\w+\\.?\\w*");              var ne

jQuery Validate 實現儲存時不校驗，提交時才校驗表單

                //儲存按鈕事件 function saveAction() {var form = $("#inputForm").find('.required');$.each(form, function(idx, item) {$(this).addClass('ignore');}

iview動態校驗表單，獲取值為undefined

場景：實際程式碼如下：https://run.iviewui.com/XPofr3YS 原因：在動態校驗名稱時，沒法獲取值，請教了大神後，發現原來是自己demo沒理清楚 這裡的prop="name"應該是動態的，從新梳理demo 解決：程式碼應

20181006：為什麼要使用form表單而不是直接用html模板？校驗表單是怎樣處理的？

使用者登入流程：在forms.py中自己定義定義loginform類（其中包含登陸的表單，比如賬號、密碼、提交按鈕等）→ views.py中路由控制跳轉到登陸頁面模板（在其中傳入form），使用者輸入了賬號、密碼後點擊“提交”按鈕後，前端、後端校驗完成後，跳轉到

js校驗表單資料

//新增驗證規則 jQuery.validator.addMethod("chcharacter",function (value, element) { var tel = /^[\一-\龥]+$/

JS校驗表單(包括電話，郵編，手機號等等)

function isMail(obj,str,allowNull) { var pattern = /^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; if(!isNo

使用者註冊介面js校驗+表單提示

// 使用者名稱 function YHMonblus(){ var username=document.getElementById("username"); // var reN =/^\d{6,18}$/; var re = /^[a-zA-

validate外掛校驗表單--自定義校驗,Ajax非同步校驗使用者名稱是否存在

1.所需要的外掛下載地址(放到js目錄下)https://pan.baidu.com/s/16KyrX16dzgGTIncho2WHmg2.引入庫<script src="js/jquery.validate.min.js" type="text/javascript"

Spring Boot構建的Web專案如何在服務端校驗表單輸入

本文首發於個人網站：Spring Boot構建的Web專案如何在服務端校驗表單輸入 這個例子用於演示在Spring Boot應用中如何驗證Web 應用的輸入，我們將會建立一個簡單的Spring MVC應用，來讀取使用者輸入並使用validation註解來檢查，並且當用戶輸入錯誤時，應用需要再螢幕上顯示錯誤

Spring Boot (一) 校驗表單重複提交

一、前言 在某些情況下，由於網速慢，使用者操作有誤(連續點選兩下提交按鈕)，頁面卡頓等原因，可能會出現表單資料重複提交造成資料庫儲存多條重複資料。 存在如上問題可以交給前端解決，判斷多長時間內不能再次點選儲存按鈕，當然，如果存在聰明的使用者能夠繞過前端驗證，後端更應該去進行攔截處理，下面小編將基於 Sprin

模態框提交表單不開啟新頁面的解決方法

用window.open方法開啟頁面是很慢的 但是用window.showModalDialog快很多 但是遇到一個問題，提交表單的時候，重新給我open了一個頁面出來 然後一陣百度Google 然後得到如下解決方案： 在你的模態框中加上如下js程式碼： <mce:sc

JavaWeb網上圖書商城完整項目--day02-4.regist頁面提交表單時對所有輸入框進行校驗

word except 繼承 stub jstl use cti bmi imp 1、現在我們要將table表中的輸入的參數全部提交到後臺進行校驗，我們提交我們是按照表單的形式提交，所以我們首先需要在table表外面添加一個表單 <%@ page lang

element-ui中利用resetFields()清空表單時的坑

先上圖： 在使用的過程中： 1. model中的欄位要和ref中的欄位對應上，model中的欄位也就是v-model中監聽的物件的欄位。 2. prop中的欄位要和v-model中的欄位對應上，這個四個欄位都是為了做驗證或重置使用 使用resetField

利用JS實現按鈕onclick提交表單時，按鈕無法響應問題

<%@page import="dao.library.com.UserDao"%> <%@page import="java.util.List"%> <%@page import="entity.library.com.User"%>

JS采用ActiveXObject實現用戶在提交表單時屏蔽敏感詞的功能

使用 安全 lag this 繼續 file oar dex body 本例中敏感詞ciku.txt放在C盤根目錄下,采用的ActiveXObject插件獲取本地文件內容。使用此插件不需網上下插件，直接用如下js代碼即可。 瀏覽器需修改interner安全選項的級別，啟用A

使用layer彈窗提交表單時判斷表單是否輸入為空

使用layer彈窗提交表單時判斷表單是否輸入為空 獲得 layer 檔案包後，解壓並將 layer 整個資料夾（不要拆分結構） 存放到你專案的任意目錄，使用時，只需引入 layer.js 即可 使用時一定他要先引入jq1.8，或者以上版本！！！ 下面是提交表單的實列

PHP中if(isset($_POST['Submit']))是什麼意思，php提交表單時判斷 if($_POST[submit])與 if(isset($_POST[submit])) 的區別

isset -- 檢測變數是否設定 判斷post過來的資料是否被提交過來，if(isset($_POST["submit"]){ echo "提交過來了"; }else { echo "submit is no come~"; }   if(isset($_

使用Ant Design的From表單時，出現 From getFieldDecorator undefined的問題

使用getFieldDecorator對元件內容進行onChange監聽時，出現From getFieldDecorator undefined錯誤提示，解決方案： （1）首先需要對類進行LoginFrom=Form.create({})(LoginFrame)封裝; （2）如果還提示相同錯

Ajax提交表單時獲取不到 KindEditor 內容

                         

基於Tomcat的JSP提交表單時亂碼

原因： Tomcat下面總是會把GET/POST過來的reqest.parameters以ISO8859-1來解碼，但中文系統下的瀏覽器的預設方式是以UTF-8提交發送請求的，而UTF-8、GB2312和iso8859-1的編碼方式不一樣，故導致取到的表單資料為不能識別的