ExtJS 验证

Extjs学习之Extjs验证
wenjianping 2009-12-7
首先要明确，验证的对象是什么呢？是表单，对使用系统的客户的输入进行限定。验证可以使用js提供的脚本来进行代码编写，但ext本身对表单进行了封装，并允许客户对其进行扩展，因此使用Extjs提供的验证能够大大简化验证判断。
1. Extjs错误信息提示方式
本来应该先写验证再写提示，但考虑到提示信息使用的相对简单性，在系统的js公共文件中初始化一次即可，因此将此提前。

在验证之前，先看下面两个语句：
Ext.QuickTips.init();//支持tips提示
Ext.form.Field.prototype.msgTarget= "qtip";//提示的方式，枚举值为"qtip","title","under","side",id(元素id)

在第一行中对提示信息进行初始化，第二行定义所有表单的Field域提示信息为"qtip"方式提示。Ext.form.Field.prototype表示将msgTarget定义到field域的原型上。因此在使用field域时属性msgTarget都已经初始化为"qtip"方式了。
"qtip"方式显示效果如下：

2. Extjs验证
1) 使用Extjs的regex指定验证的正则表达式，regexText指定验证不通过时的提示信息，如下：
items:{
id:"ipAddress",
name:"ipAddress",
xtype:'textfield',
fieldLabel:'IP地址',
allowBlank:true,//不允许为空
regex:/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
regexText:'必须是合适的IP地址',
anchor:'90%'
}
当使用的为非ip地址时，在错误提示信息中会提示regexText的值：'必须是合适的IP地址'。
2) 使用Extjs内置属性进行验证
Extjs内置allowBlank，maxlength,minlength等属性，可以对输入内容进行限制，如果不符合，会生成错误提示。如上一段代码中的allowBlank设置为false,则当输入内容为空时会生成错误提示。
3) 使用Vtype进行验证
Extjs内置了四种验证方式，如下：
//form验证中vtype的默认支持类型
1.alpha //只能输入字母，无法输入其他（如数字，特殊符号等）
2.alphanum//只能输入字母和数字，无法输入其他
3.email//email验证，要求的格式是"langsin@gmail.com"
4.url//url格式验证，要求的格式是http://www.langsin.com

items:{
id:" email",
name:"ipAddress",
xtype:'textfield',
fieldLabel:'email地址',
allowBlank:true,//不允许为空
vtype:"email",
vtypeText:'必须是合适的email地址2',
anchor:'90%'
}
当输入的内容不是正确的email地址时，会生成错误提示信息
4) 自定义Vtype扩展验证
①简单定义函数
自定义Vtype时，实际使用js语言，因此此部分是最大最广泛的，可以使用语言的任何特性。首先要扩展Ext.form.VTypes，然后在使用时调用扩展方法。如下：
Ext.apply(Ext.form.VTypes,
{
integer : function(val, field)
{
var exp = /^([1-9]\d{0,7}|0)$/;
return val.match(exp);
},
integerText : '您输入的必须为数字！',
其中val为文体框中的值，field 为文本框所在的组件；integer为定义的验证方法，integerText为默认的提示信息，在调用时可以通过指定vtypeText来覆盖此定义。
②定义验证函数及提示信息
Ext.apply(Ext.form.VTypes,
{
integer : function(val, field)
{
var exp = /^([1-9]\d{0,7}|0)$/;
field.vtypeText = '您输入的必须为数字！';//此处输入其他提示信息
return val.match(exp);
},
此处指定的vtypeText值是动态运行是设置的，会覆盖调用时指定的vtypeText值
③定义传值对象及组合验证
在ext的vtype中指定的方法是可以传入自定义参数。如下定义的验证方法:

Ext.apply(Ext.form.VTypes,
{

commonValidate : function(val,field)
{
var attr = field.vlist.split('$');//此处field.vlist即为定义的vlist
for(var i=0;i<attr.length;i++){
var functionName = attr[i];
if(!eval("Ext.form.VTypes."+functionName+"(val,field)")){
return eval("Ext.form.VTypes."+functionName+"(val,field)");
}
}
return true;
}
而在调用时如下:
items:{
xtype:'textfield',
fieldLabel:'单位名称',
lengthRange:{min:'0', max:'50'},// lengthRange中方法参数
vtype:'commonValidate',//调用commonValidtate方法
vlist:"lengthRange$specialChar",//传入方法参数
anchor:'90%'
}

如上调用，vlist为自定义的属性值（js语法决定可以直接在类中增加属性）,在vtype方法中通过field.vlist来获取传入值。而lengthRange方法又通过获取lengthRange中的值来获取参数
lengthRange : function(val, field)
{
var minLength = 0;
var maxLength = 100;
if (field.lengthRange)
{
minLength = field.lengthRange.min;
maxLength = field.lengthRange.max;
}
if (val.length < minLength || val.length > maxLength)
{
//定义此输入框的提示信息
if(minLength == 0)
{
field.vtypeText= "您输入的长度必须小于" + maxLength + "!";
}
else
{
field.vtypeText= "您输入的长度必须在" + minLength + "到" + maxLength + "之间!";
}
return false;
}
return true;
},


参考

{
xtype : "textfield",
name : 'UserName',
id: 'UserName',
allowBlank : false,
blankText : '注册用户名不能为空',
regex : /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){5,11}$/,
regexText : '用户名不合法(必须以字母开头,长度6-12位)!',//验证错误之后的提示信息
fieldLabel : '登录名',
emptyText : '填写用户名',
invalidText : '用户名已经被注册!',
width : 250,
validationEvent : 'blur',
validator : function(val) {
Ext.Ajax.request({
url : 'check.do?name='+ val,
method : 'post',
success : function(response,options){
var res = Ext.util.JSON.decode(response.responseText);
return (res.success);
}
})
}
}


参考

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:[
{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验证，要求的格式是"langsin@gmail.com"
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 //此验证依然有效.不许为空.