栏目分类
猜你喜欢的文章
- 利用jQuery ui dialog 显示表单对话框通用JS方法
- 关于struts表单验证validate的问题
- (vue.js)Vue里面class如何切换?
- [请教问题]ActionSupport中validate表单验证问题
- (vue.js)vue单文件写组件被各种空格错误搞的无语
- jquery validate插件验证表单问题
- jquery的validate表单验证样式无效的问题
- Bootstrap Validate表单验证神器
- aspnet表单提交时防重复提交并执行前台的JS验证
- (vue.js)有没有Vue单页面应用的详细文章
- 异步提交form的时候利用jQuery validate实现表单验证
- 使用jQuery validate 验证注册表单实例演示
- jquery内置验证validate使用方法示例表单验证
- jquery validate和jquery form 插件组合实现验证表单后AJAX提交
- CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
最近更新
- (node.js)关于在webpack打包的时候会叫配置文件一起打包,该怎么解决?
- (node.js)扫描体验版小程序不能正常使用
- (html)使用git时遇到的一个问题
- (html5)这种格式的数据应该如何去调用?
- webpack配置postcss-loader报错
- vue引入外部css文件,webpack将其与vue中的样式混合打包了,怎么办?
- (webpack)vue打包发布到IIS后请求入参丢失
- ubuntu1604上的nginx+php+mysql服务器,如何做大访问量的优化?
- (node.js)node fs如何在windows上rename一个已经打开的文件
- (react.js)react antd 2x中的Modal 要动态加载数据,有什么办法?
(vue.js)element ui 表单验证 this$refs[formName]validate里面的内容死活不执行
关于网友提出的“ (vue.js)element ui 表单验证 this$refs[formName]validate里面的内容死活不执行”问题疑问,本网通过在网上对“ (vue.js)element ui 表单验证 this$refs[formName]validate里面的内容死活不执行”有关的相关答案进行了整理,供用户进行参考,详细问题解答如下:
描述:
123可以打出来,但是函数里面的内容就打不出来,不知道为什么
解决方案1:
你这个,先看看this.$refs[formName]是不是Undefined
解决方案2:vue element-ui使用自定义正则表达式:
let validatePass = (rule, value, callback) => {
let regExp = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
if (value === '') {
callback(new Error('请输入密码'))
} else if (regExp.test(value) === false) {
callback(new Error('8-16字母和数字组成,不能是纯数字或纯英文'))
} else {
if (this.ruleForm.repass !== '') {
this.$refs.ruleForm.validateField('repass')
}
callback()
}
}
注册提交按钮事件:
submitForm (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
let _this = this
this.$ajax.post('请求地址', _this.ruleForm)
.then((response) => {
this.$message.success('注册成功!')
this.$refs[formName].resetFields()
// 跳转到登录页
this.$router.push({path: '/'})
})
} else {
console.log('error submit!!')
return false
}
})
}
全套完整代码:[vuejs+element ui+ssm+maven实现登陆注册功能(有完整源码下载)
解决方案3:
<template>
<div>
<el-form :rules="rules" :model="testInfo" ref="testForm">
<el-form-item props="test1">
<el-input v-model="testInfo.test1"></el-input>
</el-form-item>
<el-form-item props="test2"></el-form-item>
<el-form-item props="test3"></el-form-item>
<el-form-item props="test4"></el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data () {
return {
rules: {
test1: [],
test2: [],
test3: [],
test4: [],
},
testInfo: {
test1: '',
test2: '',
test3: '',
test4: '',
}
};
}
};
</script>
首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form。
其次在拿到了正确的form后,检查该form上添加的表单验证是否正确,需要注意的点有:
-
el-form rules,model属性绑定,ref标识
-
el-form-item prop属性绑定
解决方案4:
之前找到原因了,原因是 所有的prop一定必须要写在<el-form-item>上面,写在里面的input上或者其他任何地方都不行
以上介绍了“ (vue.js)element ui 表单验证 this$refs[formName]validate里面的内容死活不执行”的问题解答,希望对有需要的网友有所帮助。
本文网址链接:http://www.codes51.com/itwd/4365698.html
相关图片
相关文章
- (vue.js)vue里面如何让v-for循环出来的列表里面的列表click事件只对当前列表有效
- (vue.js)请教vuejs单vue文件组件开发方式
- (vue.js)vue的验证插件vue-validator显示验证信息问题
- jQuery插件之validate表单验证
- (javascript)关于表单验证validate 的系列问题
- jQuery validate 添加表单验证方法
- 深入学习jQuery Validate表单验证(二)
- jQuery Validate 表单验证插件----自定义一个验证方法
- jQuery Validate 表单验证插件----自定义校验结果样式
- Validate + Boostrap tooltip 表单验证示例
- jquery validate插件高级表单验证
- jquery validate表单验证插件的基本使用方法及功能拓展
- validate 表单验证 添加图片image
- kendo-ui表单验证
- asp.net表单防重复提交并执行前台的JS验证
Copyright © 2015 , 版权所有 码蚁之家 codes51.com 粤ICP备14062022号
声明:《 (vue.js)element ui 表单验证 this$refs[formName]validate里面的内容死活不执行》由码蚁之家搜集整理于网络,
如果侵害了您的合法权益,请您及时与我们,我们会在第一时间删除相关内容!联系邮箱:8963712#qq.com(#改为@)