element-ui表单校验

<el-form :model="form" ref="form" :rules="rules" ><el-form-item label="编码" :label-width="formLabelWidth"><el-input v-model="form.codenum" :disabled="isEdit" autocomplete="off"></el-input></el-form-item><el-form-item label="名称" :label-width="formLabelWidth"><el-input v-model="form.name" :disabled="isEdit" autocomplete="off"></el-input></el-form-item><el-form-item label="分数"prop="fenshu":label-width="formLabelWidth"><el-input  v-model="form.fenshu" autocomplete="off"></el-input></el-form-item><el-form-item label="评价" :label-width="formLabelWidth"><el-input type="textarea" v-model="form.detail" autocomplete="off"></el-input></el-form-item></el-form>

data:function(){let checkFenshu = function(rule,value,callback){if(!value) {return new Error('必填信息')}else {if(isNaN(value)) {console.log(value)callback(new Error('请输入数字值'))}else{if(value < 0) {callback(new Error('不能小于0'))}else if(value > 100){callback(new Error('不能大于100'))}else {callback()}}}}return {rules:{fenshu:[{ required: true, message: '分数不能为空'},{validator:checkFenshu,trigger:'blur'}]}}},

或者这样

<el-form-itemprop="email"label="邮箱":rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }]"><el-input v-model="form.email"></el-input></el-form-item>

数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。

<el-form-item label="分数" prop="fenshu"><el-input v-model.number="form.fenshu" ></el-input>
</el-form-item>

并添加了第二条规则：

rules: {fenshu: [{required: true,message: '请输入分数',trigger: 'blur'}, {type: 'number',message: '分数必须为数字',trigger: 'blur'}, {validator: validateAcquaintance, // 自定义验证trigger: 'blur'}]
}

element-ui表单校验相关推荐

vue+element ui表单校验（邮箱、电话、工商信息）
vue+element ui表单校验(邮箱.电话.工商信息)) Html部分 <template><div><el-steps :active="active& ...
element ui表单校验prop的链式写法----源码分析
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width=& ...
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自"和"小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查 ...
vue 3.0记录Element UI 表单使用(看了隔壁小孩儿都会用的Element UI 表单组件使用)
Element UI 表单使用记录 element ui 表单 input 文本域日期选择中国标准时间与xxxx-xx-xx格式时间之间的来回切换中国标准时间转换为xxxx-xx-xx格式 ...
form generator ——Element UI表单设计及代码生成器
form generator Element UI表单设计及代码生成器,可将生成的代码直接运行在基于Element的vue项目中. 网站地址:https://mrhj.gitee.io/form-ge ...
element UI 表单自定义验证，css水平且垂直居中方法
element UI 表单自定义验证 element UI提供了一种内部的表单验证,但是这种方法不能够来进行复杂的验证,如邮箱,手机号等的验证需要用到自定义验证首先是element UI 提供的基础 ...
vue开源Element UI表单设计及代码生成器
1 可视化设计器设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代码可直接运行在基于 Element 的 vue 项目中. github仓库 https:// ...
element ui 表单验证为正整数
很多时候都会用表单中输入正整数的情况,在element ui中可以用el-input-number 标签来显示输入框是number类型的,或者type="number"也可以的,但 ...
清除element残留表单校验
如上图所示,当给需要的表单加上校验以后.当点击 "添加新用户" 的时候会发现,有莫名其妙的校验,明明没有任何的操作. 其实这个就是校验的残留. 处理方案 <div cla ...
Element UI——表单验证输入的数字检测出来是string解决方案
问题描述打印判断类型问题分析解决方案数字类型的验证需要在 v-model 处加上 .number 的修饰符,这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符. < ...

element-ui表单校验

或者这样

element-ui表单校验相关推荐

最新文章

热门文章