3.知識點整理 · vue.js

[TOC] ### 1. form表單校驗（自定義正則校驗） ~~~ // 這是組價的代碼 <el-form-item prop="mobile"> <el-input type="text" v-model="ruleForm.mobile" auto-complete="off" placeholder="請輸入手機號"></el-input> </el-form-item> // 這是rules的代碼 mobile: [ { validator: validateMobile, trigger: 'blur' }, { required: true, message: '請輸入手機號', trigger: ['blur', 'change'] }, { pattern: /^1[34578]\d{9}$/, message: '目前只支持中國大陸的手機號碼' } ], // 建議寫法 version: [{ required: true, pattern: /^\d+\.\d+\.\d+$/, message: '版本號格式應為: *.*.*' }] 正則： { pattern: /^\d+\.\d+\.\d+$/, message: '版本號格式應為: *.*.*' } ~~~ ### 2. 重置form表單校驗結果 #### 1. 使用resetFields方法重置表單 ![](https://img-blog.csdn.net/20181021163409304?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExNzAxMTY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70) ![](https://img-blog.csdn.net/20181021163551447?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTExNzAxMTY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70) #### 2. 推薦使用this.$refs.dataForm.clearValidate() >this.$refs\['dataForm'\].clearValidate()，另一種寫法 > 默認不傳參數表示移除整個表單驗證，可傳string和array表示要清除的字段 ### 3. vue 事件上加阻止冒泡阻止默認事件 ~~~  <a v-on:click.stop="doThis"></a>  <form v-on:submit.prevent="onSubmit"></form>  <a v-on:click.stop.prevent="doThat"></a>  <form v-on:submit.prevent></form>   <div v-on:click.capture="doThis">...</div>   <div v-on:click.self="doThat">...</div> ~~~ ### 4. 正則密碼校驗 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <input type="text" id="input"> <script> 包含數字、大寫字母、小寫字母 // var reg = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,30}$/; 兩種以上符號組合 // var reg = /^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{6,16}$/ 三種以上符號組合 var reg = /^(?!\d+$)(?![A-Z]+$)(?![a-z]+$)(?![\W_]+$)(?![a-zA-Z]+$)(?![a-z\W_]+$)(?![a-z0-9]+$)(?![0-9\W_]+$)(?![A-Z0-9]+$)(?![A-Z\W_]+$)\S{6,16}$/; var input = document.getElementById("input"); input.onchange = function(){ var value = this.value; if(!reg.test(value)){ alert("請輸入包含大小寫字母、數字、特殊符號三種組合以上且長度為6-16位的密碼！") } } </script> </body> </html> ~~~ ### 5. element ui 中綁定回車事件無效（加.native轉原生） ~~~ <el-input v-model="SearchData" class="input-with-select" @keyup.enter.native="SearchKeyDown"> ~~~