AngularJS - 验证输入字段的动态模式

时间:2017-07-18 01:33:11

标签: javascript angularjs validation

基本上我需要能够注册两种类型的代码。代码类型A只有数字,代码类型B有数字,一个连字符,一个字母值和一个数字值。

假设情况:

  • 我注册了代码类型A,自定义指令验证所有值。
  • 我需要注册代码类型B,我检查选项'验证代码 键入B',更改模式以进行验证,然后验证输入的所有值。

代码 - 输入A
12345678
32445678
56535678

带补号的代码 - B型
32445678-A1
32445678-A2
65434567-B1

表格

<form>
  <span>Insert code:</span><br/>
  <input type="text" data-ng-model="code" code-type>  <br/>
  <input type="checkbox" data-ng-model="validateCodeTypeB" /> Validate code Type B
</form>

注意:当&#39; validateCodeTypeB&#39;选中该选项也会改变正则表达式。但我不知道如何实现第二个正则表达式来验证代码类型B.

请参阅example

指令

app.directive('codeType', function () {
    return {
    require: 'ngModel',
    link: function (scope, element, attr, ngModelCtrl) {
        function codeTypeA(text) {
          if (text) {
            var transformedInput = text.replace(/[^0-9]/g, '');

            if (transformedInput !== text) {
                ngModelCtrl.$setViewValue(transformedInput);
                ngModelCtrl.$render();
            }
            return transformedInput;
          }
        return undefined;
        }            
        ngModelCtrl.$parsers.push(codeTypeA);
    }
    }  
});

1 个答案:

答案 0 :(得分:1)

在这里,我让你找到解决方案:

if(!scope.codeType){
    transformedInput = text.replace(/[^0-9]/g, ''); // For CodeTypeA
} else {
    transformedInput = text.replace(/[^a-z]/g,''); // For CodeTypeB, change it to your own regex
}

https://plnkr.co/edit/IfIeXhy7vZacLi2jKsMs?p=preview

但是CodetypeB的正则表达式是不同的,将它更改为你的正则表达式以适应codetypeB并且它的好处。