问:如何在angularjs中使用正则表达式验证文本字段,文本字段仅接受有效输入。
<输入类型= “文本”名称= “电话” />
在输入文字上方,我只能输入数字,输入字母时不接受。
答:创建html页面,并在下面的代码。其中的文本字段仅接受有效模式的基础。
<body ng-app =“ CodePenApp”>
仅字母<input type =“ text” allow-pattern =“ [az]” />
<br>
仅NUMBER <input type =“ text” allow-pattern =“ \ d” />
<br>
仅字母拼写<input type =“ text” allow-pattern =“(\ d | [az])” />
<br>
仅WHITESPACE CHARACTERS <input type =“ text” allow-pattern =“ \ W” />
<br>
仅ABCDEFG <input type =“ text” allow-pattern =“ [ABCDEFG]” />
</ body>
为上述html代码创建控制器。
var app = angular.module(“ CodePenApp”,[]);
app.directive('allowPattern',[allowPatternDirective]);
函数allowPatternDirective(){
返回{
限制:“ A”,
编译:function(tElement,tAttrs){
返回函数(作用域,元素,属性){
//我处理关键事件
element.bind(“ keypress”,function(event){
var keyCode = event.which || event.keyCode; //我从事件中安全地按下了keyCode。
var keyCodeChar = String.fromCharCode(keyCode); //我从keyCode确定char。
//如果keyCode char与允许的Regex模式不匹配,则不允许输入该字段。
如果(!keyCodeChar.match(new RegExp(attrs.allowPattern,“ i”))){
event.preventDefault();
返回false;
}
});
};
}
};
}