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的表单验证及常用规则相关推荐

vue 表单验证正则_vue elementui form表单验证的实现
最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
[JAVA EE] Thymeleaf 高级用法：模板布局，带参数的引用片段，表单验证，常用校验注解
模板布局公共部分通常定义为模板布局:如页眉,页脚,公共导航栏.菜单等. 模板布局定义方法布局页中用 th:fragment 定义模板片段,其他页面用 th:insert 引用片段例如:foote ...
elementui 嵌套表单验证_vue elementUI 表单嵌套验证的实例代码
一:表单一级验证 element中from组件内表单验证通过使用el-form标签,绑定model和rules属性进行表单验证简单的表单验证很简单,在prop内绑定验证属性,然后在rules对象内定 ...
elementUI框架:表单验证书写方式
验证form,注意prop.rules指定的名字需一致: 也可以单独指定具体某一验证::rules="$rules.Login.userName" 校验方式 this.$refs[ ...
记录element-ui自定义表单验证上传身份证正反面
大概是这个样式两个上传组件写在一个form-item里进行自定义表单验证每次验证,通过判断上传组件绑定的值进行判断,callback不同的提示错误 <template><div& ...
element-ui清除表单验证提示语
一.需求描述: 使用了element-ui的表单, 点击发布当物流单号为空时,会出现提示,如果我通过上方下拉框切换了物流名称,我希望能够主动的清除下方的红色提示信息. 二.解决方案 1.编写表单代码, ...
js表单验证（常用的正则表达式）
js表单验证的正则表达式,test() 方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true,否则返回 false. 语法:let reg=/正则表达式主体/修饰符(可 ...
vue中使用element-ui的表单验证功能prop属性
转自:https://www.it610.com/article/1279903369556672512.htm 1.在标签中绑定 :rules="方法名称",然后在 data ...
elementui from表单提交_vue+element-ui el-form表单验证及提交验证
单项验证 html v-if是画面显示判定直接无视,主要需要在要做验证的文本框上加标签,然后需要加上 :prop和 :rules两个属性.各属性名关系如图所示,标签最外层,中层,最内层. 的:mode ...

ElementUI的表单验证及常用规则

ElementUI的表单验证及常用规则相关推荐

最新文章

热门文章