Php 突出显示无效表单输入

我一直在努力创建一个表单，其中包含一组字段，如用户名、密码等。。。。 我想在单击提交按钮时进行验证

我正试图从我的边框颜色中获得警觉。所有字段均有效。我的边框必须改为绿色。如果有任何错误，应改为红色

有人对我的问题有什么想法吗

---

如果有人有任何建议？？？

首先学习javascript，如果你对js有一些基本知识，需要了解其逻辑，请继续阅读。。 首先，您需要一个事件处理程序来在表单提交上运行函数 最简单的方法是（尽管有更好的方法）

您需要获取输入字段并验证它们。如果你不知道怎么做，那就买几本Javascript书籍

---

如果您需要在键入值后立即进行验证，请在输入字段上使用onchange事件

jsi。如果您搜索jQuery，您可以找到一些非常好的验证器

要定制一个简单的验证器，我会这样做

<form class="validator">
  <input type="text" name="my-input-1" data-validator="integer"/>
  <input type="text" name="my-input-2" data-validator="email"/>
  ....
</form>

<script>
   $("form.validator").submit(evt, function() {
      var errors = 0;
      $(this).find('[data-validator]').each(function(e, i) {
         var value = $(this).value;
         switch($(this).data('validator')) {
            case 'integer':
               if (!(parseFloat(value) == parseInt(value)) && !isNaN(value)) {
                  $(this).css({'border-color': '#FF0000'});
                  errors++;
               } else
                  $(this).css({'border-color': '#000000'});
               break;
            case 'email':
               if (..... // regex validate email ...) {
                  $(this).css({'border-color': '#FF0000'});
                  errors++;
               } else
                  $(this).css({'border-color': '#000000'});
               break;
         }
      });
      if (errors > 0) {
         // If you want to prevent default event execution no matter what
         evt.preventDefault();
         // If you want you other attached events to NOT run
         evt.stopPropagation();
         // signal failure
         return false;
      }

      // All is well, go on
      return true;
   });
</script>

....
$（“form.validator”）.submit（evt，function（）{
var误差=0；
$（this）.find（“[data validator]”）。每个（函数（e，i）{
var值=$（this）.value；
开关（$（this.data（'validator'））{
“整数”情况：
如果（！（parseFloat（value）==parseInt（value））&&&！isNaN（value））{
$（this.css（{'border-color'：'#FF0000'}）；
错误++；
}否则
$（this.css（{'border-color'：'#000000'}）；
打破
“电子邮件”案例：
如果（…//regex验证电子邮件…）{
$（this.css（{'border-color'：'#FF0000'}）；
错误++；
}否则
$（this.css（{'border-color'：'#000000'}）；
打破
}
});
如果（错误>0）{
//如果您想阻止默认事件执行，不管发生什么
evt.preventDefault（）；
//如果希望其他附加事件不运行
evt.stopPropagation（）；
//信号故障
返回false；
}
//一切都好，继续
返回true；
});

---

当然，为每个验证器构建函数始终是一个很好的做法，甚至最好将整个过程封装在jQuery小部件中（我建议使用jQuery小部件工厂），这将允许您在将来对其进行增强，并使您能够灵活地进行更改

您可以使用jQuery插件。。。。给你

您可以使用DOJO库来验证表单字段。它很容易实现

下面给出了实现dojo的教程

这是你可以看到的工作示例

---

我制作了一个验证库，仅用于一般javascript目的。它甚至是单元测试！您还可以相当轻松地覆盖任何您想要的内容：

只要突出显示无效字段，您就可以更改该字段的样式或添加一个类。下面的示例只是更改输入的背景颜色并添加一条消息

工作示例：

验证器称为iz。它只是让您将验证链接在一起，它会告诉您是否一切都通过了，或者如果您检查了“错误”对象，它会给您提供更多的细节。除此之外，您还可以指定自己的错误消息。检查github上的文档

这里发生的事情是，一旦页面准备就绪，我们将为提交事件设置一个单击处理程序<代码>返回false阻止表单提交。如果

返回true表单将继续。除了返回false，您还可以
event.preventDefault（）但是为了保持一致性，我更喜欢返回语法。在具有多个表单元素的现实世界中，您可以执行以下操作（psuedo代码）：

if语句检查验证规则并相应地更改DOM。通过这种方式，您可以给出所有已通过和失败字段的完整列表，并对不正确的内容进行完整描述。
我过去使用过，使实现非常简单，并且有很好的文档和示例。
使用jQuery验证插件：

在这个插件中，您必须为字段定义验证规则。您还可以为给定验证规则的给定字段设置错误消息

此插件将类添加到有效和无效字段

您必须为该类提供css

例如：

$(document).ready(function(){
        $(".my_form").validate({
                    rules:{  // validation rules
                            email_address: {
                                required:true,
                                email: true
                            },
                            password:{
                                minlength: 6
                            },
                            confirm_password: {
                                         equalTo:"#password"
                            }
                    },
                    messages: {
                        email_address: {
                           required: "Please enter email address",
                           email: "Please enter valid email address",
                       },
                       /*
                          likewise you can define messages for different field 
                          for different rule.
                       */
                    }
                    errorClass: "signup_error",  
                     /*This is error class that will be applied to 
                      invalid element. Use this class to style border. 
                      You can give any class name.*/
                });
      });

一旦您单击submit按钮，并且字段无效，插件会将类添加到您指定为
errorClass
的元素中，并且当您在字段中输入有效值时，插件将删除该类并默认添加
'valid'
类

您可以使用这两个类使用simple element设置有效和无效元素的样式

.valid {
   border-color:"green"
}

.signup_error {
  border-color:"red"
}

希望这能解决您的问题。
最简单的方法可能是使用以下javascript：

我认为它最适合您的描述。
检查下面的链接，这里我只检查了空字段，如果字段为空，则更改输入字段id，这将更改输入字段边框颜色。

我用过

$("#myb").click(function(){

这是按钮单击事件，但您可以使用提交事件。
我的建议使用jQuery

首先尝试创建多个输入并给它们一个类

html:



然后使用下面的代码查看它是如何工作的

jQuery：

// Validate Function
function validate(element) {
    var obj = $(element);
    if (obj.val().trim() != "") {
        // Not empty
        if (!/^[a-zA-Z0-9_ ]{1,10}$/.test(obj.val())) {
            // Invalid
            obj.css('border-color', '#FAC3C3');
            if (!obj.next().hasClass('error'))
            { obj.after('<span class="error">Please use letters or numbers only and not more than 10 characters!</span>'); }
            else
            { obj.next().text('Please use letters or numbers only and not more than 10 characters!'); }
        } else {
            // Valid
            obj.css('border-color', 'lightgreen');
            if (obj.next().hasClass('error'))
            { obj.next().remove(); }
        }
    } else {
        // Empty
        obj.css('border-color', '#FAC3C3');
        if (obj.next().hasClass('error'))
        { obj.next().text('This field cannot be empty!'); }
        else
        { obj.after('<span class="error error-keyup-1">This field cannot be empty!</span>'); }
    }
}

$(document).ready(function() {
    // Each
    $('.validate').each(function() {
        // Validate
        validate(this);
        // Key up
        $(this).keyup(function() {
            // Validate
            validate(this);
        });
    });
});

$(function() {
            function validateform() {
                var valid = true;
                $(".req").css("border","1px solid green");
                $(".req").each(function() {
                    if($(this).val() == "" ||  $(this).val().replace(/\s/g, '').length == 0) {
                        $(this).css("border","1px solid red");
                        valid = false;
                    }
                });
                return valid;
                }

                $("#sub").click(function() {
                $('#myform').submit(validateform);
                    $('#myform').submit();
                });

        });

//验证函数
功能验证（元素）{
var obj=$（元素）；
if（obj.val（）.trim（）！=“”）{
//不空
如果（！/^[a-zA-Z0-9_100;]{1,10}$/.test（obj.val（）））{
//无效的
对象css（“边框颜色”，“FAC3C3”）；
如果（！obj.next（）.hasClass（'error'））
{obj.after（'请仅使用字母或数字，且不超过10个字符！'）；}
其他的
{obj.next（）.text（'请仅使用字母或数字
var passed = true;
if (check field 1 is false)
    ...
if (check field 2 is false)
    ...
if (check field n is false)
    passed = false
    style and add message

if passed
    return true
else
    return false

$(document).ready(function(){
        $(".my_form").validate({
                    rules:{  // validation rules
                            email_address: {
                                required:true,
                                email: true
                            },
                            password:{
                                minlength: 6
                            },
                            confirm_password: {
                                         equalTo:"#password"
                            }
                    },
                    messages: {
                        email_address: {
                           required: "Please enter email address",
                           email: "Please enter valid email address",
                       },
                       /*
                          likewise you can define messages for different field 
                          for different rule.
                       */
                    }
                    errorClass: "signup_error",  
                     /*This is error class that will be applied to 
                      invalid element. Use this class to style border. 
                      You can give any class name.*/
                });
      });

.valid {
   border-color:"green"
}

.signup_error {
  border-color:"red"
}

$("#myb").click(function(){

<input type="text" class="validate" value="asdf" />
<input type="text" class="validate" value="1234" />
<input type="text" class="validate" value="asd123" />
<input type="text" class="validate" value="£#$&" />
<input type="text" class="validate" value="  " />

// Validate Function
function validate(element) {
    var obj = $(element);
    if (obj.val().trim() != "") {
        // Not empty
        if (!/^[a-zA-Z0-9_ ]{1,10}$/.test(obj.val())) {
            // Invalid
            obj.css('border-color', '#FAC3C3');
            if (!obj.next().hasClass('error'))
            { obj.after('<span class="error">Please use letters or numbers only and not more than 10 characters!</span>'); }
            else
            { obj.next().text('Please use letters or numbers only and not more than 10 characters!'); }
        } else {
            // Valid
            obj.css('border-color', 'lightgreen');
            if (obj.next().hasClass('error'))
            { obj.next().remove(); }
        }
    } else {
        // Empty
        obj.css('border-color', '#FAC3C3');
        if (obj.next().hasClass('error'))
        { obj.next().text('This field cannot be empty!'); }
        else
        { obj.after('<span class="error error-keyup-1">This field cannot be empty!</span>'); }
    }
}

$(document).ready(function() {
    // Each
    $('.validate').each(function() {
        // Validate
        validate(this);
        // Key up
        $(this).keyup(function() {
            // Validate
            validate(this);
        });
    });
});

<form id="myform" name="form"  action="http://www.google.com">
                    <div class="line"><label>Your Username</label><input class="req" type="text" /></div>
                    <div class="line"><label>Your Password</label><input class="req" type="password" /></div>
                    <div class="line"><label>Your Website</label><input class="req" type="text" /></div>
                    <div class="line"><label>Your Message</label><textarea  class="req"></textarea></div>
                    <div class="line"><input type="submit" id="sub"></submit>

                </form>

.line{padding-top:10px;}
        .inline input{padding-left: 20px;}
        label{float:left;width:120px;}

$(function() {
            function validateform() {
                var valid = true;
                $(".req").css("border","1px solid green");
                $(".req").each(function() {
                    if($(this).val() == "" ||  $(this).val().replace(/\s/g, '').length == 0) {
                        $(this).css("border","1px solid red");
                        valid = false;
                    }
                });
                return valid;
                }

                $("#sub").click(function() {
                $('#myform').submit(validateform);
                    $('#myform').submit();
                });

        });

<?php

error_reporting(0);

$green = "border: 3px solid green";
$red="border: 3px solid red";
$nothing="";

$color = array ("text1"=>$nothing , "text2"=>$nothing) ;


if ( $_POST['submit'] ) {

    if($_POST['text1']) {
        $color['text1'] = $green;       
    }

    else $color['text1'] = $red;

    if($_POST['text2'] ) {
        $color['text2'] = $green;
    }

    else $color['text2'] = $red;
}



?>


<form method="post">
    <input type="text" name="text1" style="<?php echo $color ['text1']?>" value="<?php echo $_POST['text1']?>">
    <input type="text" name="text2" style="<?php echo $color ['text2']?>" value="<?php echo $_POST['text2']?>">
    <input type="submit" name="submit">


</form>