0

我在管理站点上有一个 HTML 页面，用于管理在浏览器上运行的 HTML/Javascript/PHP 系统上的用户。我有近 20 个输入框，因为在一页上我结合了几种形式的 new_user、forgot_password、Change_password 和 Edit_user_details。

这段代码是我用来检查用户名的空字段的，这意味着我必须写 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- 属性来做到这一点，这会更好，但我使用 class 是为了向后兼容）。

您现在可以使用普通的 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 回答