首先说明一下表单验证与其相关的一些设置
Ext.QuickTips.init(); //为组件提供提示信息功能,form的主要提示信息就是客户端验证的错误信息。
Ext.form.Field.prototype.msgTarget='side'; //指示错误出现的方式,包含的值为
qtip-当鼠标移动到控件上面时显示提示 //默认值为qtip,使用此种方式必须声明Ext.QuickTips.init(); 进行初始化
title-在浏览器的标题显示
under-在控件的底下显示错误提示
side-在控件右边显示一个错误图标,鼠标指向图标时显示错误提示. 默认值.
id-[element id]错误提示显示在指定id的HTML元件中
表单项的显示错误出现的方式也可以修改各项的msgTarget属性,如
- {
- xtype : 'textfield',
- fieldLabel : '姓名' ,
- name : 'name' ,
- allowBlank : false ,
- msgTarget : 'qtip'
- }
下面我们来看一下和表单验证相关的属性及他们验证的顺序
1、是否允许为空
allowBlank : Boolean //false则不能为空,默认为true
blankText : String//当为空时的错误提示信息
2、输入数据长度限制
minLength : Number
minLengthText : String
maxLength : Number
maxLengthText : String
3、使用vtype验证
vtype : String
vtypeText : String
extjs的vtype默认支持的验证有:
- alpha //只能输入字母,无法输入其他(如数字,特殊符号等)
- alphanum//只能输入字母和数字,无法输入其他
- email//email验证,要求的格式是"[email protected]"
- url//url格式验证,要求的格式是http://www.baidu.com
前面的验证都是extjs已经提供的,我们也可以自定义验证函数。
//先用Ext.apply方法添加自定义的password验证函数(也可以取其他的名字)
- Ext.apply(Ext.form.VTypes, {
- password : function(val, field) {
- if (field.confirmTo) {
- var pwd = Ext.get(field.confirmTo);
- return (val == pwd.getValue());
- }
- return true;
- }
- });
-
- items : [{
- fieldLabel : "密码",
- id : "pass1"
- }, {
- fieldLabel : "确认密码",
- id : "pass2",
- vtype : "password",
- vtypeText : "两次密码不一致!",
- confirmTo : "pass1"
- }];
下面是自定义了年龄验证
-
- Ext.apply(Ext.form.VTypes,{
- 'age' : function(_v){
- if(/^\d+$/.test(_v)){
- var _age = parseInt(_v);
-
- if(0 < _age && _age <100){
- return true ;
- }
- }
- return false ;
- },
- ageText : '年龄必须为数字,并且不能超过100岁,格式为23' ,
- ageMask:/[0-9]/i
- })
4、使用validator编写自定义函数验证
validator : Function
- {
- xtype : "numberfield",
- fieldLabel : "高",
- value : 150,
- width : 48,
- validator : function(value) {
- if(value =='1'){
- return '提示信息';
- }
- }
- return true;
- },
- name : "height"
- }
以下是自定义输入内容字节的验证
- {
- xtype : "field",
- fieldLabel : "姓名",
- value : 150,
- width : 48,
- validator : function(value) {
- var length = value.replace(/[^\x00-\xff]/g, "xx").length;
- if(length>1000){
- return '长度不能超过1000个字节,一个汉字字符为两个字节!';
- }
- return true;
- },
- name : "name"
- }
5、使用自己编写的正则表达式regex
regex : RegExp
regexText : String
- new Ext.form.TextField({
- fieldLabel : "姓名",
- name : "author_nam",
- regex : /[\u4e00-\u9fa5]/,
- regexText:"只能输入中文!",
- allowBlank : false