【问题标题】:How to perform dropdown control validation with angular js validator?如何使用 Angular js 验证器执行下拉控件验证?
【发布时间】:2016-03-29 12:10:03
【问题描述】:

我正在做 Angular js 下拉验证,但在做下拉验证时遇到问题。

我已从该网站获取所有内容并使用以下代码: https://github.com/turinggroup/angular-validator

Demo

但是在上面的链接中,没有什么比对 Dropdwon 控件进行验证更好的了。所以如果有人使用相同的代码进行下拉验证,如果成功,请指导我。

这是我创建的 plunker,其中包括下拉菜单:

MyDropdownControlFullDemo

这是我的下拉代码:

     <select class="form-control m-b-sm" required ng-model="form.Obj" ng-options="c.Name for c in Obj track by c.Id">
                 </select>

 $scope.Obj = [
    {Id : '0', Name : 'Select' }, 
        {Id : '1', Name : 'USA' },       
        {Id : '2', Name : 'Canada' },
        {Id : '3', Name : 'Russia' } ];

}

  $scope.Obj = { Id: '0', name: 'Select' };

我想要的是,如果用户没有从下拉列表中选择任何选项,那么验证应该像文本框控件的验证一样出现。

【问题讨论】:

    标签: javascript angularjs validation angularjs-validation angularjs-forms


    【解决方案1】:

    您需要将代码更改为 -

    在 Html 中用于选择列表 -

        <select class="form-control m-b-sm" name="selectbox"  required-message="'Yo! This field is required..'"
                                required ng-model="form.Obj" ng-options="c.Name for c in Objlist track by c.Id">
                      <option value="">Select</option>
    </select>
    

    控制器看起来像-

     angular.module('angular-validator-demo').controller('DemoCtrl',function($scope){
    
     $scope.Objlist = [
        {Id : '0', Name : 'Select' }, 
            {Id : '1', Name : 'USA' },       
            {Id : '2', Name : 'Canada' },
            {Id : '3', Name : 'Russia' } ];
    
    
    
      $scope.Obj = { Id: '0', name: 'Select' };
    
        $scope.submitMyForm = function(){
            alert("Form submitted");
        };
    
        $scope.myCustomValidator = function(text){      
            return true;
        };
    
    
        $scope.anotherCustomValidator = function(text){
            if(text === "rainbow"){
                return true;
            }
            else return "type in 'rainbow'";
        };
    
        $scope.passwordValidator = function(password) {
    
            if(!password){return;}
    
            if (password.length < 6) {
                return "Password must be at least " + 6 + " characters long";
            }
    
            if (!password.match(/[A-Z]/)) {
                 return "Password must have at least one capital letter";
            }
    
            if (!password.match(/[0-9]/)) {
                 return "Password must have at least one number";
            }
    
            return true;
        };
    
    
    
    });
    

    【讨论】:

    • 您的解决方案无法正常工作,就像我使用您的代码使用一个 textox 和一个下拉控件然后在文本框控件中输入任何值并且不选择任何内容但我的表单仍然在单击按钮时提交提交
    猜你喜欢
    • 1970-01-01
    • 2016-11-17
    • 1970-01-01
    • 2021-12-05
    • 2016-06-26
    • 2023-03-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多