jquery插件过滤表单字段输入与正则表达式的十进制/浮点值 - 验证的正则表达式模式似乎没有工作

Question

Background: using JQuery plugin for input text field filtering and regex (tried several variations actually) with symfony 3.x

jquery http://www.thimbleopensource.com/tutorials-snippets/jquery-plugin-filter-text-input

Goal: Have the form field accept only positive float / decimal up to 3 decimal places.

Acceptable:

3.24
.56
3456.789

Not Acceptable:

-3.65
-.67
3.6.5
3c.56
5g

I have used reg exp testers such as https://www.freeformatter.com/regex-tester.html to build/find a reg ex that works such as;

^(?:[1-9]\d*|0)?(?:\.\d+)?$ or ^[0-9]*[.][0-9]+$

Both work in the tester.

I am using regex like;

$('#name of the form field').filter_input({regex: "^[0-9]*[.][0-9]+$"});

They don't seem to work with the jquery plugin. The plugin might be buggy or am I doing something wrong?

Answer 1

It seems like the plugin is just accepting character groups, and isn't matching the full pattern. So you can basically just restrict the type of characters that can be inserted, but you can't specify a full pattern that has to be matched.

Here's a quick and dirty solution that won't require an additional plugin:

$("#myField").on("keyup change", function () {
    var self = $(this), lastValid = self.data("lastValid") || "";
    if (self.val().match(/^\d*\.?\d{0,3}$/)) {
      self.data("lastValid", self.val());
    } else {
      self.val(lastValid);
    }
});

It basically just stores the last valid input and sets the field back to the last valid input once something invalid was entered.

The pattern I'm matching against is: ^\d*\.?\d{0,3}$