vue爬坑之路--------this$refs[formName]validate
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
}
})
}
首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form。
其次在拿到了正确的form后,检查该form上添加的表单验证是否正确,需要注意的点有:
-
el-form rules,model属性绑定,ref标识
-
el-form-item prop属性绑定