天天看點

Ext簡單驗證

用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%"

               }

Ext簡單驗證

以上部分轉載自 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檔案即可使用了,不需要每個頁面都指定

繼續閱讀