Accept only numeric values that are either exactly 6 digits long or exactly 8 digits long with 2 decimal places

Question

Accept only numeric values that are either exactly 6 digits long or exactly 8 digits long with 2 decimal places

After developing a validator to ensure that a digit is a number and restricts it to having 2 digits after the decimal place, I realized that it does not account for two specific scenarios: a 6-digit number with no decimal places (e.g. 123456) or an 8-digit number with 2 decimal places (e.g. 123456.78). Below is the code that addresses this concern:

function validateInt2Dec(value, min, max) {

    if (Math.sign(value) === -1) {
        var negativeValue = true;
        value = -value
    }

    if (!value) {
        return true;
    }
    var format = /^\d+\.?\d{0,2}$/.test(value);
    if (format) {
        if (value < min || value > max) {
            format = false;
        }
    }
    return format;
}

This function can be implemented in a formly form as shown below:

     vm.fields = [
             {
                className: 'row',
                fieldGroup: [
                    {
                        className: 'col-xs-6',
                        key: 'payment',
                        type: 'input',
                        templateOptions: {
                            label: 'Payment',
                            required: false,
                            maxlength: 8
                        },
                        validators: {
                            cost: function(viewValue, modelValue, scope) {
                                var value = modelValue || viewValue;
                                return validateInt2Dec(value);
                            }
                        }
                    }
                ]
            }
        ];

To accommodate the aforementioned scenarios, additional conditions need to be added to the validator function.

javascript angularjs validation angular-formly

Answer 1

Answer №1

Here is a regular expression that you can try out:

var regex = /^\d{1,6}(\.\d{1,2})?$/;

console.log(regex.test("123456"));
console.log(regex.test("123456.78"));
console.log(regex.test("123456.00"));
console.log(regex.test("12345.00"));
console.log(regex.test("12345.0"));
console.log(regex.test("12345.6"));
console.log(regex.test("12.34"));
console.log(regex.test("123456.789"));

Answer 2

Here is a regular expression that you can try out:

var regex = /^\d{1,6}(\.\d{1,2})?$/;

console.log(regex.test("123456"));
console.log(regex.test("123456.78"));
console.log(regex.test("123456.00"));
console.log(regex.test("12345.00"));
console.log(regex.test("12345.0"));
console.log(regex.test("12345.6"));
console.log(regex.test("12.34"));
console.log(regex.test("123456.789"));

Answer 3

Answer №2

Testing the waters with regex101 indicates that it meets your criteria.

Solution: ^(\d{6})?(\d{8}\.\d{2})?$

Group 1 ^(\d{6})?- either 6 digits
Group 2 ^(\d{6})?(\d{8}\.\d{2})?$ - or 8 digits with 2 decimal places

Answer 4

Testing the waters with regex101 indicates that it meets your criteria.

Solution: ^(\d{6})?(\d{8}\.\d{2})?$

Group 1 ^(\d{6})?- either 6 digits
Group 2 ^(\d{6})?(\d{8}\.\d{2})?$ - or 8 digits with 2 decimal places

Answer 5

Answer №3

To avoid increasing regex complexity, you have the option of adding a check for maxLength before proceeding with the validation process.

var str = value.toFixed(2);
var maxLength = (str.indexOf(".") > -1 ? 8 : 6);
if (str.length > maxLength) {
    return; //input is considered invalid
}

Answer 6

To avoid increasing regex complexity, you have the option of adding a check for maxLength before proceeding with the validation process.

var str = value.toFixed(2);
var maxLength = (str.indexOf(".") > -1 ? 8 : 6);
if (str.length > maxLength) {
    return; //input is considered invalid
}

Accept only numeric values that are either exactly 6 digits long or exactly 8 digits long with 2 decimal places

Answer №1

Answer №2

Answer №3

Similar questions

Using Three.js to Project Objects onto a Plane that is Perpendicular to the Camera Orientation

Leveraging the power of Promise creation

Encountered an issue loading resource: net::ERR_BLOCKED_BY_CLIENT while attempting to access NuxtJS API

Spin the div in the opposite direction after being clicked for the second time

Explore creating a dial number using React

Expanding the jQuery AutoComplete Plugin: A Guide to Implementing the bind keyup Event

A step-by-step guide on sending a fetch request to TinyURL

Access the array values by their respective keys in an object that is returned from a custom JavaScript file utilizing the Node.js file system

What is the process of including metadata in stripe when completing a purchase?

Enhance Your Jekyll Site with the Minimal Mistakes Theme Plugin

Initial input firing empty string on React's onChange event

Struggling to manage texbox with Reactjs

Goodbye.js reliance on lodash

Display a separate component within a primary component upon clicking a button

What is the best way to ensure that the larger child divs always fit perfectly within the parent div?

Maximizing the efficiency of Java Script code

three.js fur effect not appearing on screen

"Experience random updates in the priv/static/js/app.js file whenever changes are made to Vue files in the Phoenix/Elixir/V

How does Mongoose handle returning objects internally?

Sending complete form details to a service using Angular