既定の検証規則に入力文字数チェックについて解説します。
概要
コントロールに入力値の長さが設定条件に満たすかどうかを検証するには、入力文字数チェックを使用できます。設定した文字数の条件に満たしていない場合は検証に失敗します。この検証規則が有効に動作する入力コントロールは以下の通りです。
コントロール
検証
GcTextBox
編集状態のテキストを検証します。
GcMultiLineTextBox
編集状態のテキストを検証します。
GcMask
編集状態のテキストを検証しますが、リテラル（例: “____”）は除外します。
GcComboBox
編集状態のテキストを検証します。
GcRichTextEditor
編集状態のテキストを検証します。
使用方法
ValidateType列挙型に以下のメンバーが追加されました。
検証規則
説明
必要パラメータ
EqualToInputLength
設定の文字数と一致するかどうかをチェック
inputLength
LessThanInputLength
設定した文字数に未満かどうかをチェック
inputLength
LessThanOrEqualToInputLength
設定した文字数以下かどうかをチェック
inputLength
GreaterThanInputLength
設定した文字数に超過かどうかをチェック
inputLength
GreaterThanOrEqualToInputLength
設定した文字数以上かどうかをチェック
inputLength
BetweenMinAndMaxLength
設定した最低文字数を超過、最大文字数に未満かどうかをチェック
inputMinLength、inputMaxLength
BetweenOrEqualToMinAndMaxLength
設定した最低文字数以上、最大文字数以下かどうかをチェック
inputMinLength、inputMaxLength
import '@mescius/inputman/CSS/gc.inputman-js.css';
import { InputMan } from '@mescius/inputman';
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
const gcTextBox1 = new InputMan.GcTextBox(
document.getElementById('gcTextBox1'),
{
text: 'あいうえお',
}
);
const gcTextBox2 = new InputMan.GcTextBox(
document.getElementById('gcTextBox2'),
{
text: 'あいうえ',
}
);
const gcTextBox3 = new InputMan.GcTextBox(
document.getElementById('gcTextBox3'),
{
text: 'あいうえ',
}
);
const gcTextBox4 = new InputMan.GcTextBox(
document.getElementById('gcTextBox4'),
{
text: 'あいうえお',
}
);
const gcTextBox5 = new InputMan.GcTextBox(
document.getElementById('gcTextBox5'),
{
text: 'あいうえお',
}
);
const gcTextBox6 = new InputMan.GcTextBox(
document.getElementById('gcTextBox6'),
{
text: 'あいう',
}
);
const gcTextBox7 = new InputMan.GcTextBox(
document.getElementById('gcTextBox7'),
{
text: 'あいうえおかき',
}
);
var validator;
const update = () => {
if (validator) {
validator.destroy();
}
validator = new InputMan.GcValidator({
items: [
{
control: gcTextBox1,
ruleSet: [
{
rule: InputMan.ValidateType.EqualToInputLength,
inputLength: 5,
successMessage: '5文字です',
failMessage: '5文字を入力してください',
},
],
validateWhen: InputMan.ValidateWhen.Typing,
},
{
control: gcTextBox2,
ruleSet: [
{
rule: InputMan.ValidateType.GreaterThanInputLength,
inputLength: 5,
failMessage: '5文字超に入力してください',
},
],
validateWhen: InputMan.ValidateWhen.Typing,
},
{
control: gcTextBox3,
ruleSet: [
{
rule: InputMan.ValidateType.GreaterThanOrEqualToInputLength,
inputLength: 5,
failMessage: '5文字以上に入力してください',
},
],
validateWhen: InputMan.ValidateWhen.Typing,
},
{
control: gcTextBox4,
ruleSet: [
{
rule: InputMan.ValidateType.LessThanInputLength,
inputLength: 5,
failMessage: '5文字未満に入力してください',
},
],
validateWhen: InputMan.ValidateWhen.Typing,
},
{
control: gcTextBox5,
ruleSet: [
{
rule: InputMan.ValidateType.LessThanOrEqualToInputLength,
inputLength: 5,
successMessage: '5文字以下です',
failMessage: '5文字以下に入力してください',
},
],
validateWhen: InputMan.ValidateWhen.Typing,
},
{
control: gcTextBox6,
ruleSet: [
{
rule: InputMan.ValidateType.BetweenMinAndMaxLength,
inputMinLength: 3,
inputMaxLength: 6,
failMessage: '3文字超、6文字未満に入力してください',
},
],
validateWhen: InputMan.ValidateWhen.Typing,
},
{
control: gcTextBox7,
ruleSet: [
{
rule: InputMan.ValidateType.BetweenOrEqualToMinAndMaxLength,
inputMinLength: 3,
inputMaxLength: 6,
failMessage: '3文字以上、6文字以下に入力してください',
},
],
validateWhen: InputMan.ValidateWhen.Typing,
}
],
defaultNotify: {
fail: {
tip: {
style: 'text',
direction: 'bottom',
position: 'start',
},
},
success: {
tip: {
style: 'flatpanel',
direction: 'bottom',
position: 'start',
},
},
},
});
validator.validate();
};
update();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>検証コントロール - 検証規則 - 既定の検証規則</title>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
window.onload = function() {
System.import('./src/app');
}
</script>
</head>
<body>
<div class="flexbox">
<div>
検証規則：5文字<br />
<input id="gcTextBox1" />
</div>
</div>
<br /><br />
<div class="flexbox">
<div>
検証規則：5文字超<br />
<input id="gcTextBox2" />
</div>
<div>
検証規則：5文字以上<br />
<input id="gcTextBox3" />
</div>
</div>
<br /><br />
<div class="flexbox">
<div>
検証規則：5文字未満<br />
<input id="gcTextBox4" />
</div>
<div>
検証規則：5文字以下<br />
<input id="gcTextBox5" />
</div>
</div>
<br /><br />
<div class="flexbox">
<div>
検証規則：3文字超、6文字未満<br />
<input id="gcTextBox6" />
</div>
<div>
検証規則：3文字以上、6文字以下<br />
<input id="gcTextBox7" />
</div>
</div>
</body>
</html>
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/inputman': 'npm:@mescius/inputman/index.js',
'@mescius/inputman/CSS': 'npm:@mescius/inputman/CSS',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
