|
前言 本章主要講ExtJS表單驗(yàn)證方面,，正好趁著周末多寫兩篇，一邊梳理之前用過的代碼,，一邊就地取材補(bǔ)充相關(guān)方面的資料,，算是溫習(xí)+補(bǔ)習(xí)吧 : ) 系列 1. ExtJs 備忘錄（1）—— Form表單（一） [ 控件使用 ] 2. ExtJs 備忘錄（2）—— Form表單（二） [ 控件封裝 ] 3. ExtJs 備忘錄（3）—— Form表單（三） [ 數(shù)據(jù)驗(yàn)證 ] 推薦 1. ExtJS中表單驗(yàn)證使用自定義vtype示例 2. ExtJs2.0學(xué)習(xí)系列(5)--Ext.FormPanel之第二式 正文 一、資料 1.1. 表單提示的方式設(shè)置,，如： Ext.form.Field.prototype.msgTarget='side' 該設(shè)置為枚舉值：'qtip','side','title','under'qtip：把鼠標(biāo)移動(dòng)到控件就可以顯示提示信息了,，有點(diǎn)像設(shè)置了title的input標(biāo)簽一樣的效果。 side：該方式用的比較多,，控件右邊會(huì)出現(xiàn)紅底白色小圓感嘆號(hào)圖標(biāo),。 title：和qtip一樣，但是沒有邊框效果,，就和普通設(shè)置了title的input標(biāo)簽一樣,。 under：會(huì)在控件的正下方擠出一行來顯示一個(gè)黃底黑色方形感嘆號(hào)和錯(cuò)誤信息文字。 這里不設(shè)置就是默認(rèn)的qtip效果 ,，注意這里ext的版本是3.0正式版,。 注意單獨(dú)的控件也有此屬性設(shè)置msgTarget。 1.2. 驗(yàn)證方式 1.2.1 內(nèi)置 1.2.1.1 默認(rèn) maxLength,、minLength,、allowBlank(非空)、regex(正則表達(dá)式) 1.2.1.2 自定義 validator,，具體用法可以看代碼部分,，接受一個(gè)函數(shù)為參數(shù)。 1.2.2 vtype 1.2.2.1 默認(rèn) alpha 只能輸入數(shù)字 alphanum 只能輸入字母和數(shù)字 email emali驗(yàn)證 url url驗(yàn)證 1.2.2.2 自定義 大家可以參考 ExtJS中表單驗(yàn)證使用自定義vtype示例 二,、代碼 這里借用博客園注冊(cè)界面來實(shí)現(xiàn)同樣的驗(yàn)證功能（可能驗(yàn)證效果不一樣）,。 2.1 截圖  2.2 validatoradd.aspx  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www./1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <script type="text/javascript"> Ext.onReady(function() { Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'side'; var form1 = new Ext.FormPanel({ layout: 'form', collapsible: true, autoHeight: true, frame: true, renderTo: Ext.getBody(), title: '<center style="curor:hand" onclick="window.location.reload();">模擬博客園注冊(cè)</center>', style: 'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;', //設(shè)置標(biāo)簽對(duì)齊方式 labelAlign: 'right', //設(shè)置標(biāo)簽寬 labelWidth: 170, //設(shè)置按鈕的對(duì)齊方式 buttonAlign:'center', //[重要]默認(rèn)元素屬性設(shè)置 defaults:{ width:180 ,allowBlank:false //不允許為空 ,blankText:'該項(xiàng)不能為空!' //顯示為空的錯(cuò)誤信息 }, items: [ //不能為空，字符數(shù) >2 && <30 new TextField('txt_userName','登錄用戶名',null,null,[ ['min',2,'用戶名過短,，至少需要2個(gè)字符'], ['max',30] ]) //不能為空,，字符數(shù) >4 && <50 ,new TextField('txt_pwd','密 碼',null, [['inputtype','password'], ['id','txt_pwd1']], [['min',4,'密碼至少需要4位字符'], ['max',50]] ), //不能為空，字符數(shù) >4 && <50 new TextField('txt_confirm_pwd','確 認(rèn) 密 碼',null, [['inputtype','password']], [['min',4,'至少需要4位字符'], ['max',50], ['val',function(){ // //返回字符串,，表示驗(yàn)證失敗，且錯(cuò)誤信息為這個(gè)字符串 if(this.getRawValue()!=null){ var txt_pwd = Ext.get('txt_pwd1'); if(txt_pwd.getValue() != this.getRawValue()) return "請(qǐng)?jiān)佥斎胍槐槊艽a,，要求與上面的一致"; } return true; }]] ), //不能為空,，字符數(shù) >2 && <30 new TextField('txt_display_name','顯 示 名 稱',null,null,[ ['min',2,'用戶名過短，至少需要2個(gè)字符'], ['max',30] ]), //不能為空 : new TextField('txt_email','郵 箱',null,null,[['vt','email']]), new RadioGroup('rbl_Gender','性 別',[['男','1',true],['女','0']]) ], buttons: [{ text: "保 存" ,handler:function(){ //驗(yàn)證所有表單元素 if(form1.form.isValid()){ MsgInfo("開始表單提交,！"); } } }, { text: "取 消" ,handler:function(){ //重置表單項(xiàng) form1.form.reset(); } }] }); }); </script> </form> </body> </html> a). 注意defaults屬性,，這個(gè)是非常有用的,，常用于設(shè)置大部分(items里面的控件的屬性)都有的屬性,，控件也可以通過自行設(shè)置來覆蓋這個(gè)默認(rèn)設(shè)置。 b). 經(jīng)過一輪封裝后代碼仍然稍長(zhǎng),，難免有為了封裝而封裝,，這個(gè)時(shí)候大家可以自行斟酌是否使用封裝控件還是直接使用Ext的表單控件。 c). 特別需要注意在提交的時(shí)候需要加上if(form1.form.isValid()),，來進(jìn)行全局驗(yàn)證,，因?yàn)榍懊娴目丶绻悴蝗ビ|發(fā)他(獲得光標(biāo)一次)他是不會(huì)去驗(yàn)證的！其他注意項(xiàng)可以參照文章稍后部分的注意,。 2.3 easy-ext.js 修改部分,，主要是對(duì)TextField進(jìn)行擴(kuò)充 function TextField(fName,fLabel,defaultValue,others,validators) { /// <summary> /// Ext.form.TextField封裝 /// </summary> /// <param name="fName">name</param> /// <param name="fLabel">fieldLabel</param> /// <param name="defaultValue">默認(rèn)值</param> /// <param name="others">其他常用設(shè)置，格式如：[["width":100]]</param> /// <param name="validators">驗(yàn)證設(shè)置,，格式如：[["maxLength":50],["maxLengthText":'太長(zhǎng)']]</param> /// <returns>Ext.form.TextField</returns> var text = new Ext.form.TextField(); if(fName!=null) text.name = fName; if(fLabel!=null) text.fieldLabel = fLabel; //設(shè)置默認(rèn)值 if(defaultValue != null) text.setValue(defaultValue); //設(shè)置其他常用設(shè)置 if(others!=null) { for(var i = 0 ;i<others.length; i++) { if(others[i].length == 2) { var okey = others[i][0]; var oValue = others[i][1]; switch(okey.toLowerCase()) { case "width"://Number if(typeof(okey) == "string" && typeof(oValue) == "number") text.setWidth(oValue); break; case "height"://Number if(typeof(okey) == "string" && typeof(oValue) == "number") text.setHeight(oValue); break; case "it": case "inputtype"://radio, text, password, file (defaults to 'text') if(typeof(okey) == "string" && typeof(oValue) == "string") text.inputType = String(oValue); break; case "disabled"://Boolean if(typeof(okey) == "string" && typeof(oValue) == "boolean") text.disabled = Boolean(oValue); break; case "ro": case "readonly"://Boolean if(typeof(okey) == "string" && typeof(oValue) == "boolean") text.readOnly = Boolean(oValue); break; case "et": case "emptytext"://String if(typeof(okey) == "string" && typeof(oValue) == "string") text.emptyText = String(oValue); break; case "id": if(typeof(okey) == "string" && typeof(oValue) == "string") text.id = oValue; break; } } } } //設(shè)置驗(yàn)證條件 if(validators!=null) { for(var i = 0 ;i<validators.length; i++) { if(validators[i].length == 3) { var vkey = validators[i][0]; var vValue = validators[i][1]; var vText = validators[i][2]; privateTextFieldValidatorSwitch(text,vkey,vValue); privateTextFieldValidatorSwitch(text,vkey+"em",vText); } else if(validators[i].length == 2) { var vkey = validators[i][0]; var vValue = validators[i][1]; privateTextFieldValidatorSwitch(text,vkey,vValue); } } } return text; } //輔助TextField驗(yàn)證用函數(shù) function privateTextFieldValidatorSwitch(text,vkey,vValue) { if(vkey!=null) { switch(vkey.toLowerCase()) { /*em:Error Message*/ /*- 最大字符數(shù)驗(yàn)證 - */ case "max": case "maxlength"://Number if(typeof(vkey) == "string" && typeof(vValue) == "number") text.maxLength = Number(vValue); break; case "maxem": case "maxlengthtext"://String if(typeof(vkey) == "string" && typeof(vValue) == "string") text.maxLengthText = String(vValue); break; /*- 最小字符數(shù)驗(yàn)證 - */ case "min": case "minlength"://Number if(typeof(vkey) == "string" && typeof(vValue) == "number") text.minLength = Number(vValue); break; case "minem": case "minlengthtext"://String if(typeof(vkey) == "string" && typeof(vValue) == "string") text.minLengthText = String(vValue); break; /*- 正則表達(dá)式驗(yàn)證 - */ case "rx": case "regex": text.regex = vValue; break; case "rxem": case "regexText"://String if(typeof(vkey) == "string" && typeof(vValue) == "string") text.regexText = String(vValue); break; /*- 非空驗(yàn)證 - */ case "ab": case "allowblank": if(typeof(vkey) == "string" && typeof(vValue) == "boolean") text.allowBlank = Boolean(vValue); break; case "abem": case "blanktext": if(typeof(vkey) == "string" && typeof(vValue) == "string") text.blankText = String(vValue); break; /*- 函數(shù)驗(yàn)證 - */ case "val": case "validator"://Function if(typeof(vkey) == "string" && typeof(vValue) == "function") text.validator = vValue; break; /*- 驗(yàn)證事件 默認(rèn)是keyup - */ case "ve": case "validationevent": if(typeof(vkey) == "string" && typeof(vValue) == "string") text.validationEvent = String(vValue); break; case "vt": case "vtype": if(typeof(vkey) == "string" && typeof(vValue) == "string") text.vtype = String(vValue); break; } } } //#endregion 這里再次強(qiáng)調(diào)一下,，根據(jù)實(shí)際情況進(jìn)行封裝，滿足大部分需求即可,！這里擴(kuò)充了其他常用參數(shù)的設(shè)置和數(shù)據(jù)驗(yàn)證的擴(kuò)充,，再這基礎(chǔ)之上大家可以很方便的加入其它擴(kuò)充條件。 三,、注意 下面都是寫例子或以前發(fā)覺的問題,，收集如下： 1. 關(guān)于正則表達(dá)式驗(yàn)證，如果regex屬性設(shè)置為帶雙(單)引號(hào)的字符串,，將出現(xiàn)js錯(cuò)誤,！ 錯(cuò)誤寫法：‘/^\d 2. 關(guān)于設(shè)置id后用Ext.getCmp取不到的問題，改成用Ext.get就可以取到了,，取值用getValue,。這里很是奇怪，直接設(shè)置id: xx1可以用getCmp去得到,，通過設(shè)置屬性后就取不到了?。?？ |
|
|
