regex & form validation & phone

regex & form validation

https://regexper.com/
https://gitlab.com/javallone/regexper-static
https://github.com/javallone/regexper-static


/^(\w+)\:\/\/([^\/]+)\/(.*)$/

// telephone
/^0[0-9]{2,3}-[0-9]{3, 4}-[0-9]{4}$/

0
021 8888 8888
0371 6666 7777
0370 567 8888

// cell phone / mobile phone
/^1[0-9]{2}-[0-9]{4}-[0-9]{4}$/

1
181 3333 7777
177 6666 8888

https://regexper.com/#%2F^(\w%2B)\%3A\%2F\%2F([^\%2F]%2B)\%2F(.*)%24%2F

https://element.eleme.io/#/zh-CN/component/form#biao-dan-yan-zheng

https://element.eleme.io/#/zh-CN/component/input#input-attributes

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_<input>_types
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel

special-quantifier-range

no space between the comma!

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#special-quantifier-range


    regexSpaceBug() {
        let pattern = /0[0-9]{2, 3}-[0-9]{3, 4}-[0-9]{4}/;
        // /0[0-9]{2, 3}-[0-9]{3, 4}-[0-9]{4}/
        pattern.test("021-6666-8888");
        // false
        pattern = /0[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}/;
        // /0[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}/
        pattern.test("021-6666-8888");
        // true
        pattern.test("0371-6666-8888");
        // true
        pattern.test("0370-333-8888");
        // true
    },


    telephoneChange() {
        let value = this.$data.form.telephoneNum;
        console.log(`telephoneNum value =`, value);
    },
    phoneChange() {
        let value = this.$data.form.phoneNum;
        console.log(`phoneNum value =`, value);
    },
    telephoneInput() {
        const pattern = /^0[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}$/;
        let value = this.$data.form.telephoneNum;
        if (pattern.test(value)) {
            this.$data.show.telephoneNum = false;
        } else {
            if(value !== "") {
                this.$data.show.telephoneNum = true;
                this.$data.error.telephoneNum = `输入的电话号码不符合格式, ${pattern.toString()}`;
            } else {
                this.$data.show.telephoneNum = false;
            }
        }
    },
    phoneInput() {
        const pattern = /^1[0-9]{2}-[0-9]{4}-[0-9]{4}$/;
        let value = this.$data.form.phoneNum;
        if (pattern.test(value)) {
            this.$data.show.phoneNum = false;
        } else {
            if(value !== "") {
                this.$data.show.phoneNum = true;
                this.$data.error.phoneNum = `输入的手机号码不符合格式, ${pattern.toString()}`;
            } else {
                this.$data.show.phoneNum = false;
            }
        }
    },