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

前言
　　 本章主要讲ExtJS表单验证方面，正好趁着周末多写两篇，一边梳理之前用过的代码，一边就地取材补充相关方面的资料，算是温习+补习吧 : )

系列
　　1.　　ExtJs 备忘录（1）—— Form表单（一） [ 控件使用 ]
　　2.　　ExtJs 备忘录（2）—— Form表单（二） [ 控件封装 ]
　　3.　　ExtJs 备忘录（3）—— Form表单（三） [ 数据验证 ]

推荐
　　1.　　ExtJS中表单验证使用自定义vtype示例 
　　2.　　ExtJs2.0学习系列(5)--Ext.FormPanel之第二式

正文
　　一、资料
　　　　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　　自定义
　　　　　　　　　　大家可以参考 ExtJS中表单验证使用自定义vtype示例

　　二、代码
　　　　这里借用博客园注册界面来实现同样的验证功能（可能验证效果不一样）。
　　　　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]]
                ),
                //不能为空，字符数  >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>

　　　　　　代码说明：
　　　　　　　　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
                        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

　　　　代码说明：
　　　　　　这里再次强调一下，根据实际情况进行封装，满足大部分需求即可！这里扩充了其他常用参数的设置和数据验证的扩充，再这基础之上大家可以很方便的加入其它扩充条件。

　　三、注意
　　　　下面都是写例子或以前发觉的问题，收集如下：
　　　　1.　　关于正则表达式验证，如果regex属性设置为带双(单)引号的字符串，将出现js错误！
　　　　　　错误写法：‘/^\d/′正确写法：/\d/′正确写法：/\d/
　　　　2.　　关于设置id后用Ext.getCmp取不到的问题，改成用Ext.get就可以取到了，取值用getValue。这里很是奇怪，直接设置id: xx1可以用getCmp去得到，通过设置属性后就取不到了！！？

　　四、下载
　　　　ExtJS2009-9-20(3)

结束语

　　写这系列的时候打算把表单就写一篇文章里面的，结果发觉太大，就拆成了两篇，然后拆成三篇，现在只能拆成四篇了，要讲的东西太多，想尽量详细一点，老实说也是边写边查资料收集，难免有误，大家谅解！

转载：http://www.cnblogs.com/over140/archive/2009/09/20/1570457.html

时间： 2024-12-22 00:47:41

ExtJs 备忘录（3）—— Form表单（三） [ 数据验证 ]的相关文章

extjs form表单绑定数据

问题描述 extjs form表单绑定数据 Ext.define('taskList' { extend: 'Ext.data.Model' fields: [ { name: 'TASK_ID' type: 'string' } { name: 'ITEM' type: 'string' } { name: 'INFO' type: 'string' } { name: 'MARK' type: 'int' } { name: 'EMPID' type: 'string' } { name:

js获取form表单所有数据的简单方法_javascript技巧

在HTML中用js获取通过GET.POST方法(就是在网址后加?a=b&c=d之类)传过来的表单值. 针对大家常用的获取表单方式,很多时候都是在重复的写一些代码,今天给大家贴出来的代码可以作为公用方法直接调用.可以提高大家的开发效率. Js代码 <script type="text/javascript"> //获取指定form中的所有的<input>对象 function getElements(formId) { var form = documen

extjs4-Extjs4.1可编辑的grid如何对输入数据进行验证？就像Form表单vtype那种验证。

问题描述 Extjs4.1可编辑的grid如何对输入数据进行验证?就像Form表单vtype那种验证. 使用的是CellEditing插件, 可编辑的grid在编辑的时候,通常希望能够对用户的输入进行控制而不是任由用户随心所欲的输入,如果输入非法内容则给予友好提示,这个怎么实现?

form 表单提交数据小记

form表单传统的提交方式,会跳转页面,需要做处理才行,可以在form上配置提交方式.提交地址,可以用submit.和button提交 <form id="formid" name= "myform" method = 'post' action = 'user_login_submit.action' onsubmit = "return checkUser();" > 其中checkUser返回false为不提交,你可以在chec

ext form 表单提交数据的方法小结_YUI.Ext相关

EXT的form表单ajax提交(默认提交方式)  复制代码 代码如下:  1. function login(item) {    2.    3. if (validatorForm()) {    4. // 登录时将登录按钮设为disabled,防止重复提交    5. this.disabled = true;    6.    7. // 第一个参数可以为submit和load    8. formPanl.form.doAction('submit', {    9.    10.

JSP表单自动数据验证组件简介

js|数据 从jsp到servlet或者action过程中还有很多需要处理的事情:数据有效性验证包括jsp页面的javascript验证和服务器端的验证.对文件上传的处理.文件上传大小的控制.防止二次提交.multipart form的非文件字段的处理.这些事情不属于jsp也不属于action,我们的开发人员会把这些事情直接在jsp里处理或者交给了action处理,当然如果采用了mvc框架来开发的话,有些mvc框架包含了对这部分的处理. 比较著名的有struts的formbean和webwork

form 表单提交问题-验证视图状态 MAC 失败

问题描述 关于form表单提交的问题<formid="form1"runat="server"action="TempFile.aspx"method="post"onsubmit="returncheck();">源代码:publicpartialclass_Default:System.Web.UI.Page{protectedvoidPage_Load(objectsender,Event

Html form 表单提交前验证

可以使用form表单的onsubmit方法,在提交表单之前,对表单或者网页中的数据进行检验. onsubmit指定的方法返回true,则提交数据:返回false不提交数据. 直接看下面的代码: 1 <HTML> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 </head> 5 <BODY>

Extjs优化(二)Form表单提交通用实现_extjs

复制代码 代码如下: /** * 提交表单 */ function $postForm(a) { if (a.formPanel.getForm().isValid()) { var b = a.scope ? a.scope: this; a.formPanel.getForm().submit({ scope: b, url: a.url, method: "post", params: a.params, waitMsg: "正在提交数据...", succe

基于BootstrapValidator的Form表单验证(24)_javascript技巧

Form表单进行数据验证是十分必要的,我们可以自己写JS脚本或者使用JQuery Validate 插件来实现.对于Bootstrap而言,利用BootstrapValidator来做Form表单验证是个相当不错的选择,两者完全兼容,我们也不用去关注CSS样式等美工效果. 0x01 引入BootstrapValidator 官网:BootstrapValidator,作为一个纯粹的使用者,我们可以在上面的链接处下载相关文件并引入,也可以利用CDN方式引入: <link href="//cd