input只能輸入數字(正則簡析)
阿新 • • 發佈:2019-02-11
專案中有醬紫一個需求,輸入金額的input,只能輸入數字(正,負,零),最開始我天真的用了h5的新屬性‘type=number’解決,結果呢,,,obviously,,,不相容!!!首先火狐就不相容。只好另擇它路。
既然這樣子以本人愚見,有兩個路子。1、可以在提交的時候判斷,提示使用者這個欄位輸入格式不符合要求。2、在input上繫結keyup事件,當輸入的為非數字的時候,通過js給它過濾掉。經與客戶交流後,選擇了第二種。
頁面上就是繫結個keyup事件
<input type='text' ng-keyup="filter(value)" ng-model='value'/>
每次點選將其他型別的值過濾掉。
$scope.filter= function(value){
//因為當用戶只輸入一個“-”負號時候會被解析為字串從而被過濾掉,所以需要分開判斷
if(value.length==1){
var parttern=/[0-9\-]/;
var matches=parttern.exec(value);
value=Array.isArray(matches)?matches[0]:'';
}else{
var parttern=/(-|\+)?\d+/g;
var matches=parttern.exec(value);
console.log(RegExp.leftContext)
value=Array.isArray(matches)?matches[0]:'';
}
這樣每次輸入都會閃爍,暫時還沒找到更好的解決方式
下邊是一些正則的備忘錄
‘^’符號,所有的解釋都為“匹配輸入字串的開始位置。如果設定了RegExp物件的Multiline屬性,^也匹配“\n”或“\r”之後的位置”。通俗的解釋一下,就是當有^符號存在是,expression必須以parttern開頭才能匹配的上。
var text="index.aspx?test=1& ww=2";
var pattern =/\?(\w+=\w+&)+\w+=\w+/;
console.log(pattern.test(text)); //結果為true
var pattern1=/^\?(\w+=\w+&)+\w+=\w+/;
console.log(pattern1.test(text)); //結果為false,因為text沒有依據pattern1打頭
‘$’與‘^’類似,只不過是結束符號,就不在贅述。
[^?#]中括號內以^開頭,表示,除了‘?#’以外的所有字元。