Question

我在管理网站上有一个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;
     }
 }

Answer 1

您可以使用jQuery检查空字段，看看这段代码：

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

要验证电子邮件，数字等内容，您需要为这些特定文本框编写单独的函数。

Answer 2

见这里：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属性，它指示了如何验证它。（您可以使用数据属性执行此操作，这样会更好，但我使用了类来实现向后兼容性。）

现在，您可以使用普通的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";
    }
}

请注意，可以减少冗长，但我选择了可读性。这个概念是，使用我们正在验证的类名获取每个项目，迭代它们，然后如果它没有通过验证则将其标记为无效。

编写汇总验证javascript代码

2 个答案: