用vtype格式進行簡單的驗證。
在此舉郵件驗證的例子,重寫上面代碼的items配置:
items:[
{fieldLabel:"不能為空",
vtype:"email",//email格式驗證
vtypeText:"不是有效的郵箱位址",//錯誤提示資訊,預設值我就不說了
id:"blanktest",
anchor:"90%"
}
你可以修改上面的vtype為以下的幾種extjs的vtype預設支援的驗證:
//form驗證中vtype的預設支援類型
1.alpha //隻能輸入字母,無法輸入其他(如數字,特殊符号等)
2.alphanum//隻能輸入字母和數字,無法輸入其他
3.email//email驗證,要求的格式是"[email protected]"
4.url//url格式驗證,要求的格式是http://www.langsin.com
3.确認密碼驗證(進階自定義驗證)
前面的驗證都是extjs已經提供的驗證,我們也可以自定義驗證函數,比上面要複雜點了。我們一起做一個密碼确認的例子。
我們修改前面的代碼:
//先用Ext.apply方法添加自定義的password驗證函數(也可以取其他的名字)
Ext.apply(Ext.form.VTypes,{
password:function(val,field){//val指這裡的文本框值,field指這個文本框元件,大家要明白這個意思
if(field.confirmTo){//confirmTo是我們自定義的配置參數,一般用來儲存另外的元件的id值
var pwd=Ext.get(field.confirmTo);//取得confirmTo的那個id的值
return (val==pwd.getValue());
}
return true;
}
});
//配置items參數
items:[{fieldLabel:"密碼",
id:"pass1",
anchor:"90%"
},{
fieldLabel:"确認密碼",
id:"pass2",
vtype:"password",//自定義的驗證類型
vtypeText:"兩次密碼不一緻!",
confirmTo:"pass1",//要比較的另外一個的元件的id
anchor:"90%"
}
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZwpmLjRTZ1MTMwQWZ2UWOxMGM2QTOygzY0UWMvwVblRXavw1YpBnYh9CXmlWeu5WYk9CXt92YuUHZpFmYuM3b09GawlGavw1LcpDc0RHaiojIsJye.jpg)
以上部分轉載自 http://apps.hi.baidu.com/share/detail/34218609 以下部分為自己撰寫的例子: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ page language="java" pageEncoding="utf-8"%>
< %@include file="/commons/taglibs.jsp"%> <html>
<head>
<title>新增任務排程模闆</title>
< %@include file="/include_ext/ext-inc.jsp" %>
< %@include file="/include_ext/ext_util_dateformat.jsp" %>
< %@include file="/include_ext/ext_util_combobox.jsp" %>
< %@include file="/include_ext/ext_util_jsonstore.jsp" %>
<link rel="stylesheet" type="text/css" href="<%=contextPath%>/scripts/lovcombo/lovcombok.css" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="<%=contextPath%>/scripts/lovcombo/Ext.ux.form.LovCombo.js"></script> <script type="text/javascript">
<s:set name="terminal" value="terminal"/> Ext.QuickTips.init(); Ext.apply(Ext.form.VTypes, {
IPAddress: function(v) {
return /^/d{1,3}/./d{1,3}/./d{1,3}/./d{1,3}$/.test(v);
},
IPAddressText: 'IP位址不合法'
}); Ext.onReady(function() {
var objectId = new Ext.form.Hidden({
id : 'objectId',
name : 'terminal.objectId',
value : '<s:property value="#terminal.objectId"/>'
});
//這裡鍵值不能為整數,如果為整數則選擇第一項http探測終端的時候,送出時判斷是否為空的條件将會出問題
var cfgType = SimpleCombo([['0', 'http探測終端'],['1', 'windows探測終端'], ['2','短信探測終端']],'終端類型','terminal.cfgType',150);
cfgType.setValue('<s:property value="terminal.cfgType"/>');
var terminalName = new Ext.form.TextField({
fieldLabel : '終端名稱',
id : 'terminalName',
name : 'terminal.terminalName',
allowBlank : false,
blankText : '模闆名稱不能為空',
width : 150,
value : '<s:property value="#terminal.terminalName"/>'
});
var ip = new Ext.form.TextField({
fieldLabel : 'IP位址',
id : 'ip',
name : 'terminal.ip',
vtype: "IPAddress",
vtypeText: "IP位址不合法", //如果配置這個錯誤提示将顯示這個,否則顯示IPAddressText配置的内容
allowBlank : false,
blankText : 'IP位址不能為空',
width : 150,
value : '<s:property value="#terminal.ip"/>'
});
-------------------以下代碼省略---------------------------------------- 通過設定自己的驗證函數以及指定控件的vtype,就可以實作EXT的自動驗證了,上面的自定義函數部分 Ext.apply(Ext.form.VTypes, {
IPAddress: function(v) {
return /^/d{1,3}/./d{1,3}/./d{1,3}/./d{1,3}$/.test(v);
},
IPAddressText: 'IP位址不合法'
}); 可以放到ext-all.js中,以後使用的時候隻需要引入JS檔案即可使用了,不需要每個頁面都指定