• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式:
    1:搜索微信号(888888
    2:扫描左侧二维码
  • 快捷导航
    福建二哥 门户 查看主题

    Extjs表单常见验证小结

    发布者: 福建二哥 | 发布时间: 2025-8-13 19:36| 查看数: 28| 评论数: 0|帖子模式

    //放在onReady的function(){}中
    Ext.QuickTips.init(); //为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息。
    Ext.form.Field.prototype.msgTarget='side'; //提示的方式,枚举值为:

    qtip-当鼠标移动到控件上面时显示提示;
    title-在浏览器的标题显示,但是测试结果是和qtip一样的;
    under-在控件的底下显示错误提示;
    side-在控件右边显示一个错误图标,鼠标指向图标时显示错误提示. 默认值;
    id-[element id]错误提示显示在指定id的HTML元件中

    1.一个最简单的例子:空验证

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

    js代码为:

    var form1 = new Ext.form.FormPanel({
    width:350,
    renderTo:"form1",
    title:"FormPanel",
    defaults:{xtype:"textfield",inputType:"password"},
    items:[
    {fieldLabel:"不能为空",
    allowBlank:false, //不允许为空
    blankText:"不能为空", //错误提示信息,默认为This field is required!
    id:"blanktest",
    }
    ]
    });

    2.用vtype格式进行简单的验证。
    在此举邮件验证的例子,重写上面代码的items配置:

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

    1.alpha //只能输入字母,无法输入其他(如数字,特殊符号等)
    2.alphanum//只能输入字母和数字,无法输入其他
    3.email//email验证,要求的格式是""
    4.url//url格式验证,要求的格式是http://www.baidu.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",
    },{
    fieldLabel:"确认密码",
    id:"pass2",
    vtype:"password",//自定义的验证类型
    vtypeText:"两次密码不一致!",
    confirmTo:"pass1",//要比较的另外一个的组件的id
    }

    4.使用正则表达式验证

    new Ext.form.TextField({
    fieldLabel : "姓名",
    name : "author_nam",
    regex : /[\u4e00-\u9fa5]/, //正则表达式在/...../之间. [\u4e00-\u9fa5] : 只能输入中文.
    regexText:"只能输入中文!", //正则表达式错误提示
    allowBlank : false //此验证依然有效.不许为空.

    来源:互联网
    免责声明:如果侵犯了您的权益,请联系站长(1277306191@qq.com),我们会及时删除侵权内容,谢谢合作!

    最新评论

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表