uview弹出框放表单验证失效_基于vue2.0前端组件库element
中el-form表。。。
我在平时使⽤过程中，遇到的问题。
⾃定义表单验证出坑:
1. validate/retFields 未定义。
原因：
1：要验证的DOM，还没有加载出来。
vtech
2：有可能this.$refs[ruleForm].validate() ⽅式不识别。需要使⽤: this.$refs.ruleForm.validate(); 这种⽅式，不是你们想要的结果。解决⽅法
1： 要验证的DOM，还没有加载出来。
this.ticketDialog = true;
//对整个表单进⾏重置，将所有字段值重置为初始值并移除校验结果
this.$nextTick(function() {
this.$Fields();
})
foodborne2： 有可能this.$refs[ruleForm].validate() ⽅式不识别。需要使⽤: this.$refs.ruleForm.validate();
methods: {
submitForm(ruleForm2) {
//官⽹ this.$refs[ruleForm2].validate();
//在实际使⽤中，会报错。validate未定义
//使⽤this.$refs.ruleForm2.validate(); 成功。
this.$refs[ruleForm2].validate((valid) => {
if (valid) {
for the first time
alert('submit!');
} el {
console.log('error submit!!');
return fal;
}
});
}
}
2. 数字类型的验证, 兼容mac和windows系统。
数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue ⾃⾝提供的⽤于将绑定值转化为 number 类型的修饰符。
3. 表单校验规则不起作⽤
这是官⽹的截图，表单域 model 字段，在使⽤ validate、retFields ⽅法的情况下，该属性是必填的。
提⽰我们，如果想做表单验证，所有的el-form-item必须指定prop属性的值，并且该值需要和v-model值的名称⼀致。如果是动态表单验证，prop值需要带上遍历的索引值index。
拜拜英文怎么写
案例
例⼦在 codepen 可以查看
html:
提交
重置
css:
@import url("///element-ui/lib/theme-default/index.css");
js:
var Main = {
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error('年龄不能为空'));
}
tTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输⼊数字值'));
} el {
if (value < 18) {
callback(new Error('必须年满18岁'));
} el {
callback();
mini c
}
情人节快乐 英语
}
}, 1000);
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输⼊密码'));
} el {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass'); }
callback();
chinanet是什么
}
};
var validatePass2 = (rule, value, callback) => { if (value === '') {
callback(new Error('请再次输⼊密码'));
} el if (value !== this.ruleForm.pass) { callback(new Error('两次输⼊密码不⼀致!'));
} el {
callback();
}
};
return {
ruleForm: {
pass: '',
checkPass: '',
age: ''
},
rules: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
checkPass: [
{ validator: validatePass2, trigger: 'blur' }
],
age: [
{ validator: checkAge, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(ruleForm) {
/
/官⽹ this.$refs[ruleForm].validate();
//在实际使⽤中，会报错。validate未定义
//
ttyx
//使⽤this.$refs.ruleForm.validate(); 成功。
this.$refs.ruleForm.validate((valid) => {
if (valid) {
alert('submit!');
} el {
console.log('error submit!!');
return fal;
}
});
},
荆棘的意思retForm(formName) {
this.$nextTick(function() {
this.$refs[formName].retFields();
})
}
}
}
var Ctor = d(Main)
new Ctor().$mount('#app')
hangen总结
先看官⽅⽂档，⼀部好的⽂档，会解决⼤部分问题。遇到具体问题，认真仔细看相关部分的内容。
