關於網友提出的「 (vue.js)element ui 表單驗證 this$refs[formName]validate裏面的內容死活不執行」問題疑問，本網經過在網上對「 (vue.js)element ui 表單驗證 this$refs[formName]validate裏面的內容死活不執行」有關的相關答案進行了整理，供用戶進行參考，詳細問題解答以下：html
問題： (vue.js)element ui 表單驗證 this$refs[formName]validate裏面的內容死活不執行
描述:
123能夠打出來，可是函數裏面的內容就打不出來，不知道爲何vue
解決方案1:
你這個,先看看this.$refs[formName]是否是Undefinedhtml5
解決方案2:
vue element-ui使用自定義正則表達式：java
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()
}
}
註冊提交按鈕事件：node
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實現登錄註冊功能（有完整源碼下載）mysql
解決方案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上添加的表單驗證是否正確，須要注意的點有：react
-
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
