0

名前、体重、身長の 3 つの値を取るフォームを作成しようとしています。ユーザーに文字ではなく数字のみを入力させたいので、 isNumeric を使用するとこれは機能しますが、高さではなく重量に対してのみ機能します。

これが現在のコードです

<script type='text/javascript'>
function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}
</script>
        <form name="input" action="calc.html" method="get">
        Name: <input type="text" id="firstname"     maxlength="20"><br>
        Weight(KG): <input type="text" id="weight"><br>
        Height(CM): <input type="text" id="height"><br>
<input type='button'
    onclick="isNumeric(document.getElementById('weight'), 'Numbers Only Please')"
    value='Check Field' />
</form>

Heightフィールドを組み込むために、または行全体を2回書くなど、いくつかのことを試しまし('weight')('height')た('weight'&&'height')が、代わりにHeightを使用しました。

これを解決するための助けは大歓迎です。

4

2 に答える 2

2

この方法で行う必要がある場合は、代わりにこれを試してください。

<script type='text/javascript'>
function isNumeric(elem, helperMsg){
    var numericExpression = /^[0-9]+$/;
    if(elem.value.match(numericExpression)){
        return true;
    }else{
        alert(helperMsg);
        elem.focus();
        return false;
    }
}
</script>
        <form name="input" action="calc.html" method="get">
        Name: <input type="text" id="firstname"     maxlength="20"><br>
        Weight(KG): <input type="text" id="weight"><br>
        Height(CM): <input type="text" id="height"><br>
<input type='button'
    onclick="isNumeric(document.getElementById('weight'), 'Numbers Only Please') && isNumeric(document.getElementById('height'), 'Numbers Only Please')"
    value='Check Field' />
</form>

補足: インライン JavaScript は決して良い考えではありません。コードの保守が非常に難しくなります。私があなただったら、あなたのコードを次のように書き直します。

<script type='text/javascript'>
window.onload = function() {

    document.getElementById("click-button").onclick = function() {
        return isNumeric(document.getElementById('weight'), 'Numbers Only Please') && isNumeric(document.getElementById('height'), 'Numbers Only Please');
    }

    function isNumeric(elem, helperMsg) {
        var numericExpression = /^[0-9]+$/;
        if (elem.value.match(numericExpression)) {
            return true;
        } else {
            alert(helperMsg);
            elem.focus();
            return false;
        }
    }
};

</script>
        <form name="input" action="calc.html" method="get">
        Name: <input type="text" id="firstname"     maxlength="20"><br>
        Weight(KG): <input type="text" id="weight"><br>
        Height(CM): <input type="text" id="height"><br>
<input id="click-button" type='button'
    value='Check Field' />
</form>
于 2014-08-18T20:16:17.400 に答える
0

このユースケースはどのようなものですか？validate()すべてのフィールドをチェックする関数を用意した方が簡単かもしれないと思います。これら3つのカテゴリに合わせて関数を調整する必要があるため、ユースケースについてお尋ねします.それよりももう少し「オブジェクト指向」になろうとしているようです.

擬似コードの例:

function validate() {
    get name form from page
        check that name is valid
        if its not, show error message
    get height form from page
        check that height is valid
        if its not, show error message
    get weight form from page
        check that weight is valid
        if its not, show error message
    everything good? then proceeed to the next step
}

混乱している場合は、実際のコードを使用して表示できます。

または、関数を編集してisNumeric()、それを呼び出す要素を受け入れることもできます。isNumeric()要素を渡す代わりに、onclick として割り当てられているすべての要素が機能します。この関数は、thisキーワークを使用して関連データにアクセスします ( のようなものthis.value)。

于 2014-08-18T20:20:22.473 に答える