Instance for vue mobile phone number, email RegEx verification, and 60 s verification code sending, vue60s

Instance for vue mobile phone number, email RegEx verification, and 60 s verification code sending, vue60s

Today, I wrote a simple verification code for the components I used earlier. However, I feel that the components I wrote are not very useful in this project. Because they are used less often, they are directly written on the page.

<Div> <p class = "fl"> <input name = "phone" type = "number" placeholder = "mobile phone number" v-model = "phone"/> <button type = "button ": disabled = "disabled" @ click = "sendcode" class = "btns" >{{ btntxt }}</button> </p> <p class = "fl" style =" margin-left: 20px; "> <input type =" text "placeholder =" Verification Code "/> </p> </div> <input type =" button "value =" query "class =" btns search "@ click =" query "/>

The content in the script

Export default {data: function () {return {disabled: false, time: 0, btntxt: "Get verification code", formMess: {email: this. email, phone: this. phone }}, mounted: function () {}, methods: {// verify the mobile phone number part sendcode () {var reg = 11 &/^ (13 | 14 | 15 | 17 | 18) [0-9] {1} \ d {8}) $ /; // var url = "/nptOfficialWebsite/apply/sendSms? Mobile = "+ this. ruleForm. phone; if (this. phone ='') {alert ("Enter your mobile phone number");} else if (! Reg. test (this. phone) {alert ("Incorrect mobile phone format");} else {this. time = 60; this. disabled = true; this. timer ();/* axios. post (url ). then (res => {this. phonedata = res. data;}) */}, timer () {if (this. time> 0) {this. time --; this. btntxt = this. time + "s and then get again"; setTimeout (this. timer, 1000);} else {this. time = 0; this. btntxt = "get verification code"; this. disabled = false ;}, query () {var formMess = this. formMess Axios. post (api + "/order/select /Prediction ", formMess ). then (function (res) {if (res. data. code == 200) {console. log (res. data. data); this. productResult = res. data. data; this. productResult. length = 3;} else if (res. data. code == 400) {alert (res. data. message )}}. bind (this)}, // mail verification sendEmail () {var regEmail =/^ ([a-zA-Z0-9] + [_ | \.]?) * [A-zA-Z0-9] + @ ([a-zA-Z0-9] + [_ | \.]?) * [A-zA-Z0-9] + \. [a-zA-Z] {2, 3} $/; if (this. email = '') {alert (" Enter your email address ");} else if (! RegEmail. test (this. email) {alert ("Incorrect email format ");}}}}

In the above vue, the mobile phone number, email RegEx verification, and 60 s verification code sending examples are all the content shared by Alibaba Cloud. I hope you can provide a reference and support for the customer's home.