ExtJs 备忘录（3）—— Form表单（三） [ 数据验证 ]

Ext.form.Field.prototype.msgTarget = ' side '

<% @ 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 ]]
                ),
                 // 不能为空，字符数  >4 && <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 ;
                    }]]
                ),
                 // 不能为空，字符数  >2 && <30
                 new  TextField( ' txt_display_name ' , ' 显 示 名 称 ' , null , null ,[
                    [ ' min ' , 2 , ' 用户名过短，至少需要2个字符 ' ],
                    [ ' max ' , 30 ]
                ]),
                 // 不能为空 :
                 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:  " 取 消 "
                ,handler: function (){
                     // 重置表单项
                    form1.form.reset();
                }
            }]
        });
    });
     </ script >
     </ form >
</ body >
</ html >

// #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
                         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 ;
                }
            }
        }
    }
    
     // 设置验证条件
     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验证用函数
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);
                 break ;
             /* - 最小字符数验证 -  */
             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 ;
             /* - 正则表达式验证 -  */
             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 ;
             /* - 非空验证 -  */
             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 ;
             /* - 函数验证 -  */
             case   " val " :
             case   " validator " : // Function
                 if ( typeof (vkey)  ==   " string "   &&   typeof (vValue)  ==   " function " )
                    text.validator  =  vValue;
                 break ;
             /* - 验证事件 默认是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