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"> ~~~