element-ui中表单验证rules

我们在项目中头疼的是什么？对，你没有听错，就是表单验证，各种非空校验，正则校验等等

而初次使用element-ui，在做表单验证的时候，由于项目急，自己呢，也没有时间去研究这个，结果比别人多写了500行的js，有木有很夸张，所以，这个项目结束了，自己呢，去研究了下rules的神奇之处若有不足，请指出来，谢谢大佬们

<template><div class="short-visit"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm" v-if="textFlag"><el-form-item label="姓名" prop="name" class="form-height"><el-inputv-model="ruleForm.name":class="nameClass? '':'active'":disabled="nameShell"@focus="nameFocus"maxlength="30"></el-input></el-form-item><el-form-item class="submitBtn"><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button></el-form-item></el-form ></div></div>
</template>

我们就以这一个为例子

首先我们在el-form上面添加下面这三个属性

:model="ruleForm" :rules="rules" ref="ruleForm"

:model="ruleForm" 是绑定我们form表单中需要提交给后台的一个对象

:rules="rules" 是动态绑定的rules，表单验证规则

ref="ruleForm"  是我们绑定的对象

然后在每一个el-form-item上面绑定prop属性，这个属性就是我们下面要做正则校验的地方，而下面所绑定的值，都是在ruleForm这个对象中，我们下面看具体的js代码

export default {name: 'short-visit',data () {let missionPass = (rule, value, callback) => { //就是我们的回调函数，需要大家注意的是，这个没有在return的对象中，在data中console.log(value)if (value.length > 1) {if (value.indexOf('参加会议') !== -1) {callback()} else {callback(new Error('当出访任务为“参加会议”时才可进行多选，请重新勾选出访任务'))}} else {callback()}}return {ruleForm: {   // 存放数据的对象name: '', // 姓名},rules: { // 就是我们在el-form中绑定的rules，进行表单的验证name: [ // 我们在el-form-item中绑定的prop，就是这里的name，需要大家注意，这具有唯一性{ required: true, message: '请输入姓名', trigger: 'blur' }  // require:是否必填，如不设置，则会根据校验规则自动生成;message:是提示的内容；trigger：是什么事件触发],MissionStatementType: [{ required: true, message: '请选择具体的出访任务', trigger: 'change' },{ validator: missionPass, trigger: 'change' } // validator:对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise]}}},created () {/*** 可以放我们初次进入页面的请求* */},methods: {/*** 数据的提交* */submitForm (formName) {this.$refs[formName].validate((valid) => {if (valid) {this.$confirm('是否确认提交', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',center: true}).then(() => {/*** 发送ajax请求* */})}).catch(() => {/*** 点击了取消按钮*/})} else {return false}})}}
}

上面的就是js的代码，具体什么作用，我做了备注，谢谢大家

element-ui中表单验证rules相关推荐

为什么element ui 中表单验证validate验证成功不执行验证成功的逻辑代码
element ui 中表单验证validate验证成功不执行成功的逻辑代码首先今天做项目时遇到的一个问题,下面代码中,如果上面的验证规则通过但是不会执行验证通过的代码,只有验证不通过才会输出els ...
Vue 篇解决ELement UI 中表单验证(多层Object嵌套)
项目场景: 提示:主要是在 Vue 框架中: 用 Element UI 提供的规则进行表单验证问题描述因为我 data 里面嵌套了多层 Object, 所以 Element UI 提供的表单验证没 ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
element ui 表单验证为正整数
很多时候都会用表单中输入正整数的情况,在element ui中可以用el-input-number 标签来显示输入框是number类型的,或者type="number"也可以的,但 ...
element ui 表单验证通过后没有绿色框求解（已解）
使用element自带的表单验证. 输入框选中状态边框为蓝色, 输入框输入错误的时候边框为红色, 输入正确的时候边框为绿色. 但是有的时候输入正确没有出现绿色(红色和蓝色状态能正常出现) 我的相关代码 ...
Element UI——表单验证输入的数字检测出来是string解决方案
问题描述打印判断类型问题分析解决方案数字类型的验证需要在 v-model 处加上 .number 的修饰符,这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符. < ...
element ui表单验证
这里通过一个实例来说明表单验证: 如上图所示,我们点击"添加新用户"弹出弹框这里只讲弹框里面的校验代码: <template><div id="cre ...
element ui 表单验证残留提示处理
问题:如果vue的同一个页面拥有两个表单.验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息点击编辑框解决方法:添加表单重置验证我们可以通过为两个表单添加ref属性之后 ...
element -ui 表单验证如果需要验证的v-model 是对象中的对象总是提示没有填写....
如果需要验证的是以上方式那么 rules的书写方法需要该改变 ? 转载于:https://www.cnblogs.com/wxqworld/p/11301139.html

element-ui中表单验证rules

element-ui中表单验证rules相关推荐

最新文章

热门文章