关于网友提出的“ (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
