EXTJS-6.2.0示例-Form表单动态转变考证划定规矩

2023年3月7日 130次阅读 来源: 差点笨死

依据下拉菜单挑选的差别，动态转变输入框的考证罗比，比方：用户注册的时刻，须要挑选身份证、或许护照、或许驾驶证，然后输入对应的号码，此时就能够依据差别证件范例，动态转变输入框的考证逻辑。

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>form下拉菜单替换输入框的考证划定规矩</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/extjs/6.2.0/classic/theme-crisp/resources/theme-crisp-all.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/extjs/6.2.0/ext-all.js"></script>
    <script src="https://cdn.bootcss.com/extjs/6.2.0/classic/theme-crisp/theme-crisp.js"></script>
</head>

<body>
<script>
    Ext.apply(Ext.form.VTypes, {
        phone: function (v) {
            var isPhone = /^0(\d{2}|\d{3})\-(\d{6}|\d{7}|\d{8})$/;
            return isPhone.test(v);
        },
        phoneText: '电话号码花样不正确，请确认！',
        char: function (v) {
            return /^[A-Za-z]+$/.test(v);
        },
        charText: '只能输入大小写字母'
    });
    Ext.form.Field.prototype.msgTarget = 'under';
    Ext.application({
        name: 'luter',
        launch: function () {
            Ext.create('Ext.container.Viewport', {
                layout: 'form',
                items: [Ext.create("Ext.form.Panel", {
                    autoHeight: true,
                    border: false,
                    items: [{
                        xtype: 'combo',
                        displayField: 'name',
                        valueField: 'value',
                        fieldLabel: '你选啊',
                        labelAlign: 'right',
                        emptyText: '请挑选',
                        queryMode: 'local',
                        store: Ext.create("Ext.data.Store", {
                            fields: ["name", "value"],
                            data: [{
                                name: "电话",
                                value: 'phone'
                            }, {
                                name: "笔墨",
                                value: 'char'
                            }]
                        }),
                        listeners: {
                            change: function (combo, nv, ov) {
                                Ext.getCmp('input').setConfig({
                                    vtype: combo.getValue(),
                                    fieldLabel: combo.getRawValue(),
                                })
                            }
                        }
                    }, {
                        id: 'input',
                        labelAlign: 'right',
                        xtype: 'textfield',
                        fieldLabel: '输入...',
                        name: 'name'
                    }]
                })]
            })
        }
    })
</script>
</body>

</html>;
    原文作者：差点笨死
    原文地址: https://segmentfault.com/a/1190000012979558
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞