ElementUI的表单验证及常用规则
生活随笔
收集整理的這篇文章主要介紹了
ElementUI的表单验证及常用规则
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
element-cn.eleme.io/#/zh-CN/com… 在官網上有關于form組件的詳細介紹 這里總結了幾個常用的規則，方便下次使用 必填，必選，郵箱，手機號，時間，數字，數組，字符長度， 以郵箱為例子與手機號為例
//這是一個郵箱的驗證規則 rules: {email: [{required: true,//是否必填message: '請輸入郵箱地址',//錯誤提示信息trigger: 'blur'//檢驗方式（blur為鼠標點擊其他地方，）},{type: 'email',//要檢驗的類型（number，email，date等）message: '請輸入正確的郵箱地址',trigger: ['blur', 'change']（change為檢驗的字符變化的時候）}]，phone: [{required: true,pattern: /^1[34578]\d{9}$/,//可以寫正則表達式呦呦呦message: '目前只支持中國大陸的手機號碼',trigger: 'blur'}], } 復制代碼這是代碼，直接復制到html文件打開即可 也可以使用此鏈接中的rules.js的方式，日常積累一些，直接引用即可 www.jianshu.com/p/6a29e9e51… 此文中還寫了QQ，身份證等驗證方式
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body><div id="app"><el-row><el-col :span="12" :offset="6"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="活動名稱" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="客戶郵箱" prop="email"><el-input v-model="ruleForm.email"></el-input></el-form-item><el-form-item label="客戶年齡" prop="age" prop='age'><el-input type="age" v-model.number="ruleForm.age" auto-complete="off"></el-input></el-form-item><el-form-item label="活動區域" prop="region"><el-select v-model="ruleForm.region" placeholder="請選擇活動區域"><el-option label="區域一" value="shanghai"></el-option><el-option label="區域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活動時間" required><el-col :span="11"><el-form-item prop="date1"><el-date-picker type="date" placeholder="選擇日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker></el-form-item></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-form-item prop="date2"><el-time-picker type="fixed-time" placeholder="選擇時間" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker></el-form-item></el-col></el-form-item><el-form-item label="活動性質" prop="type"><el-checkbox-group v-model="ruleForm.type"><el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox><el-checkbox label="地推活動" name="type"></el-checkbox><el-checkbox label="線下主題活動" name="type"></el-checkbox><el-checkbox label="單純品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊資源" prop="resource"><el-radio-group v-model="ruleForm.resource"><el-radio label="線上品牌商贊助"></el-radio><el-radio label="線下場地免費"></el-radio></el-radio-group></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即創建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></el-col></el-row></div><script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script>var vm = new Vue({el: "#app",data() {return {age: '',ruleForm: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: '',email: '',age: '',},rules: {age: [{required: true,message: '年齡不能為空'},{type: 'number',message: '年齡必須為數字值'},],email: [{required: true,message: '請輸入郵箱地址',trigger: 'blur'},{type: 'email',message: '請輸入正確的郵箱地址',trigger: ['blur', 'change']}],name: [{required: true,message: '請輸入活動名稱',trigger: 'blur'}],region: [{required: true,message: '請選擇活動區域',trigger: 'change'}],date1: [{type: 'date',required: true,message: '請選擇日期',trigger: 'change'}],date2: [{type: 'date',required: true,message: '請選擇時間',trigger: 'change'}],type: [{type: 'array',required: true,message: '請至少選擇一個活動性質',trigger: 'change'}],resource: [{required: true,message: '請選擇活動資源',trigger: 'change'}],}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if(valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}});</script></body></html> 復制代碼ElementUI的表單驗證(二)之dialog關閉驗證https://www.jianshu.com/p/473141679ce4
轉載于:https://juejin.im/post/5bfdea4fe51d453f32193d17
總結
以上是生活随笔為你收集整理的ElementUI的表单验证及常用规则的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python数据结构与算法（2）
- 下一篇： iOS12.1系统，nav自定义返回后，