内容不符输入框变色

最新推荐文章于 2021-09-06 19:09:06 发布

Gybk123

最新推荐文章于 2021-09-06 19:09:06 发布

阅读量574

点赞数

本文链接：https://blog.csdn.net/Gybk123/article/details/78648092

版权

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title>添加操作</title>
       <style type="text/css">
           * {
               margin: 0 auto;
               padding: 0;
           }

           #box {
               width: 800px;
               height: 600px;
               background: goldenrod;
           }

           table {
               width: 500px;
               margin-top: 10px;
           }
           #add{
               width: 100px;
               height: 35px;
               border-radius: 10px;
               background: greenyellow;
               margin-left: 150px;
               margin-top: 5px;
           }
           #baocun{
               width: 100px;
               height: 35px;
               border-radius: 10px;
               background: red;
               margin-top: 5px;
               margin-left: 40px;
           }
           #f{
               margin-left: 300px;
           }
       </style>
       <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
   </head>

   <body>
       <div id="box" ng-app="myApp" ng-controller="myCtrl">

           <table border="1px" cellspacing="0" cellpadding="0">

               <tr>
                   <td>姓名</td>
                   <td>年龄</td>
                   <td>性别</td>
               </tr>
               <tr ng-repeat="person in persons">
                   <td>{{person.name}}</td>
                   <td>{{person.age}}</td>
                   <td>{{person.sex}}</td>
               </tr>
           </table>
           <input type="button" id="add" value="添加" ng-click="add()" />
           <form id="f">
               姓名:<input type="text" id="name" ng-style :"border:red"><span id="nameT" style="color: red;"></span><br />
               年龄:<input type="text" id="age" /><span id="ageT" style="color: red;"></span><br />
               性别:<input type="text" id="sex" /><span id="sexT" style="color: red;"></span><br />
               <input type="button" value="保存" id="baocun" ng-click="baocun()"/>
           </form>
           <script type="text/javascript">
               var m = angular.module("myApp", []);
               m.controller("myCtrl", function($scope) {
                   //隐藏
                   $("#f").hide();
                   //创建数据
                   $scope.persons = [{
                       "name": "张三",
                       "age": 18,
                       "sex": "男"
                   }, {
                       "name": "李四",
                       "age": 17,
                       "sex": "女"
                   }, {
                       "name": "王五",
                       "age": 19,
                       "sex": "男"
                   }];
                   //添加
                   $scope.add = function(){
                       //显示
                   $("#f").show();
                   $scope.baocun = function(){
                       //获取输入框的值进行判断
                       var name = $("#name").val();
                       var age = $("#age").val();
                       var sex = $("#sex").val();

                       //姓名必须2-4个字符
                       if(name.length<2){
                           //提示
                           $("#nameT").html("姓名必须2-4个字符");
                           //边框变红
                           $("#name").css({"border":"1px solid red"});
                           return;
                       }else{
                           //提示
                           $("#nameT").html("");
                           //边框变色
                           $("#name").css({"border":"1px solid black"});
                       }
                       if(isNaN(age)==true||age == ""){
                           //提示
                           $("#ageT").html("年龄必须是数字");
                           //边框变红
                           $("#age").css({"border":"1px solid red"});
                           return;
                       }else{
                           //提示
                           $("#ageT").html("");
                           //边框变色
                           $("#age").css({"border":"1px solid black"});
                       }
                       if(sex.length==0||sex==""){
                           //提示
                           $("#sexT").html("性别必填");
                           //边框变红
                           $("#sex").css({"border":"1px solid red"});
                           return;
                       }else{
                           //提示
                           $("#sexT").html("");
                           //边框变色
                           $("#sex").css({"border":"1px solid black"});
                       }


                       //创建对象
                       var newPerson = {"name":name,"age":age,"sex":sex};
                       //添加
                       $scope.persons.push(newPerson);
                   }
                   }
               })
           </script>
       </div>
   </body>

</html>