EXTJS-6.2.0示例-Form表單動態改變驗證規則

時間 2019-12-21

標籤 extjs 6.2.0 示例 form 表單動態改變驗證規則欄目 HTML 简体版

原文原文鏈接

根據下拉菜單選擇的不一樣，動態改變輸入框的驗證羅比，好比：用戶註冊的時候，須要選擇身份證、或者護照、或者駕駛證，而後輸入對應的號碼，此時就能夠根據不一樣證件類型，動態改變輸入框的驗證邏輯。

<!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>;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。