• Ext表单验证



    //大家在很多的extjs代码中都看到了这两个,他们都起提示作用的
    Ext.QuickTips.init();//支持tips提示
    Ext.form.Field.prototype.msgTarget='side';//提示的方式,枚举值为"qtip","title","under","side",id(元素id)
    //side方式用的较多,右边出现红色感叹号,鼠标上去出现错误提示,其他的我就不介绍了,可自行验证
    //大家可以分别去掉这两行代码,看效果就会明白他们的作用,(放在onReady的function(){}中)

    //空验证的两个参数
    1.allowBlank:false//false则不能为空,默认为true
    2.blankText:string//当为空时的错误提示信息

    var form1 = new Ext.form.FormPanel({
    350,
    frame:true,
    renderTo:"form1",
    labelWidth:80,
    title:"FormPanel",
    bodyStyle:"padding:5px 5px 0",
    defaults:{150,xtype:"textfield",inputType:"password"},
    items:[
    {fieldLabel:"不能为空",
    allowBlank:false,//不允许为空
    blankText:"不能为空,请填写",//错误提示信息,默认为This field is required!
    id:"blanktest",
    anchor:"90%"
    }
    ]
    });

    2.用vtype格式进行简单的验证。
    items:[
    {fieldLabel:"不能为空",
    vtype:"email",//email格式验证
    vtypeText:"不是有效的邮箱地址",//错误提示信息,默认值我就不说了
    id:"blanktest",
    anchor:"90%"
    }
    你可以修改上面的vtype为以下的几种extjs的vtype默认支持的验证:

    //form验证中vtype的默认支持类型
    1.alpha //只能输入字母,无法输入其他(如数字,特殊符号等)
    2.alphanum//只能输入字母和数字,无法输入其他
    3.email//email验证,要求的格式是"longzeee@gmail.com"
    4.url//url格式验证,要求的格式是[url]http://www.google.com[/url]

    3.认密码验证(高级自定义验证)

    //先用Ext.apply方法添加自定义的password验证函数(也可以取其他的名字)
    Ext.apply(Ext.form.VTypes,{
    password:function(val,field){//val指这里的文本框值,field指这个文本框组件,大家要明白这个意思
    if(field.confirmTo){//confirmTo是我们自定义的配置参数,一般用来保存另外的组件的id值
    var pwd=Ext.getCmp(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%"
    }

     
  • 相关阅读:
    9.类与对象二----重载、值传递、可变个数形参
    1.数据库相关概念
    8.类与对象一举例
    7.类与对象一
    Educational Codeforces Round 91 (Rated for Div. 2) B. Universal Solution(思维)
    VS Code配置C++环境: Unable to start debugging. Unexpected GDB output from command报错
    Codeforces Round #655 (Div. 2) C. Omkar and Baseball(思维)
    Redis高可用,高性能,高并发
    .Net Core 中GC的工作原理
    大数据环境下该如何优雅地设计数据分层
  • 原文地址:https://www.cnblogs.com/longze/p/3298585.html
Copyright © 2020-2023  润新知