extjs表单验证(转载)
转载
- extjs表单验证
- //放在onReady的function(){}中
- Ext.QuickTips.init(); //为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息。
- Ext.form.Field.prototype.msgTarget='side'; //提示的方式,枚举值为
- qtip-当鼠标移动到控件上面时显示提示
- title-在浏览器的标题显示,但是测试结果是和qtip一样的
- under-在控件的底下显示错误提示
- side-在控件右边显示一个错误图标,鼠标指向图标时显示错误提示. 默认值.
- id-[element id]错误提示显示在指定id的HTML元件中
- 1.一个最简单的例子:空验证
- //空验证的两个参数
- 1.allowBlank:false//false则不能为空,默认为true
- 2.blankText:string//当为空时的错误提示信息
- js代码为:
- var form1 = new Ext.form.FormPanel({
- width : 350,
- renderTo : "form1",
- title : "FormPanel",
- defaults : {xtype:"textfield",inputType:"password"},
- items : [{
- id : "blanktest",
- fieldLabel : "不能为空",
- allowBlank : false,//不允许为空
- blankText : "不能为空"//错误提示信息,默认为This field is required!
- }]
- });
- 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验证,要求的格式是"langsin@gmail.com"
- 4.url //url格式验证,要求的格式是[url]
- 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 //此验证依然有效.不许为空.
- Ext.apply(Ext.form.VTypes,
- {
- daterange: function(val, field)
- {
- var date = field.parseDate(val);
- // We need to force the picker to update values to recaluate the disabled dates display
- var dispUpd = function(picker)
- {
- var ad = picker.activeDate;
- picker.activeDate = null;
- picker.update(ad);
- };
- if (field.startDateField)
- {
- var sd = Ext.getCmp(field.startDateField);
- sd.maxValue = date;
- if (sd.menu && sd.menu.picker)
- {
- sd.menu.picker.maxDate = date;
- dispUpd(sd.menu.picker);
- }
- }
- else if (field.endDateField)
- {
- var ed = Ext.getCmp(field.endDateField);
- ed.minValue = date;
- if (ed.menu && ed.menu.picker)
- {
- ed.menu.picker.minDate = date;
- dispUpd(ed.menu.picker);
- }
- }
- return true;
- },
- password: function(val, field)
- {
- if (field.initialPassField)
- {
- var pwd = Ext.getCmp(field.initialPassField);
- return (val == pwd.getValue());
- }
- return true;
- },
- passwordText: '两次输入的密码不一致!',
- chinese:function(val,field)
- {
- var reg = /^[/u4e00-/u9fa5]+$/i;
- if(!reg.test(val))
- {
- return false;
- }
- return true;
- },
- chineseText:'请输入中文',
- age:function(val,field)
- {
- try
- {
- if(parseInt(val) >= 18 && parseInt(val) <= 100)
- return true;
- return false;
- }
- catch(err)
- {
- return false;
- }
- },
- ageText:'年龄输入有误',
- alphanum:function(val,field)
- {
- try
- {
- if(!//W/.test(val))
- return true;
- return false;
- }
- catch(e)
- {
- return false;
- }
- },
- alphanumText:'请输入英文字母或是数字,其它字符是不允许的.',
- url:function(val,field)
- {
- try
- {
- if(/^(http|https|ftp):////(([A-Z0-9][A-Z0-9_-]*)(/.[A-Z0-9][A-Z0-9_-]*)+)(:(/d+))?//?/i.test(val))
- return true;
- return false;
- }
- catch(e)
- {
- return false;
- }
- },
- urlText:'请输入有效的URL地址.',
- max:function(val,field)
- {
- try
- {
- if(parseFloat(val) <= parseFloat(field.max))
- return true;
- return false;
- }
- catch(e)
- {
- return false;
- }
- },
- maxText:'超过最大值',
- min:function(val,field)
- {
- try
- {
- if(parseFloat(val) >= parseFloat(field.min))
- return true;
- return false;
- }
- catch(e)
- {
- return false;
- }
- },
- minText:'小于最小值',
- datecn:function(val,field)
- {
- try
- {
- var regex = /^(/d{4})-(/d{2})-(/d{2})$/;
- if(!regex.test(val)) return false;
- var d = new Date(val.replace(regex, '$1/$2/$3'));
- return (parseInt(RegExp.$2, 10) == (1+d.getMonth())) && (parseInt(RegExp.$3, 10) == d.getDate())&&(parseInt(RegExp.$1, 10) == d.getFullYear());
- }
- catch(e)
- {
- return false;
- }
- },
- datecnText:'请使用这样的日期格式: yyyy-mm-dd. 例如:2008-06-20.',
- integer:function(val,field)
- {
- try
- {
- if(/^[-+]?[/d]+$/.test(val))
- return true;
- return false;
- }
- catch(e)
- {
- return false;
- }
- },
- integerText:'请输入正确的整数',
- minlength:function(val,field)
- {
- try
- {
- if(val.length >= parseInt(field.minlen))
- return true;
- return false
- }
- catch(e)
- {
- return false;
- }
- },
- minlengthText:'长度过小',
- maxlength:function(val,field)
- {
- try
- {
- if(val.length <= parseInt(field.maxlen))
- return true;
- return false;
- }
- catch(e)
- {
- return false;
- }
- },
- maxlengthText:'长度过大',
- ip:function(val,field)
- {
- try
- {
- if((/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)/.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(val)))
- return true;
- return false;
- }
- catch(e)
- {
- return false;
- }
- },
- ipText:'请输入正确的IP地址',
- phone:function(val,field)
- {
- try
- {
- if(/^((0[1-9]{3})?(0[12][0-9])?[-])?/d{6,8}$/.test(val))
- return true;
- return false;
- }
- catch(e)
- {
- return false;
- }
- },
- phoneText:'请输入正确的电话号码,如:0920-29392929',
- mobilephone:function(val,field)
- {
- try
- {
- if(/(^0?[1][35][0-9]{9}$)/.test(val))
- return true;
- return false;
- }
- catch(e)
- {
- return false;
- }
- },
- mobilephoneText:'请输入正确的手机号码',
- alpha:function(val,field)
- {
- try
- {
- if( /^[a-zA-Z]+$/.test(val))
- return true;
- return false;
- }
- catch(e)
- {
- return false;
- }
- },
- alphaText:'请输入英文字母'
- });
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。