根据下拉菜单选择的不同，动态改变输入框的验证罗比，比如：用户注册的时候，需要选择身份证、或者护照、或者驾驶证，然后输入对应的号码，此时就可以根据不同证件类型，动态改变输入框的验证逻辑。
<!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>;
扫一扫
363
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
