建站
咨詢
售后
建站咨詢
新聞中心
想套用一下前端的組件寫一個表單驗證的頁面，于是試了一下jQuery UI
官網(wǎng)的例子
首先把官網(wǎng)的例子貼上：
jQuery UI Dialog - Modal form
All form fields are required.
Existing Users:
Name
Email
Password
John Doe
john.doe@example.com
johndoe1
試了一下，一切都很美好。
From表單DIV的位置
首先看到CSS寫的很粗，比如第一條：
label, input { display:block; }直接就定義了所有l(wèi)abel和input標(biāo)簽的樣式?？粗鴅ody里是2個DIV，于是想把2個div外面再包一層div，像下面這樣：
然后所有的css樣式前面都加上自己的這個div，就不會和別的樣式?jīng)_突了，比如這樣：
#myui label, #myui input { display:block; }問題：修改后，模態(tài)框里的css樣式都沒有應(yīng)用上。比如lable和input沒有變成塊級標(biāo)簽，導(dǎo)致沒有換行
原因：這里 id="dialog-form" 這個div的位置變了，跑到了 id="myui" 這個div的外面了。造成這個情況的原因是，jQuery UI就是這么做的，把 id="dialog-form" 這個div挖出來，出來好之后append到一個位置，而默認(rèn)位置是 body 標(biāo)簽。
解決方法：知道原因后，修改css的寫法也是可以實現(xiàn)的。但是也是有方法按照原來想的那樣，讓 id="dialog-form" 這個div仍然放在 id="myui" 里面的。在dialog里加上一個 appendTo 參數(shù)，指定模態(tài)框要添加的位置，之前沒有指定就是默認(rèn)（body）：
dialog = $( "#dialog-form" ).dialog({
appendTo: '#myui',
autoOpen: false,
height: 400,
width: 350,
modal: true,
buttons: {
"Create an account": addUser,
Cancel: function() {
dialog.dialog( "close" );
}
},
close: function() {
form[ 0 ].reset();
allFields.removeClass( "ui-state-error" );
}
});實際有2個提交的按鈕
在提交表單之前，先要知道，實際這個例子中有2個按鈕可以用來提交的。其中一個隱藏了。
寫在form里的submit按鈕：
實際位置應(yīng)該是跑到屏幕外面去了。這里把style屬性去掉就能看到了。這個按鈕的作用是方便我們用鍵盤的回車鍵操作的。
另外jQuery UI幫我們生成的按鈕是在 dialog = $( "#dialog-form" ).dialog() 里用buttons屬性生成的，這里可以自定義以及添加更多的按鈕：
buttons: {
"Create an account": addUser,
Cancel: function() {
dialog.dialog( "close" );
}
},另外這里的確認(rèn)按鈕不是submit，而是觸發(fā)一個addUser進行表單驗證的方法。addUser里驗證通過后會生成前端的標(biāo)簽，在前端添加一行數(shù)據(jù)，但是submit提交。
表單無法提交
演示的代碼是一個純前端的實現(xiàn)，如果要提交到后端，那么就是在form標(biāo)簽里加上action屬性。然后先把submit按鈕的style屬性去掉，用submit先提交。
問題：后端收不到發(fā)來的請求
原因：前端阻止了submit事件的默認(rèn)操作，具體就是下面這句
form = dialog.find( "form" ).on( "submit", function( event ) {
event.preventDefault(); // 這句的意思就是取消事件的默認(rèn)操作
addUser();
});解決方法：這里直接把阻止的代碼注釋掉就好了
現(xiàn)在可以使用回車鍵進行submit提交了，但是確認(rèn)按鈕并不能提交
問題2：確認(rèn)按鈕不是submit
原因：這個按鈕綁定的是addUser，而addUser里也沒有submit提交
解決方法：把確認(rèn)按鈕的click綁定為觸發(fā)form的submit事件，這樣這個確認(rèn)按鈕的效果就和submit一樣了，而且submit里也是要先執(zhí)行addUser()進行驗證的。把 dialog = $( "#dialog-form" ).dialog() 里用buttons屬性改成了下面這樣，這個buttons的參數(shù)是可支持 Object 和 Array 兩種形式，這里我改用了Array的形式：
buttons: [
{text: "確認(rèn)", click: function () {
form.submit();
}},
{text: "取消", click: function () {
dialog.dialog('close');
}
}
],請求的表單內(nèi)容為空
現(xiàn)在后端可以收到請求了，但是收到的都是沒有值的空的請求。
問題：后端內(nèi)收到請求，但是請求的值都是空值
原因：前端在發(fā)送submit請求前，清空了表單的內(nèi)容。在 dialog = $( "#dialog-form" ).dialog() 里最后有一個close屬性，值是一個方法：
close: function() {
form[ 0 ].reset();
allFields.removeClass( "ui-state-error" );
}close屬性是在對話框關(guān)閉的時候要執(zhí)行的內(nèi)容，這里面清空了form表單的內(nèi)容。
具體步驟是，submit事件會首先觸發(fā)addUser()進行表單驗證。addUser()里面會先用 checkLength() 驗證長度，然后用 checkRegexp() 進行正則的驗證。如果驗證失敗會返回false組織之后事件的發(fā)生。如果驗證通過則會先執(zhí)行關(guān)閉模態(tài)框的操作：
dialog.dialog( "close" );這里就要關(guān)閉模態(tài)框了，然后返回true，之后才是執(zhí)行submit提交的動作。但是關(guān)閉模態(tài)框的時候，數(shù)據(jù)就清空了。服務(wù)的收到的就是被清空后的空表單發(fā)來的請求，并且是在通過了前端的數(shù)據(jù)驗證之后的。
解決方法：應(yīng)該可以先不關(guān)閉模態(tài)框，等submit提交之后再關(guān)閉。不過實現(xiàn)起來也不方便。表單清空的功能還是有用的，但是只要在下次打開前清空就好了。這里可以用一個open方法替代原來的close方法。
另外一個坑：官網(wǎng)的頁面里是有一個create方法的，本來想用這個的。但是發(fā)現(xiàn)沒有用，然后去源碼里找了一下(jquery-ui.js)：
$.widget( "ui.dialog", {
version: "1.12.1",
options: {
appendTo: "body",
autoOpen: true,
buttons: [],
classes: {
"ui-dialog": "ui-corner-all",
"ui-dialog-titlebar": "ui-corner-all"
},
closeOnEscape: true,
closeText: "Close",
draggable: true,
hide: null,
height: "auto",
maxHeight: null,
maxWidth: null,
minHeight: 150,
minWidth: 150,
modal: false,
position: {
my: "center",
at: "center",
of: window,
collision: "fit",
// Ensure the titlebar is always visible
using: function( pos ) {
var topOffset = $( this ).css( pos ).offset().top;
if ( topOffset < 0 ) {
$( this ).css( "top", pos.top - topOffset );
}
}
},
resizable: true,
show: null,
title: null,
width: 300,
// Callbacks
beforeClose: null,
close: null,
drag: null,
dragStart: null,
dragStop: null,
focus: null,
open: null,
resize: null,
resizeStart: null,
resizeStop: null
},上面的Callbacks應(yīng)該就是所有的方法了，并沒有create。然后才試的open。
優(yōu)化-調(diào)整模態(tài)框大小
還是這個生成模態(tài)框的函數(shù) dialog = $( "#dialog-form" ).dialog() ，里面的 height 和 width 屬性，可以設(shè)置模態(tài)框的默認(rèn)大小
問題：這里模態(tài)框有可能會出現(xiàn)滾輪
原因：模態(tài)框 id="dialog-form" 這個div里有這個樣式 overflow: auto ，所以溢出會出現(xiàn)滾動條。
解決方法：把overflow樣式覆蓋掉應(yīng)該就可以了，不過根本問題是溢出。我這里造成溢出的標(biāo)簽是form里的input標(biāo)簽。樣式是這樣的：
input.text { margin-bottom:12px; width:95%; padding: .4em; }這里我調(diào)整了 width 的寬度就好了。
優(yōu)化-直接隱藏模態(tài)框
例子中沒有這個情況，但是我用的時候頁面加載的時候會首先顯示出模態(tài)框，等加載完畢后模態(tài)框會隱藏掉。
問題：加載頁面的時候會有一瞬出現(xiàn)模態(tài)框
原因：因為我把js代碼的位置放到的最后，所以模態(tài)框的標(biāo)簽的代碼讀完的時候會顯示出來，等js代碼讀取完的時候才會隱藏
解決方法：應(yīng)該把生成模態(tài)框的js主要是 dialog = $( "#dialog-form" ).dialog() 方法提到前面就好了。不過我用了另外一個方法，給我的模態(tài)框的div標(biāo)簽加上了這個類：
jquery-ui.css 里，這個類是這樣的：
.ui-helper-hidden {
display: none;
}
就是簡單的隱藏掉，試過之后依然可以顯示出來。
修改后的版本
替換掉了模板語言的部分，我用的修改后的版本如下：
Title
請?zhí)顚懸陆ǖ慕M的名稱
用戶組列表：
id
群組名
備注
1
測試一
test1
2
測試2
test2
3
測試三
test3
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
文章名稱：jQueryUI模態(tài)表單瘋狂踩坑-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://www.dlmjj.cn/article/diejge.html
