ajax實現提交時校驗表單方法_AJAX相關

來源:腳本之家  責任編輯:小易  

這個建議樓主直接去看JQuery的API文檔就可以了!已經說的很詳細了!www.anxorj.tw防采集請勿采集本網。

本文實例為大家分享了ajax提交時校驗表單的方法,供大家參考,具體內容如下

提交表單前進行驗證(方法一) first_name: input name=\"firstname\"type=\"text\"id=\"firstname\"/> label id=\"firstnameLabel\"></label></td> last_name: input name=\"lastname

方法一:

同樣可通過設置server.xml配置文件來實現。port=\"8080\"maxHttpHeaderSize=\"8192 maxThreads=\"150\"minSpareThreads=\"25\"maxSpareThreads=\"75 enableLookups=\"false\"redirectPort=\"8443\"acceptCount=\"100

代碼示例: 

看具體功能咯,不同的需求可以做不同的請求的,比如做頁面校驗的話當然可以提交表單到后臺驗證后返回并刷新界面,這里為了更好的用戶體驗,選擇ajax做異步的校驗無疑是更好的選擇!我現在就遇到

巧妙設計之處:ajax提交的話,不能夠進行校驗攔截,設置一個flag來判斷,很巧妙的設計之處,故收藏!

看一下控制臺和日志的Exception信息,textarea一般都要有長度的輸入校驗,因為一般存入數據庫時有最大長度

function inserts(){ var flag = checkForm(); if (flag == false) { return; } $.ajax({ //幾個參數需要注意一下 type: "POST",//方法類型 dataType: "json",//預期服務器返回的數據類型 url: "<%=path %>/soldier/inserts" ,//url data: $('#form1').serialize(), success: function (data) { alert(data.msg); window.location.reload(true); }, error : function() { alert(data.msg); } }); } function checkForm(){ var name = $("#name").val(); if (name.trim() == '') { alert("請輸入姓名!"); $("#name").focus(); return false; } var sex = $("#sex").val(); if (sex.trim() == '') { alert("請輸入性別!"); $("#sex").focus(); return false; } else if (sex.trim() != '男' && sex.trim() != '女') { alert("請輸入合法性別!"); $("#sex").val(''); $("#sex").focus(); return false; } var age = $("#age").val(); if (age.trim() == '') { alert("請輸入年齡!"); $("#age").focus(); return false; }else if(age.trim()==0 || age.trim()<=0 || age.trim()>150){ alert("請輸入合法年齡!"); $("#age").focus(); return false; } var politics_sstatus = $("#politics_sstatus").val(); if (politics_sstatus.trim() == '') { alert("請輸入政治面貌!"); $("#politics_sstatus").focus(); return false; } var tel = $("#tel").val(); if (tel.trim() == '') { alert("請輸入聯系電話!"); $("#tel").focus(); return false; }else if(tel.length<11 || tel.length>11){ alert("請輸入合法聯系電話!"); $("#tel").focus(); return false; } var id_card = $("#id_card").val(); if (id_card.trim() == '') { alert("請輸入身份證號碼!"); $("#id_card").focus(); return false; }else if(id_card.length<18 ||id_card.length>18){ alert("請輸入合法身份證號碼!"); $("#id_card").focus(); return false; } var appeal = $("#appeal").val(); if (appeal.trim() == '') { alert("請輸入主要訴求!"); $("#appeal").focus(); return false; } return true; }

AJAX異步校驗表單輸入的用戶名的實現。jsp中的ajax校驗是放在js中做的,如下: function init(){ document.getElementById(\"username\").focus();} function validate(userfield){ if(trim

頁面效果:

 方法二:

這是一個登陸的ajax校驗

代碼示例:

頁面的提交按鈕:

<input type="button" id="loginsubmit" value="登錄" />

 js邏輯:

分析:當用戶點擊按鈕的時候,會

<script type="text/javascript"> var redirectUrl = "${redirect}"; var LOGIN = { /* 3、進行賬號密碼的校驗 */ checkInput:function() { if ($("#loginname").val() == "") { alert("用戶名不能為空"); $("#loginname").focus(); return false; } if ($("#nloginpwd").val() == "") { alert("密碼不能為空"); $("#nloginpwd").focus(); return false; } return true; }, /* 4、進行登錄 1.當賬號密碼校驗不為空的時候進行后臺校驗 */ doLogin:function() { $.post("/user/login", $("#formlogin").serialize(),function(data){ if (data.status == 200) { alert("登錄成功!"); if (redirectUrl == "") { location.href = "http://localhost:8082"; } else { location.href = redirectUrl; } } else { alert("登錄失敗,原因是:" + data.msg); $("#loginname").select(); } }); }, /* 2、進行登錄校驗 */ login:function() { if (this.checkInput()) { this.doLogin(); } } }; /* 1、頁面初始化的時候校驗表單的數據 1.當用戶點擊登錄的時候,綁定一個click事件 2.調用LOGIN對象的login方法,進行賬號密碼校驗 */ $(function(){ $("#loginsubmit").click(function(){ LOGIN.login(); }); });</script>

效果圖:

onError后面函數再添加一句阻止提交數據的代碼試試內容來自www.anxorj.tw請勿采集。


  • 本文相關:
  • 零基礎學習ajax之制作自動校驗的表單
  • 淺析onsubmit校驗表單時利用ajax的return false無效問題
  • 利用 linq+jquery+ajax 實現異步分頁功能可簡化帶寬壓力
  • 如何成為ajax高手
  • ajax 支持搜索引擎問題分析
  • 各種ajax方法的使用比較詳解
  • ajax請求成功后打開新窗口地址
  • ajax中瀏覽器的緩存問題解決方法
  • ajax分頁查詢詳解
  • 基于ajax+div的“左邊菜單、右邊內容”頁面效果實現
  • 分享ajax創建簡單實例代碼
  • ajax驗證用戶的唯一性
  • 試用jQuery formValidator表單校驗完用AJAX提交
  • Jquery ajax提交表單幾種方法詳解
  • 表單校驗,并提交校驗問題(求解決)?
  • bootstrap 表單驗證FormValidation ajax提交后怎么恢復初始狀態
  • jquery在表單提交前有幾種校驗方法
  • servelet+ajax 校驗用戶是否存在。 servelet 獲取ajax提交的值亂碼。 用了很多網上的方法,無效。
  • ajax提交數據
  • jQuery Ajax 提交表單內容多就出現500 Internal Server Erro
  • AJAX異步表單驗證用戶名是否存在(jsp+sevlet實現)
  • thinkPHP3.2.3利用Ajax前臺實現驗證碼驗證,但通過form表單的按鈕提交后,驗證碼一直錯誤!如何解決?
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全javascriptasp.netphp編程ajax相關正則表達式asp編程jsp編程編程10000問css/htmlflex腳本加解密web2.0xml/rss網頁編輯器相關技巧安全相關網頁播放器其它綜合dart首頁ajax相關零基礎學習ajax之制作自動校驗的表單淺析onsubmit校驗表單時利用ajax的return false無效問題利用 linq+jquery+ajax 實現異步分頁功能可簡化帶寬壓力如何成為ajax高手ajax 支持搜索引擎問題分析各種ajax方法的使用比較詳解ajax請求成功后打開新窗口地址ajax中瀏覽器的緩存問題解決方法ajax分頁查詢詳解基于ajax+div的“左邊菜單、右邊內容”頁面效果實現分享ajax創建簡單實例代碼ajax驗證用戶的唯一性jquery ajax 向后臺傳遞數組參數ajax readystate的五種狀態詳解ajax中的async屬性值之同步和異步jquery實現ajax定時刷新局部頁面ajax傳遞多個參數具體實現jquery ajax中使用serialize()方ajax獲取數據中文亂碼問題最簡單自己動手打造ajax圖片上傳(網上沒ajax 緩存問題的兩種解決方法(ieajax獲取數據然后顯示在頁面的實用ajax技術實現在自己blog上聚合并顯示朋iframe實現ajax文件上傳效果示例ajax的簡單實用實例代碼asp小偷程序如何利用xmlhttp實現表單的提ajax 設置access-control-allow-origin實ajax實現輸入框文字改變展示下拉列表的效一個ajax類ajax跨域請求數據的四種方法(實例講解)jquery ajax 向后臺傳遞數組參數示例ajax中設置contenttype: "application/js
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.anxorj.tw All Rights Reserved
    陕西快乐10分下载