个人中心
gpt4 book ai didi

javascript - 如何根据按钮单击验证表单字段？

转载 作者：行者123 更新时间：2023-12-03 18:54:03 24 4
gpt4 key购买 nike

我有 3 个按钮。 2 在 ng-repeat 内部，1 在 ng-repeat 外部，所以
如果用户单击这些按钮，我想显示必填字段警报。
如果用户单击检查 0，我必须仅验证第一个对象，如果缺少任何表单数据值，我必须提醒用户，例如“this(username) 是必填字段。
如果用户单击检查 1 按钮，我只需要验证第二个对象，如果缺少任何表单数据值，我必须提醒用户，例如“this(username) 是必填字段。
如果用户单击检查所有按钮，我必须检查两个对象，如果两个对象中缺少任何字段，我必须用对象索引提醒字段名称。
如果用户单击检查所有按钮和检查按钮，我如何显示必填字段请帮助我
Demo
enter image description here

var app = angular.module("app", ['ngMessages']);
app.controller("myCtrl", function($scope) {
    $scope.users = [
        {
        "inputName":"aj",
        "inputPassword":"1234",
        "inputEmail":"aj@g.in",
        },{
        
        "inputName":"gj",
        "inputPassword":"1234",
        "inputEmail":"gj@g.in",
        }
    ];
     $scope.myFunc = function(formValidation) {
        console.log(formValidation)
    };
    $scope.checkall = function(formValidation) {
        console.log(formValidation)
    };
});
<body translate="no" >
<button ng-click="checkall(formValidation)">check all</button>
  <body ng-app="app" ng-controller="myCtrl" >
<div ng-repeat="user in users">
  <script type="text/ng-template" id="generic-messages">
    <p ng-message="required">This field is required.</p>
    <p ng-message="minlength">This field is too short.</p>
    <p ng-message="maxlength">This field is too long.</p>
  </script>


  <form name="formValidation">
<button ng-click="myFunc(formValidation)">check {{$index}}</button>
    <label>Username (Using Dirty)</label>
    <input type="text" name="username" ng-model="user.inputName" ng-minlength="6" ng-maxlength="12" ng-pattern="/^\w+$/" required>
    <div ng-messages="formValidation.username.$error" ng-show="formValidation.username.$dirty">
      <p ng-message="pattern">Username can only be alphanumeric with an optional underscore.</p>
      <p ng-message="maxlength">Username cannot be longer than 12 characters.</p>
      <div ng-messages-include="generic-messages"></div>
    </div>

    <label>Password (Using Touched)</label>
    <input type="text" name="userPassword" ng-model="user.inputPassword" ng-minlength="6" ng-maxlength="12" required>
    <div ng-messages="formValidation.userPassword.$error" ng-show="formValidation.userPassword.$touched">
      <div ng-messages-include="generic-messages"></div>
    </div>

    <label>Email (Using Dirty)</label>
    <input type="email" name="userEmail" ng-model="user.inputEmail" required>
    <div ng-messages="formValidation.userEmail.$error" ng-show="formValidation.userEmail.$dirty">
      <p ng-message="required">This field is required.</p>
      <p ng-message="email">Please enter a valid email address.</p>
    </div>
  </form>
  </div>
</body>

最佳答案

您应该分开表格，以便控制每个表格。
创建数组变量$scope.forms = []; , 并使用 $index设置每个表单的名称:

<form name="forms[{{$index}}]">
现在您可以使用 $index 控制每个表单: 
<button ng-click="myFunc($index)">check {{$index}}</button>
并用它来显示错误或其他任何东西: 
$scope.myFunc = function(formIndex) {
    console.log(formIndex);
    console.log($scope.forms[formIndex]);
};
$setSubmitted()也可以用于不同的情况。
demo
如果您需要进一步的帮助，请告诉我
编辑
单击“检查全部”时，一种方法是将所有表单设置为已提交并显示字段错误: 
$scope.checkall = function(form) {
    $scope.forms[0].$setSubmitted();
    $scope.forms[1].$setSubmitted();
    console.log('form 1 is valid: ', $scope.forms[0].$valid);
    console.log('form 1 username field', $scope.forms[1].username);
    console.log('form 2 is valid: ', $scope.forms[1].$valid);
};
您可以像这样访问每个表单(如果您需要动态方法，也可以使用 $scope.forms 循环): 
$scope.forms[0]
或表单域及其属性: 
$scope.forms[1].username
为了在单击“全部检查”按钮后显示错误消息，我更改了每个字段的条件，如下所示: 
ng-show="forms[$index].$submitted"
在此处查看更新的演示: DEMO

关于javascript - 如何根据按钮单击验证表单字段？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66293711/

24 4 0
文章推荐： javascript - 如何在 useEffect 中更新 useRef 变量的值
文章推荐： javascript - Angular SSR 网站在转到实际路径之前重定向到登录页面
文章推荐： c++ - 如何在 C++ 中使用列表初始化程序解决大括号省略的歧义？
文章推荐： python - 带有 pip -e : ModuleNotFoundError: No module named 'setuptools' 的 Conda 环境
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com