Question

我已经使用php验证了我的表单，但我想将其更改为使用javascript。由于某种原因，它似乎无法正常工作，我无法理解为什么。

<form name="adminFormNewMember" method="post" action=<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>>
    <table id="tableNewUser">
        <tr>
            <td>First Name </td>
            <td><input type="text" id="firstname" onblur="allLetter()" required autofocus></td>
        </tr>
    </table>
</form>
---------------------
<script>
    function allLetter()  
    {   
        var text = document.getElementById("firstname");
        var letters = /^[A-Za-z]+$/;  
        if(text.value.match(letters))  
        {  
            return true;  
        }  
        else  
        {  
            alert("message");  
            return false;  
        }  
    }
</script>

显然表单中包含更多内容，为了清楚起见，我省略了它们。

此外，我想在更多字段中使用相同的功能，例如姓氏等，但我不知道如何操作，因为我使用了getElementById

最后，我想突出显示文本字段红色表示错误，绿色表示正确等等。

澄清编辑我仍然需要PHP部分我不想让它验证。我需要对每个字段onBlur进行验证，然后将要传递给php函数的数据插入到DB等中。

Answer 1

试试这个：

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <form name="adminFormNewMember" method="post" >
        <table id="tableNewUser">
            <tr>
                <td>First Name </td>
                <td><input type="text" id="firstname" onblur="allLetter(this.id)" required autofocus></td>
            </tr>
        </table>
    </form>
    <script>
        var allLetter = function(id){
          var text = document.getElementById(id).value;
          if(text.length ==0 || text.toUpperCase().replace(/[^A-Z]/g, "").length != text.length) alert("Incorrect value")
        }
    </script>
</body>
</html>

要将函数与多个字段一起使用，只需将id作为参数（this.id）传递，在allLetters函数中，将参数传递给getElementById。

看起来你的Regexp不正确（或者说不够），所以首先检查字段是否为空，然后检查值的长度是否等于仅用字母的值的长度。如果是，那么该字段是正确的，否则请去警报。

也许您应该考虑使用jquery并且验证插件here可以为您节省大量时间

Answer 2

在示例代码中返回true或false实现任何结果。您需要做的是，根据验证是否成功，将CSS类添加到输入字段。此CSS类应处理字段的背景或边框，以指示它与条件不匹配。

不使用onblur属性，而是在表单字段上为blur事件创建事件侦听器。委托此侦听器将控制转移到一个函数，该函数将获取事件目标中的值并对其进行验证。这应该使您的代码更加模块化并适用于大多数领域。

以下是基本javascript中的一些代码：

<table id="tableNewUser">
    <tr>
        <td>First Name </td>
        <td><input type="text" id="firstname" class="formFields"></td>
        <td>Last Name </td>
        <td><input type="text" id="lastname" class="formFields"></td>
        <td>Fathers Name</td>
        <td><input type="text" id="fathername" class="formFields"></td>
    </tr>

<script>
    for(var i=0; i < document.getElementsByClassName("formFields").length ; i++){
        document.getElementsByClassName("formFields")[i].addEventListener("blur", function(evt){
            var text = evt.target;
            var letters = /^[A-Za-z]+$/;  
            if(text.value.match(letters))  
            {  
                evt.target.classList.remove('incorrectField');
                evt.target.classList.add('correctField');
            }  
            else  
            {  
                evt.target.classList.add('incorrectField');
                evt.target.classList.remove('correctField');
            }
        });
    }

<style>
    .incorrectField{
         background: red;
    }

    .correctField{
         background: green;
    }
</style>

JS验证麻烦和一些噱头

2 个答案: