广州佛山app网站商城制作,企业建站技术,网站安全检测入口,网站建设的利益分析目录
1.问题
2.原因及解决方式
3.表单校验方式#xff08;vue3#xff09; 1.问题
在app中使用uni-forms表单#xff0c;并添加校验规则#xff0c;问题是即使输入内容#xff0c;表单校验依然失败。
代码#xff1a;
templateviewuni-forms r…目录
1.问题
2.原因及解决方式
3.表单校验方式vue3 1.问题
在app中使用uni-forms表单并添加校验规则问题是即使输入内容表单校验依然失败。
代码
templateviewuni-forms refseedForm :modelformData :rulesrules label-positiontopuni-forms-item label姓名 namenameinput typetext v-modelformData.name placeholder请输入姓名 //uni-forms-itemuni-forms-item label邮箱 nameemailinput classinput v-modelformData.email typetext placeholder请输入邮箱 //uni-forms-item/uni-formsbutton clicksubmitSubmit/button/view
/templatescript langts setupimport { onReady } from dcloudio/uni-app;import { ref } from vue;const seedForm ref();const resetForm () {return {name: ,email: }};let formData resetForm();const rules {// 对name字段进行必填验证name: {rules: [{required: true,errorMessage: 请输入姓名},{minLength: 3,maxLength: 5,errorMessage: 姓名长度在 {minLength} 到 {maxLength} 个字符}],},// 对email字段进行必填验证email: {rules: [{required: true,errorMessage: 请输入邮箱}],}};onReady(() {seedForm.value.setRules(rules);})const submit async () {console.log(formData.value);// 1.// try { // await seedForm.value?.validate?.()// console.log(校验通过);// } catch (error){// console.log(校验失败);// }// 2.seedForm.value.validate().then(async ({ valid } : any) {if (valid) {console.log(校验失败);} else {//验证成功console.log(校验成功);}});// 3.// seedForm.value.validate(valid {// if (!valid) {// console.log(校验成功);// } else {// console.log(验证失败);// console.log(valid);// }// });// 4.// seedForm.value.validate().then(res {// console.log(表单数据信息, res);// // 清除验证// // form.value.clearValidate()// }).catch(err {// console.log(表单错误信息, err);// })}
/scriptstyle/style
2.原因及解决方式
表单绑定的数据不正确外面需要套一层ref声明响应式数据绑定到表单中。之前的那个写法确实不报错但是不能把表单中输入的数据更新到formData中导致校验一直报错。
修改前
let formData resetForm();
修改后
let formData ref(resetForm());
3.表单校验方式vue3
定义校验规则-》修改表单结构-》绑定表单数据-》提交时校验
表单规则中各个项目的id要和表单中form-item中的name属性一致。
在vue中表单数据通过ref方式进行定义。
表单中需要追加ruleref及model分别定义校验规则表单及表单绑定的数据
提交表单时校验方式有好几种。主要是先定义表单实例通过表单实例中的value的validate判断校验是成功还是失败。
我上面的代码中一共有4中校验方式。第二种前端会报错可以参照下其他几种方式。
