Ext简单验证

来源：互联网发布：外贸怎么做知乎编辑：程序博客网时间：2024/06/05 09:02

用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.langsin.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",
                anchor:"90%"
               },{
                fieldLabel:"确认密码",
                id:"pass2",
                vtype:"password",//自定义的验证类型
                  vtypeText:"两次密码不一致！",
                  confirmTo:"pass1",//要比较的另外一个的组件的id
                anchor:"90%"
               }

以上部分转载自http://apps.hi.baidu.com/share/detail/34218609

以下部分为自己撰写的例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ page language="java" pageEncoding="utf-8"%>
<%@include file="/commons/taglibs.jsp"%>

<html>
<head>
<title>新增任务调度模板</title>
<%@include file="/include_ext/ext-inc.jsp" %>
<%@include file="/include_ext/ext_util_dateformat.jsp" %>
<%@include file="/include_ext/ext_util_combobox.jsp" %>
<%@include file="/include_ext/ext_util_jsonstore.jsp" %>
<link rel="stylesheet" type="text/css" href="<%=contextPath%>/scripts/lovcombo/lovcombok.css" />
<script type="text/javascript" src="<%=contextPath%>/scripts/lovcombo/Ext.ux.form.LovCombo.js"></script>

Ext.QuickTips.init();

Ext.apply(Ext.form.VTypes, {
    IPAddress: function(v) {
        return /^/d{1,3}/./d{1,3}/./d{1,3}/./d{1,3}$/.test(v);
    },
    IPAddressText: 'IP地址不合法'
});

Ext.onReady(function() {
    var objectId = new Ext.form.Hidden({
    id : 'objectId',
    name : 'terminal.objectId',
    value : '<s:property value="#terminal.objectId"/>'
    });
    //这里键值不能为整数，如果为整数则选择第一项http探测终端的时候，提交时判断是否为空的条件将会出问题
var cfgType = SimpleCombo([['0', 'http探测终端'],['1', 'windows探测终端'], ['2','短信探测终端']],'终端类型','terminal.cfgType',150);
cfgType.setValue('<s:property value="terminal.cfgType"/>');

var terminalName = new Ext.form.TextField({
  fieldLabel : '终端名称',
  id : 'terminalName',
  name : 'terminal.terminalName',
  allowBlank : false,
  blankText : '模板名称不能为空',
  width : 150,
  value : '<s:property value="#terminal.terminalName"/>'
});

var ip = new Ext.form.TextField({
  fieldLabel : 'IP地址',
  id : 'ip',
  name : 'terminal.ip',
  vtype: "IPAddress",
  vtypeText: "IP地址不合法", //如果配置这个错误提示将显示这个，否则显示IPAddressText配置的内容
  allowBlank : false,
  blankText : 'IP地址不能为空',
  width : 150,
  value : '<s:property value="#terminal.ip"/>'
});
  -------------------以下代码省略----------------------------------------

通过设置自己的验证函数以及指定控件的vtype，就可以实现EXT的自动验证了，上面的自定义函数部分

Ext.apply(Ext.form.VTypes, {
    IPAddress: function(v) {
        return /^/d{1,3}/./d{1,3}/./d{1,3}/./d{1,3}$/.test(v);
    },
    IPAddressText: 'IP地址不合法'
});

可以放到ext-all.js中，以后使用的时候只需要引入JS文件即可使用了，不需要每个页面都指定