0

ブラウザーで実行される HTML/Javascript/PHP システムでユーザーを管理するための HTML ページが管理サイトにあります。1 つのページに、new_user、forget_password、Change_password、および Edit_user_details のいくつかの形式を組み合わせたため、20 近くの入力ボックスがあります。

このコードは、ユーザー名の空のフィールドを確認するために使用したものです。これは、この行を 20 行書く必要があることを意味します。
私の懸念は、空のフィールドをチェックする-->ために、短く要約された効果的なものをどのように書くかです。javascript code(数字、数字、長さ、電子メールなどのフィールドも検証する必要があります)

function RequiredFields(){
 var username=document.forms["login"]["username"].value;
  if (username==""||username==null){
     alert("empty username")
     document.login.username.focus();
     if(document.all||document.getElementById){
         document.login.username.style.background="pink";
    }
     return false;
     }
 }
4

2 に答える 2

1

jQuery を使用して空のフィールドをチェックできます。次のコードを見てください。

function Validate() {
    $('form input[type="text"]').each(function(){
    if (this.value=="")
        alert('Value Required');
        });
    }

メールや数字などを検証するには、それらの特定のテキスト ボックスに対して別の関数を記述する必要があります。

于 2012-10-03T15:55:21.497 に答える
1

ここを参照してください：http://jsfiddle.net/TgCbB/1/

HTML

<input type="text" id="username" class="required" data-default="User Name"/>
<input type="text" id="email" class="required email" data-default="Email"/>
<input type="text" id="digits" class="required digits" data-default="Integer"/>

ここで注意すべき重要な点は、class検証方法を示す属性です。(data- 属性を使用してこれを行うこともできますが、これはより良い方法ですが、下位互換性のためにクラスを使用しました)。

プレーンな JavaScript を使用して、次のように検証できるようになりました。

function validate(e){
    var invalid = [];

    var required = document.getElementsByClassName("required");
    for (var i = 0; i < required.length; i++){
        var req = required[i];
        var val = req.value || "";
        var def = req.hasAttribute("data-default") ? req.getAttribute("data-default") : "";

        if (val == "" || val == def)
            invalid.push(req);

        req.className = req.className.replace(" invalid","");
    }

    var digits = document.getElementsByClassName("digits");
    for (var i = 0; i < digits.length; i++){
        var dig = digits[i];
        var val = Number(dig.value || "");
        var rem = val - Math.floor(val);

        if (rem != 0)
            invalid.push(dig);

        dig.className = dig.className.replace(" invalid","");
    }

    var emails = document.getElementsByClassName("email"),
        reg = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
    for (var i = 0; i < emails.length; i++){
        var em = emails[i];
        var val = em.value || "";

        if (!reg.test(val))
            invalid.push(em);

        em.className = em.className.replace(" invalid", "");
    }

    for (var i = 0; i < invalid.length; i++){
        var inp = invalid[i];
        var cls = inp.className.replace(" invalid", "");

        inp.className = cls + " invalid";
    }
}

冗長にすることもできますが、読みやすさを優先したことに注意してください。概念は、検証対象のクラス名を持つ各アイテムを取得し、それらを反復処理し、検証に合格しない場合は無効としてマークすることです。

于 2012-10-03T16:29:44.383 に答える