一、表单验证错误提示方式
Ext.QuickTips.init(); //为Ext组件提供提示信息功能
Ext.form.Field.prototype.msgTarget='side'; //指示错误出现的方式
qtip-当鼠标移动到控件上面时显示提示 //默认值为qtip,该方式须声明Ext.QuickTips.init(); 进行初始化
title-在浏览器的标题显示
under-在控件的底下显示错误提示
side-在控件右边显示一个错误图标,鼠标指向图标时显示错误提示. 默认值.
id-[element id]错误提示显示在指定id的HTML元件中
二、Extj自带验证方式
(1)基本方式
allowBlank : Boolean //控件是否为空
blankText : String//为空时提示信息
minLength : Number //最短长度
minLengthText : String
maxLength : Number
maxLengthText : String//最长长度
(2)正则表达式
{//联系人手机 fieldLabel : '联系人手机电话', xtype : 'textfield', width:'250px', emptyText : '请输入联系人手机号码', name : 'cellphone', allowBlank : false, blankText : '手机号码不能为空', minLength : 11, minLengthText : '联系人手机长度不得小于11个字符长度', regex : /^1(3|5|8)[0-9]{9}$/, regexText:'请输入正确的电话格式' },
(3)vtype方式
例如:Ext.form.VTypes中提供了几个常用的验证方式,上述控件中添加属性vtype:'email'也可以自己写验证。
(4)validator编写自定义函数验证validator : Function
例如:
{//邮箱地址 fieldLabel : '邮箱地址', xtype : 'textfield', emptyText : '请输入邮箱地址', name : 'email', id:'emailId', allowBlank : false, width:'250px', blankText : '邮箱地址不能为空', invalidText:'该邮箱已经被注册', validationEvent : 'blur', validator : function(){ Ext.Ajax.request({ url : 'checkRegEmail.do', params : {email:Ext.getCmp("emailId").getValue()}, scope : true, method : 'POST', callback : function(options,success,response){ if(success) { var data = eval(response.responseText); if(response.responseText=="true"){ returnValue(false); } else if(response.responseText=="false"){ returnValue(true); } } } }); function returnValue(ok){ IsExist = ok; } return IsExist; }//end_validator
上述第4中方式注意以下几点
(1)该验证使用的是同步请求,如果采用异步请求,Ext会不等待异步返回值,直接返回false,校验函数会一直返回false,
(2)returnValue函数的作用同样可保证验证函数在特定的时机内返回如validationEvent : 'blur',
(3)extjs3的同步请求方法见:http://lovezehui.iteye.com/admin/blogs/2065387