123可以打出来,但是函数里面的内容就打不出来,不知道为什么
Python后端,最近正在用element ui;
首先确保每个验证函数一定调用了callback()
函数,在验证不通过、通过时都要调用callback()
函数,这里return callback()
与callback()
都可以;
如果还是有问题,再打印this.$refs[formName]
如果为空说明调用或表单有问题。
<script>
import ElCol from "element-ui/packages/col/src/col";
export default {
components: {ElCol},
data() {
var checkEmail = (rule, value, callback) => {
if (!value) {
return callback(new Error('邮件不能为空'));
}
if (!value.includes('@')) {
return callback(new Error('请输入正确格式的邮箱'));
}
else {
return callback() // 一些同学的问题可能就出在这里
}
};
var validatePass = (rule, value, callback) => {
if (value === '') {
return callback(new Error('请输入密码'));
}
else {
return callback() // 还有这里,确保每个验证函数都要有
}
};
return {
loginForm: {
email: '',
pass: '',
},
loginRules: {
email: [
{validator: checkEmail, trigger: 'blur'}
],
pass: [
{validator: validatePass, trigger: 'blur'}
],
}
};
},
methods: {
submitForm(formName) {
console.log(this.$refs[formName])
this.$refs[formName].validate((valid) => {
console.log(valid)
if (!valid) {
console.log('error submit!!');
return false;
} else {
console.log('submit')
return true
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
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
}
})
}
我的编辑和新建是同一个弹窗的el-from,刚开始单纯写新建时,没发现问题,加了编辑以后,就有bug了,
bug1:
复现步骤:
1.点击编辑,弹窗显示,内容回显,关闭弹窗
2.点击新建,弹窗显示,显示的是刚刚编辑的内容
bug2:偶尔复现的
点击新建 表单都填写了,点保存按钮,this.$refs[formName].validate((valid) => {可以进来,到那时偏偏valid是false, 第一次进来新建是好的,然后不知道怎么就一直新建不好了,为什么一直是false呢
以下都写了
el-form rules,model属性绑定,ref标识
el-form-item prop属性绑定
6 回答3.1k 阅读✓ 已解决
6 回答2.5k 阅读
5 回答6.5k 阅读✓ 已解决
2 回答2k 阅读✓ 已解决
2 回答1.6k 阅读✓ 已解决
2 回答1k 阅读✓ 已解决
2 回答1.8k 阅读✓ 已解决
之前找到原因了,原因是 所有的prop一定必须要写在<el-form-item>上面,写在里面的input上或者其他任何地方都不行