ExtJs表单验证的方法总结

最新推荐文章于 2021-08-05 22:16:11 发布

转载最新推荐文章于 2021-08-05 22:16:11 发布 · 7.6k 阅读

本文详细介绍了表单验证的基本方式和如何实现高级验证，包括使用vtype属性进行字母、数字、邮箱和网址验证，以及如何通过正则表达式进行自定义验证。此外，还展示了如何创建和应用自定义验证方法来满足特定需求。

一、基本验证方式，使用vtype属性。

1.alpha只能输入字母，无法输入其他（如数字，特殊符号等）

2.alphanum只能输入字母和数字，无法输入其他

3.email验证，要求的格式是596005496@qq.com

4.url格式验证，要求的格式是http://www.baidu.com

二、其他方式验证。

1.验证最大最小输入字数。（Ext中maxLength和minLength不太管用！）

maxLength : 20,//允许输入的最大字符数
maxLengthText : "用户帐号最大长度不能超过20个字符！",//提示文本
minLength : 3, //允许输入的最少字符数
minLengthText : "用户帐号最小长度不能少于3个字符！",//提示文本

注意：中文字符不是两个字符，比如“你好”算2个字符。

2.正则表达式验证。

regex : /^(([0-9]+[a-zA-Z]+)|([a-zA-Z]+[0-9]+))$/,
regexText : "对不起，用户帐号只能输入字母和数字！",

三、vtype实现高级验证。

因为Extjs的vtype只实现了四种基本的验证方式，所有需要自己去创建新的验证方式。

在表单初始化时后面加入代码

Ext.apply(Ext.form.VTypes, {
     verifycustomer : function(value) {//验证方法名
        //验证方法
    }
});

设置控件的vtype属性为自定义的验证方法名和提示文本vtypeText属性。

vtype : "verifycustomer",
vtypeText : "对不起，客户账号已经存在！",

例如：

Ext.apply(Ext.form.VTypes,
{   // 年度必须是4位的验证
     numCheck : function(val, field){
        if(val.match(/\d/g).length != 4){
            return false;
            }
        return true;
    },
    numCheckText : '请输入4位数的年度！'
}

最后只要使用vtype : 'numCheck'即可。

实例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>validate.html</title>
      
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      
     <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
    <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext/ext-all.js"></script>
    <script type="text/javascript">
        Ext.onReady(function(){
            Ext.QuickTips.init();
            // 非空验证，通过allowBlank:false实现
            var name = new Ext.form.TextField(
                {
                name:"name",
                fieldLabel:"用户名",
                allowBlank:false,
                blankText:"用户名不能为空！",
                width:300,
                renderTo:document.body
                }
            );
              
            // 长度验证
            var pwd = new Ext.form.TextField(
                {
                    name:"pwd",
                    fieldLabel:"密码",
                    inputType:"password",
                    minLength:6,
                    maxLength:16,
                    minLengthText:"密码至少6位！",
                    maxLengthText:"密码最多16位！",
                    width:300,
                    renderTo:document.body,
                    allowBlank:false,
                    blankText:"密码不能为空！"
                }
            );
              
            // vtype验证。可以验证包含以下：1.字母和下划线(alpha)。2.字母、数字、下划线(alphanum)。3.邮箱(email)。4.网址(url)
            var url = new Ext.form.TextField(
                {
                    name:"url",
                    fieldLabel:"网址",
                    allowBlank:false,
                    blankText:"网址为必输项！",
                    vtype:"url",
                    vtypeText:"您的网址输入有误！",
                    width:300,
                    renderTo:document.body
                }
            );
              
            // 正则表达式验证
            var file = new Ext.form.TextField(
                {
                    name:"name",
                    fieldLabel:"Name",
                    width:300,
                    allowBlank:false,
                    blankText:"name字段不能为空！",
                    renderTo:document.body,
                    regex:/^w{8,}$/,//至少6个字符
                    invalidText:"请输入至少8这个字符！"
                }
            );
        });
</script>
  </head>
    
  <body>
      
  </body>
</html>