个人中心
gpt4 book ai didi

javascript - AngularJS 1.x 依赖验证

转载 作者：行者123 更新时间：2023-11-30 21:17:58 25 4
gpt4 key购买 nike

我有以下三个输入字段；

<input type="text" autocomplete="off" name="work_phone" id="work_phone" 
    placeholder="Work Phone" class="form-control" 
    data-ng-model="addCareAdminController.careAdminModel.workPhone"  
    data-ng-required="!(addCareAdminController.careAdminModel.mobilePhone 
    || addCareAdminController.careAdminModel.pagerPhone)"/>

<input type="text" autocomplete="off" name="mobile_phone" id="mobile_phone" 
    placeholder="Mobile Phone" class="form-control"
    data-ng-model="addCareAdminController.careAdminModel.mobilePhone" 
    data-ng-required="!(addCareAdminController.careAdminModel.workPhone 
    || addCareAdminController.careAdminModel.pagerPhone)"/>

<input type="text" autocomplete="off" name="pager_phone" id="pager_phone" 
    placeholder="Pager Number" class="form-control"
    data-ng-model="addCareAdminController.careAdminModel.pagerPhone" 
    data-ng-required="!(addCareAdminController.careAdminModel.workPhone 
    || addCareAdminController.careAdminModel.mobilePhone)"/>

以及下面两个选择框；

<select name="primary_communication" id="primary_communication" class="form-control" 
data-ng-model="addCareAdminController.careAdminModel.primaryCommunication" 
data-ng-options="type.code as type.description for type in addCareAdminController.communicationTypes">
    <option value="">Select Primary Communication</option>                                                    
</select>

<select name="secondary_communication" id="secondary_communication" class="form-control" 
data-ng-model="addCareAdminController.careAdminModel.secondaryCommunication" 
data-ng-options="type.code as type.description for type in addCareAdminController.communicationTypes">
    <option value="">Select Secondary Communication</option>                                                    
</select>

上面的选择框将下面的对象数组作为值；

self.communicationTypes = [
{code: "CMPH", groupCode: "COMM-METH", description: "Mobile Phone"}
{code: "CWPH", groupCode: "COMM-METH", description: "Work Phone"}
{code: "CPNO", groupCode: "COMM-METH", description: "Pager Number"}
{code: "CEMA", groupCode: "COMM-METH", description: "Email"}
]

我需要的验证就像当我从主要通信选择框中选择任何选项时说“手机”，如果手机的输入字段没有提供任何值，我需要显示一条错误消息在该输入字段下方。其他选项也类似。我也希望对二次通信产生同样的效果。

注意:我已经在移动、工作和寻呼机输入字段上使用 ng-required 进行另一次验证。

最佳答案

您可以将输入包装在一个表单中并进行验证。检查 select 的 ng-model 是移动电话、工作电话还是寻呼电话，以便为相应的输入启用必填字段

var myApp = angular.module('myApp', []);
myApp.controller('myController', ['$scope', function ($scope) {
var self=this;
self.communicationTypes = [
{code: "CMPH", groupCode: "COMM-METH", description: "Mobile Phone"},
{code: "CWPH", groupCode: "COMM-METH", description: "Work Phone"},
{code: "CPNO", groupCode: "COMM-METH", description: "Pager Number"},
{code: "CEMA", groupCode: "COMM-METH", description: "Email"}
]
    }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myController as addCareAdminController">
    <form name="phoneForm">
        <input type="text" autocomplete="off" name="work_phone" id="work_phone" placeholder="Work Phone" class="form-control" data-ng-model="addCareAdminController.careAdminModel.workPhone" data-ng-required="addCareAdminController.careAdminModel.primaryCommunication=='CWPH'||addCareAdminController.careAdminModel.secondaryCommunication=='CWPH'" />
        <span style="color:red;" ng-if="phoneForm.work_phone.$error.required">Work phone is required</span>
        <input type="text" autocomplete="off" name="mobile_phone" id="mobile_phone" placeholder="Mobile Phone" class="form-control" data-ng-model="addCareAdminController.careAdminModel.mobilePhone" data-ng-required="addCareAdminController.careAdminModel.primaryCommunication=='CMPH'||addCareAdminController.careAdminModel.secondaryCommunication=='CMPH'" />
        <span ng-if="phoneForm.mobile_phone.$error.required" style="color:red;">Mobile phone is required</span>
        <input type="text" autocomplete="off" name="pager_phone" id="pager_phone" placeholder="Pager Number" class="form-control" data-ng-model="addCareAdminController.careAdminModel.pagerPhone" data-ng-required="addCareAdminController.careAdminModel.primaryCommunication=='CPNO'||addCareAdminController.careAdminModel.secondaryCommunication=='CPNO'" />
        <span style="color:red;" ng-if="phoneForm.pager_phone.$error.required">Pager phone is required</span>
        <span style="color:red;" ng-if="!(addCareAdminController.careAdminModel.primaryCommunication||addCareAdminController.careAdminModel.secondaryCommunication)&&!(addCareAdminController.careAdminModel.pagerPhone||addCareAdminController.careAdminModel.mobilePhone||addCareAdminController.careAdminModel.workPhone)">Please fill at least 1 of these fields. </span>
        <select name="primary_communication" id="primary_communication" class="form-control" data-ng-model="addCareAdminController.careAdminModel.primaryCommunication" data-ng-options="type.code as type.description for type in addCareAdminController.communicationTypes">
            <option value="">Select Primary Communication</option>
        </select>

        <select name="secondary_communication" id="secondary_communication" class="form-control" data-ng-model="addCareAdminController.careAdminModel.secondaryCommunication" data-ng-options="type.code as type.description for type in addCareAdminController.communicationTypes">
            <option value="">Select Secondary Communication</option>
        </select>
    </form>

</body>

关于javascript - AngularJS 1.x 依赖验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45474742/

25 4 0
文章推荐： C# 3.5 合并 2 个不同类型的 2 个列表
文章推荐： c - c中两个数相加
文章推荐： c# - 无法打开下载保存对话框
文章推荐： c# - 如何递归压缩文件夹？
行者123
个人简介

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

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