Shulou(Shulou.com)06/01 Report--

This article is about how vue elementUI implements custom regular rule validation. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Project scenario:

Common forms will be encountered in filling out, such as new information, modified information, etc., as shown in the following figure

I believe you are very familiar with the above verification, not much beep this article mainly wants to write about the customization of verification rules

Verify whether it is a legitimate mobile phone number (for example)

Implement the following figure:

Implementation steps:

Step 1

When the reg expression is ready, Baidu can call the number-- / ^ (13 [0-9] {1})) | (15 [0-9] {1}) | (18 [0-9] {1})) +\ d {8}) $/

Step 2

Model and ref better be the same.

The field names of phone_number verified by prop and phone_number bound by v-model should also pay attention to details.

Create now

Step 3

Data () {ele.me documentation defines a checkPhon_unm callback / / phone number verification var checkPhon_unm = (rule, value) here Callback) = > {if (value) {if (! / ^ ((13 [0-9] {1}) | (15 [0-9] {1}) | (18 [0-9] {1})) +\ d {8}) $/ .test (value) {callback ("Please enter the correct phone number!") ;} else {callback ();}} else {callback ();}}; return {rules: {phone_number: [{validator: checkPhon_unm, trigger: "blur"}],},} }, methods: {submitForm (formName) {this.$ refs [formName] .validate ((valid) = > {if (valid) {alert ('submittance');} else {console.log ('error submittance examples'); return false;});}, thank you for reading! On "vue elementUI how to achieve custom regular rule verification" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.