关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解:
来自”和“小编的小提示:
首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form。
其次在拿到了正确的form后,检查该form上添加的表单验证是否正确,需要注意的点有:
1.使用此方法前检查prop一定必须要写在<el-form-item>上面,写在里面的input上或者其他任何地方都不行(el-form-item prop属性绑定)
2.el-form rules,model属性绑定,ref标识
自定义表单验证的坑:
一.validate/resetFields 未定义。
1:要验证的DOM,还没有加载出来。
2:有可能 这种方式,不是你们想要的结果。this.$refs[ruleForm].validate()
方式不识别。需要使用: this.$refs.ruleForm.validate()
;
解决办法:
- this.ticketDialog = true;
- //对整个表单进行重置,将所有字段值重置为初始值并移除校验结果
- this.$nextTick(function() {
- this.$refs.ticketInfoForm.resetFields();
- })
或者:this.$refs[ruleForm].validate()
方式不识别。需要使用: this.$refs.ruleForm.validate()
;
那么如下所示:
- methods: {
- submitForm(ruleForm2) {
- //官网 this.$refs[ruleForm2].validate();
- //在实际使用中,会报错。validate未定义
- //使用this.$refs.ruleForm2.validate(); 成功。
- this.$refs[ruleForm2].validate((valid) => {
- if (valid) {
- alert('submit!');
- } else {
- console.log('error submit!!');
- return false;
- }
- });
- }
- }
二. 数字类型的验证, 兼容mac和windows系统。
数字类型的验证需要在 v-model
处加上 .number
的修饰符,这是 Vue
自身提供的用于将绑定值转化为 number
类型的修饰符。
如下所示:
- <el-form-item label="年龄" prop="age">
- <el-input type="number" v-model.number="ruleForm2.age"></el-input>
- </el-form-item>
如有不解,可以查看具体案例:
html:
- <script src="//unpkg.com/vue/dist/vue.js"></script>
- <script src="//unpkg.com/element-ui/lib/index.js"></script>
- <div id="app">
- <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
- <el-form-item label="密码" prop="pass">
- <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input>
- </el-form-item>
- <el-form-item label="确认密码" prop="checkPass">
- <el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input>
- </el-form-item>
- <el-form-item label="年龄" prop="age">
- <el-input type="number" v-model.number="ruleForm.age"></el-input>
- </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>
- </div>
js:
- var Main = {
- data() {
- var checkAge = (rule, value, callback) => {
- if (!value) {
- return callback(new Error('年龄不能为空'));
- }
- setTimeout(() => {
- if (!Number.isInteger(value)) {
- callback(new Error('请输入数字值'));
- } else {
- if (value < 18) {
- callback(new Error('必须年满18岁'));
- } else {
- callback();
- }
- }
- }, 1000);
- };
- var validatePass = (rule, value, callback) => {
- if (value === '') {
- callback(new Error('请输入密码'));
- } else {
- if (this.ruleForm.checkPass !== '') {
- this.$refs.ruleForm.validateField('checkPass');
- }
- callback();
- }
- };
- var validatePass2 = (rule, value, callback) => {
- if (value === '') {
- callback(new Error('请再次输入密码'));
- } else if (value !== this.ruleForm.pass) {
- callback(new Error('两次输入密码不一致!'));
- } else {
- callback();
- }
- };
- return {
- ruleForm: {
- pass: '',
- checkPass: '',
- age: ''
- },
- rules: {
- pass: [
- { validator: validatePass, trigger: 'blur' }
- ],
- checkPass: [
- { validator: validatePass2, trigger: 'blur' }
- ],
- age: [
- { validator: checkAge, trigger: 'blur' }
- ]
- }
- };
- },
- methods: {
- submitForm(ruleForm) {
- //官网 this.$refs[ruleForm].validate();
- //在实际使用中,会报错。validate未定义
- //
- //使用this.$refs.ruleForm.validate(); 成功。
- this.$refs.ruleForm.validate((valid) => {
- if (valid) {
- alert('submit!');
- } else {
- console.log('error submit!!');
- return false;
- }
- });
- },
- resetForm(formName) {
- this.$nextTick(function() {
- this.$refs[formName].resetFields();
- })
- }
- }
- }
- var Ctor = Vue.extend(Main)
- new Ctor().$mount('#app')
以上介绍了" (vue.js)element ui 表单验证 this$refs[formName]validate"里面的小坑的问题解答,希望对有需要的网友有所帮助。
转载于:https://www.cnblogs.com/huge1122/p/11286860.html
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题相关推荐
- vue项目中iview表单验证 this.$refs[name].validate(valid = { }无效
验证成功的时候没有添加 callback(); 加上该方法就可以了 转载于:https://www.cnblogs.com/qiandong1933/p/qiandong19333.html
- Element UI——表单验证输入的数字检测出来是string解决方案
问题描述 打印 判断类型 问题分析 解决方案 数字类型的验证需要在 v-model 处加上 .number 的修饰符,这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符. < ...
- element ui 表单验证为正整数
很多时候都会用表单中输入正整数的情况,在element ui中可以用el-input-number 标签来显示输入框是number类型的,或者type="number"也可以的,但 ...
- element ui 表单验证通过后没有绿色框 求解 (已解)
使用element自带的表单验证. 输入框选中状态边框为蓝色, 输入框输入错误的时候边框为红色, 输入正确的时候边框为绿色. 但是有的时候输入正确没有出现绿色(红色和蓝色状态能正常出现) 我的相关代码 ...
- element ui表单验证,验证通过但是不进if(valid){}步骤
表单自定义验证,如图: data中定义的验证规则: var validatePass = (rule, value, callback) => {if (value === '') {retur ...
- element ui表单验证
这里通过一个实例来说明表单验证: 如上图所示,我们点击"添加新用户"弹出弹框 这里只讲弹框里面的校验代码: <template><div id="cre ...
- vue开源Element UI表单设计及代码生成器
1 可视化设计器 设计器基于Element UI ,可通过点击或拖拽的方式设计基本表单, 设计器生成的代码可直接运行在基于 Element 的 vue 项目中. github仓库 https:// ...
- element ui 表单验证残留提示处理
问题:如果vue的同一个页面拥有两个表单.验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息 点击编辑框 解决方法:添加表单重置验证 我们可以通过为两个表单添加ref属性 之后 ...
- element -ui 表单验证 如果 需要验证的v-model 是对象中的对象 总是提示没有填写....
如果需要验证的是以上方式那么 rules的书写方法需要该改变 ? 转载于:https://www.cnblogs.com/wxqworld/p/11301139.html
最新文章
- 广联达5代锁与4代锁有何区别_BVVB是什么线?BV与BVVB有何区别?
- Ajax 基础——未完待续
- com.android.ddmlib.ShellCommandUnresponsiveException
- webuploader在bootstrap模态对话框中选择文件按钮无效的问题
- 【代码】synchronized是可重入锁并且多个sync代码块顺序执行
- QT的QCategoryAxis类的使用
- 贪心算法之用优先队列解决最短路径问题(Dijkstra算法)
- 美国计算机协会ACM子刊中国特辑:中国的人工智能初创企业
- kafka监控工具Burrow安装
- 青山遮不住——2020的10大技术趋势
- JZOJ5465. 【NOIP2017提高A组冲刺11.9】道路重建
- Simulink 环境基础知识(五)--编程建模基础知识
- 2019 年第 29 周 DApp 影响力排行榜 | TokenInsight
- vue.js 动态合并单元格问题
- 车载导航应用的哪些计算机知识,三维模拟智能车载导航系统的设计与实现
- java 算出下一个工作日_如何计算JAVA中两个不同日期之间的工作日(不包括周末)?...
- 上市公司广告宣传推广费-含沪深A股主板、中小企业板等(2011-2020年)
- 【重识云原生】第六章容器基础6.4.9.2节——使用 Service 连接到应用
- 【C数据类型】基本数据类型
- Atcoder Beginner Contest 260D - Draw Your Cards 解题报告