關於網友提出的“ (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
