1. 程式人生 > >JQueryEasyUI 表單驗證

JQueryEasyUI 表單驗證

1,介紹

使用EasyUI Form 的onSubmit 事件可以在客戶端表單提交之前進行驗證,只需在onSubimt事件中使用
 return $("#表單ID").form('validate') 方法即可 
 .form('validate')會自動對指定的表單中的required=true 的元素進行驗證,又不通過元素時,返回一個false

2,方法

方法名 引數值型別 描述
validate none 進行表單欄位驗證,當所有欄位均有效時返回true  該方法呼叫validatebox外掛驗證

3,語法

$("#表單ID").form("submit",{
            onSubmit: function(){
                return  $("#表單ID").form('validate');    
            }
        });


4,例項

   $(function () {
            DialongForm();

            //loadValidate();

            //獲取
            $("#btn").linkbutton({
                onClick: function () {
                    submit();
                }
            });
        });
        function DialongForm() {
            $("#validateboxFrm").dialog({
                title: '使用者驗證',
                width: 360,
                height: 300,
                modal: true
            });
        }
        //驗證方法2
        function loadValidate() {
            //姓名
            $("#xm").validatebox({
                required: true,
                missingMessage: "請輸入姓名"
            });
            //郵箱
            $("#yx").validatebox({
                required: true,
                missingMessage: "請輸入郵箱",
                validType: 'email',
                invalidMessage: "格式不對",

            });
            //輸入個人主頁
            $("#zy").validatebox({
                required: true,
                missingMessage: "請輸入主頁",
                validType: 'url',
                invalidMessage: "格式不對",
            });

            //輸入個人主頁
            $("#hz").validatebox({
                required: true,
                missingMessage: "請輸入護照資訊",
                validType: 'length[8,20]',
                invalidMessage: "有效長度8-20",
            });
        }
        //表單驗證
        function submit() {
            $("#form1").form("submit", {
                onSubmit: function () {
                    if ($("#form1").form('validate')) {
                        console.info("1");
                    }
                    else {
                        console.info("2");
                    }
                    return false;
                    //真實專案 返回 return $("#form1").form('validate')
                    ;
                }
            });
        }

<div  id="validateboxFrm">
         <form id="form1" runat="server">
             <table>
                 <tr>
                     <td>姓名:</td>
                     <td><input id="xm" name="xm" class="easyui-validatebox textbox" /></td>
                 </tr>
                  <tr>
                     <td>郵箱</td>
                     <td><input id="yx" name="yx" class="easyui-validatebox textbox" /></td>
                 </tr>
                  <tr>
                     <td>個人主頁</td>
                     <td><input id="zy" name="zy" class="easyui-validatebox textbox" /></td>
                 </tr>
                  <tr>
                     <td>護照</td>
                      <%-- 驗證方法1 --%>
                     <td><input id="hz" name="hz" class="easyui-validatebox textbox" /></td>
                 </tr>
             </table>
             <div>
                 <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">控制檯</a>
             </div>
         </form>
        </div>


相關推薦

JQueryEasyUI 驗證

1,介紹 使用EasyUI Form 的onSubmit 事件可以在客戶端表單提交之前進行驗證,只需在onSubimt事件中使用  return $("#表單ID").form('validate') 方法即可   .form('validate')會自動對指定的表單中的r

JQueryEasyUI 驗證驗證框(非空驗證

1,介紹  設計目的為了驗證輸入的表單欄位是否有效         如果無效,他將改變輸入框的背景顏色,並顯示警告圖示和提示資訊                  優點         1.包含很多內

純H5+c3實現驗證

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

驗證

java pwd word 用戶註冊 -1 style 字符 text date <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></

JaveWeb 公司項目(4)----- Easyui的驗證

過程 -- 目前 要求 今天 和數 希望 小項目 web 前面三篇博文講述的是界面的搭建和數據的傳輸,可以看出目前我做的這個小項目已經有了一個大體的雛形,剩下的就是細節部分的打磨和一些友好的人機交互設計,今天做的是表單的驗證,作為初學者,著實花了一番功夫,所以寫一篇博文將這

jQuery基礎(常用插件 驗證,圖片放大鏡,自定義對象級,jQuery UI,面板折疊)

此外 cookie值 添加圖標 tor 列表 需要 droppable 使用 ddn 1.表單驗證插件——validate 該插件自帶包含必填、數字、URL在內容的驗證規則,即時顯示異常信息,此外,還允許自定義驗證規則,插件調用方法如下: $(form).vali

第一篇,js驗證模板

scrip put func wrong lur ctype lan lang 執行 下面是對於一個email的表單驗證的基本模板<!DOCTYPE html><html lang="en"><head> <meta char

一個驗證

wrong spa 插件 position ava char email格式 box eth <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/

angular js h5關於驗證的例子

checked tro mis scrip att sta error 自定義 account angular js表單驗證 <!DOCTYPE html><html><head lang="en"> <meta charse

Java Script 第10章 JavaScript驗證

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

驗證的設計

解決方案 正則 wan 光有 做了 我只 cnblogs 提示 重要   不說廢話,直接留幹貨。實現的效果:多條表單提交的時候,如果某個表單的輸入不和格式要求,則提示對應的錯誤信息,所有表單的內容合適,則提交到後臺。顯示代碼(這裏的dom的結構不唯一,我只是在我實際的項目中

SpringBoot驗證

mage 驗證 log image 技術分享 img 不能 spring blog 需求:年齡在18歲以下的女生不能註冊 處理器中的寫法: 實體類中的寫法: SpringBoot表單驗證

驗證 靠name獲取

res 獲取 ems let nbsp jquer 手機 ear sub 表單 靠name獲取 <form class="add-form" name="form" action="#" method="post" autocomplete="on">

jq中的驗證插件------jquery.validate

此外 郵箱 method 你們 ostc [0 ade 使用 js代碼 今天我們來說一下表單驗證,有人說我們在進行表單驗證的時候使用正則來驗證是非常麻煩的,現在我來給大家介紹一下表單驗證的插件:jquery.validate.min.js 它是與jquery一起結合

JavaScript驗證和正則表達式

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

jquery validation驗證插件2。

back nbsp $() static 輸入 run hand get () <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

JavaScript驗證

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

驗證之正則表達式

cti 信用卡 for 整除 develop 虛擬 accep das 一位 1. 手機號驗證 經網絡查詢可知,中國三大運營商號碼波段主要有: (1). 移動號段: 134 135 136 137 138 139 147 150 151 152 157 158

easyui 之驗證

pla focus res default code font led disable function 1 /** 2 * 擴展easyui的validator插件rules,支持更多類型驗證 3 */ 4 $.extend($.fn.val

django form驗證

錯誤 mail 定義 lap hide else ren end blog 簡單例子: 1 #自定義驗證類 2 class Check_form1(forms.Form): 3 #user就是要驗證的字段,這裏對應前端name <inp