html5 原生表單驗證+ajax 提交

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

html5 原生表單驗證 + ajax 提交無需任何第三方驗證框架通過pattern 和 oninvalid 屬性統一驗證表單。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <form action="#" method="post" onsubmit="return false">
            <input 
 type="text" name="mobile" id="mobile" placeholder="請輸入手機號碼"
        pattern="^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$"  oninvalid="validateIt(this,'手機號碼格式錯誤')" oninput="validateIt(this,'手機號碼格式錯誤')" required/>

            <input type="text" name="age" id="address"  placeholder="請輸入地址"
            pattern 
="^.{5,200}$"  oninvalid="validateIt(this,'地址不符合規範')" oninput="validateIt(this,'地址不符合規範')" required/>
            <button type="submit" id="submit" >提交</button>
        </form>

    </body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script 
>
       function validateIt(inputelement,errMsg){
          if(inputelement.validity.patternMismatch){
              inputelement.setCustomValidity(errMsg);
              }else{
              inputelement.setCustomValidity(''); //輸入內容符合驗證條件
           }
          return true;
        }
        $(function() {
    if ($("*:invalid") == 0) { // 如果驗證都通過
        $("#submit").submit(function() {
            $.ajax({
                type: "post",
                url: "你的地址",
                data: $("form").serialize(),
                async: true,
                success: function(data) {
                    alert(data);
                },
                dataType: "json" // json 格式的返回值
            });
        });

    }
});
    </script>

效果圖這裡寫圖片描述

html5 原生表單驗證+ajax 提交

html5 原生表單驗證 + ajax 提交無需任何第三方驗證框架通過pattern 和 oninvalid 屬性統一驗證表單。 <!DOCTYPE html> <html> <head>

amaze UI 如何添加原生表單驗證

func 初始化 req dset 無法加載 maxlength nbsp 驗證這段時間做的一個項目，整個系統就一個頁面，然後就是各種模態框，js裏拼HTML代碼，而且因為表單空留距離小，最後選定了amaze ui原生的表單驗證在amaze ui官網找到表單驗證。

BootstrapValidator表單驗證無法提交問題

用BootstrapValidator做表單驗證遇見點選submit和未執行action的情況，看網上都是加個點選事件，然後$("id").submit(),既繁瑣又不好用,幾經查詢發現BootstrapValidator驗證有給提交按鈕de 的屬性: submitButt

form表單的ajax提交【組裝json】

關鍵程式碼： /** * 將表單序列化然後轉換成json資料 */ var data = $("#editForm").serializeObject(); JSON.stringify(data); //java後臺解析 DesignPlan bean = (Desi

原生JS寫表單驗證提交功能

先上效果圖：表單的基礎內容就是暱稱判斷、手機號判斷、郵箱判斷、身份證號碼判斷，這裡是用到正則驗證檢驗格式。頁面的表單寫法就是一個form的提交。輸入框用input來實現，輸入內容用value來獲取

使用jquery validate和ajax進行表單驗證並向後臺提交資料

以前我都是在頁面中點選submit按鈕後提交給某個url一個post資料，使用validate後我們就可以使用html頁面和js來非同步的向後臺提交資料，具體程式碼如下 $("#form-product-add").validate({ rules : { tit

基於Ajax,非同步表單驗證，實現有一條件不滿足不能提交

1. 頁面關鍵程式碼  <div id="register_fa"> <div id="register_win"> <a class="close" href="javascript:clos

表單驗證的兩種方法-(原生JS和Html5)

原生JS的表單驗證 html部分 <form> <div> <label>使用者名稱：</label><input type="text" id="txtUsername"> &

工作中如何使用ajax提交form表單,包括ajax文件上傳

msu 包括需要 java tip ror 存儲 adf ucc 提供一種方法就是利用jquery.form.js，我們是和java對接的後臺。代碼如下： <input type="text" id="text1"> <input type="text

Java學習總計（二十六）——JavaScript正則表達式，Js表單驗證,原生js+css頁面時鐘

text 先來 helloword 郵箱用戶名就是 lac round 外部一．JavaScript正則表達式1.exec檢索字符串中指定的值，返回找到的值，並確定其位置2.test檢索字符串中指定的值，返回true或false3.正則表達式對象的創建：（1）方式一：

SpringMVC+AJAX登入表單驗證問題

畢業設計，使用springMVC+AJAX（jquery）實現登入表單驗證問題，將遇到的問題記錄下來 1 controller層可以接收到前臺請求引數，但是success和error都不執行無圖言叼這是js <script type="text/javascript">

django form表單驗證，使用Ajax提交併返回提示資訊（JSON傳遞資料）

直接上程式碼: HTML，由Form外掛自動生成input標籤 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ajax提交

HTML5+Javascript表單註冊和驗證練習

//html5.html <!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta c

非常好用的ajax表單驗證

MVC身份驗證.MVC過濾器.MVC6關鍵字Task,Async.前端模擬表單驗證,提交.自定義匿名集合.Edge匯出到Excel.BootstrapTree樹狀選單的全選和反選.bootstrap可搜尋可多選可全選下拉框

在寫這篇部落格之前要嘮叨幾句.本人已從事開發四年有餘.從前兩年的熱情如火.到現在的麻木.總感覺要像上突破.卻又不敢輕舉妄動. 沒事就寫點基礎程式碼.指點下新人吧 1.MVC身份驗證. 有兩種方式.一個是傳統的所有控制器繼承自定義Control，然後再裡面用MVC的過濾器攔截.所以每次網站的後臺被訪問時.