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

标签 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>

注意:当选中“validateCodeTypeB”选项时,正则表达式也会更改。但我不知道如何实现第二个正则表达式来验证代码类型 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);
    }
    }  
});

最佳答案

在这里,我为您提供了解决方案的 plnkr:

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 的正则表达式,这样就可以了。

关于javascript - AngularJS - 验证输入字段的动态模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45156057/

相关文章:

angularjs - 如何使用 AngularFire $asObject() 检查 Firebase 中是否存在该对象?

angularjs - Protractor 控制台日志

javascript - jQuery 验证表单,突出显示无效输入

javascript - HTML5自定义Validity-如何绘制?

.net - 检查 .NET 中的先决条件

javascript - 如何在文本和表格之间切换?

javascript - 使用 jquery 连接时 Bootstrap 模式未加载

在 iframe 中使用替换方法的 Javascript

angularjs - 集成 Hive 和 AngularJS?

javascript - topfunction 未定义