前言
本章主要講extjs表單驗證方面，正好趁着周末多寫兩篇，一邊梳理之前用過的代碼，一邊就地取材補充相關方面的資料，算是溫習+補習吧 : )
系列
推薦
正文
一、資料
1.1. 表單提示的方式設定，如：
ext.form.field.prototype.msgtarget='side'
該設定為枚舉值：'qtip','side','title','under'
qtip：把滑鼠移動到控件就可以顯示提示資訊了，有點像設定了title的input标簽一樣的效果。
side：該方式用的比較多，控件右邊會出現紅底白色小圓感歎号圖示。
title：和qtip一樣，但是沒有邊框效果，就和普通設定了title的input标簽一樣。
under：會在控件的正下方擠出一行來顯示一個黃底黑色方形感歎号和錯誤資訊文字。
這裡不設定就是預設的qtip效果 ，注意這裡ext的版本是3.0正式版。
注意單獨的控件也有此屬性設定msgtarget。
1.2. 驗證方式
1.2.1 内置
1.2.1.1 預設
maxlength、minlength、allowblank(非空)、regex(正規表達式)
1.2.1.2 自定義
validator，具體用法可以看代碼部分，接受一個函數為參數。
1.2.2 vtype
1.2.2.1 預設
alpha 隻能輸入數字
alphanum 隻能輸入字母和數字
email emali驗證
url url驗證
1.2.2.2 自定義
二、代碼
這裡借用部落格園注冊界面來實作同樣的驗證功能（可能驗證效果不一樣）。
2.1 截圖
2.2 validatoradd.aspx
<%@ page language="c#" autoeventwireup="true" codefile="validatoradd.aspx.cs" inherits="validatoradd" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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();">模拟部落格園注冊</center>',
style: 'margin-left:auto;margin-right:auto;width:500px;margin-top:8px;',
//設定标簽對齊方式
labelalign: 'right',
//設定标簽寬
labelwidth: 170,
//設定按鈕的對齊方式
buttonalign:'center',
//[重要]預設元素屬性設定
defaults:{
width:180
,allowblank:false //不允許為空
,blanktext:'該項不能為空!' //顯示為空的錯誤資訊
},
items: [
//不能為空，字元數 >2 && <30
new textfield('txt_username','登入使用者名',null,null,[
['min',2,'使用者名過短，至少需要2個字元'],
['max',30]
])
//不能為空，字元數 >4 && <50
,new textfield('txt_pwd','密 碼',null,
[['inputtype','password'],
['id','txt_pwd1']],
[['min',4,'密碼至少需要4位字元'],
['max',50]]
),
new textfield('txt_confirm_pwd','确 認 密 碼',null,
[['inputtype','password']],
[['min',4,'至少需要4位字元'],
['max',50],
['val',function(){
//這裡注意了這裡注意了，如果是傳回true，表示驗證成功了
//傳回字元串，表示驗證失敗，且錯誤資訊為這個字元串
if(this.getrawvalue()!=null){
var txt_pwd = ext.get('txt_pwd1');
if(txt_pwd.getvalue() != this.getrawvalue())
return "請再輸入一遍密碼，要求與上面的一緻";
}
return true;
}]]
new textfield('txt_display_name','顯 示 名 稱',null,null,[
]),
//不能為空 :
new textfield('txt_email','郵 箱',null,null,[['vt','email']]),
new radiogroup('rbl_gender','性 别',[['男','1',true],['女','0']])
],
buttons: [{
text: "保 存"
,handler:function(){
//驗證所有表單元素
if(form1.form.isvalid()){
msginfo("開始表單送出！");
}
}
}, {
text: "取 消"
//重置表單項
form1.form.reset();
}]
});
});
</script>
</form>
</body>
</html>
代碼說明：
a). 注意defaults屬性，這個是非常有用的，常用于設定大部分(items裡面的控件的屬性)都有的屬性，控件也可以通過自行設定來覆寫這個預設設定。
b). 經過一輪封裝後代碼仍然稍長，難免有為了封裝而封裝，這個時候大家可以自行斟酌是否使用封裝控件還是直接使用ext的表單控件。
c). 特别需要注意在送出的時候需要加上if(form1.form.isvalid())，來進行全局驗證，因為前面的控件如果你不去觸發他(獲得光标一次)他是不會去驗證的！其他注意項可以參照文章稍後部分的注意。
2.3 easy-ext.js 修改部分，主要是對textfield進行擴充
//#region ext.form.textfield
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">預設值</param>
/// <param name="others">其他常用設定，格式如：[["width":100]]</param>
/// <param name="validators">驗證設定，格式如：[["maxlength":50],["maxlengthtext":'太長']]</param>
/// <returns>ext.form.textfield</returns>
var text = new ext.form.textfield();
if(fname!=null)
text.name = fname;
if(flabel!=null)
text.fieldlabel = flabel;
//設定預設值
if(defaultvalue != null)
text.setvalue(defaultvalue);
//設定其他常用設定
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
text.setheight(ovalue);
case "it":
case "inputtype"://radio, text, password, file (defaults to 'text')
if(typeof(okey) == "string" && typeof(ovalue) == "string")
text.inputtype = string(ovalue);
case "disabled"://boolean
if(typeof(okey) == "string" && typeof(ovalue) == "boolean")
text.disabled = boolean(ovalue);
case "ro":
case "readonly"://boolean
text.readonly = boolean(ovalue);
case "et":
case "emptytext"://string
text.emptytext = string(ovalue);
case "id":
text.id = ovalue;
}
}
}
//設定驗證條件
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)
return text;
}
//輔助textfield驗證用函數
function privatetextfieldvalidatorswitch(text,vkey,vvalue)
if(vkey!=null)
switch(vkey.tolowercase())
/*em:error message*/
/*- 最大字元數驗證 - */
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);
/*- 最小字元數驗證 - */
case "min":
case "minlength"://number
text.minlength = number(vvalue);
case "minem":
case "minlengthtext"://string
text.minlengthtext = string(vvalue);
/*- 正規表達式驗證 - */
case "rx":
case "regex":
text.regex = vvalue;
case "rxem":
case "regextext"://string
text.regextext = string(vvalue);
/*- 非空驗證 - */
case "ab":
case "allowblank":
if(typeof(vkey) == "string" && typeof(vvalue) == "boolean")
text.allowblank = boolean(vvalue);
case "abem":
case "blanktext":
text.blanktext = string(vvalue);
/*- 函數驗證 - */
case "val":
case "validator"://function
if(typeof(vkey) == "string" && typeof(vvalue) == "function")
text.validator = vvalue;
/*- 驗證事件 預設是keyup - */
case "ve":
case "validationevent":
text.validationevent = string(vvalue);
case "vt":
case "vtype":
text.vtype = string(vvalue);
//#endregion
代碼說明：
這裡再次強調一下，根據實際情況進行封裝，滿足大部分需求即可！這裡擴充了其他常用參數的設定和資料驗證的擴充，再這基礎之上大家可以很友善的加入其它擴充條件。
三、注意
下面都是寫例子或以前發覺的問題，收集如下：
1. 關于正規表達式驗證，如果regex屬性設定為帶雙(單)引号的字元串，将出現js錯誤！
錯誤寫法：‘/^\d/′正确寫法：/\d/′正确寫法：/\d/
2. 關于設定id後用ext.getcmp取不到的問題，改成用ext.get就可以取到了，取值用getvalue。這裡很是奇怪，直接設定id: xx1可以用getcmp去得到，通過設定屬性後就取不到了！！？
四、下載下傳
結束語
寫這系列的時候打算把表單就寫一篇文章裡面的，結果發覺太大，就拆成了兩篇，然後拆成三篇，現在隻能拆成四篇了，要講的東西太多，想盡量詳細一點，老實說也是邊寫邊查資料收集，難免有誤，大家諒解！
轉載：http://www.cnblogs.com/over140/archive/2009/09/20/1570457.html