近五年网站开发参考文献,网站恶意刷新,网站建站模版,网站提供哪些服务示例说明 Vue版本#xff1a;vue3 组件#xff1a;uviewPlus#xff08;Form 表单 | uview-plus 3.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架#xff09; 说明#xff1a;表单组建、表单验证、提交验证等#xff1b; 截图#xff1a; 示例代码
templat… 示例说明 Vue版本vue3 组件uviewPlusForm 表单 | uview-plus 3.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 说明表单组建、表单验证、提交验证等 截图 示例代码
templateview classformuni-section title基本信息 typelineview stylepadding: 0 15px;u--form labelPositiontop :modeluForm :rulesrules refuFormu-form-item label姓名 labelWidth60 propuser.name refitem1 requiredu--input v-modeluForm.user.name placeholder请输入姓名 clearable/u--input/u-form-itemu-form-item label手机号 labelWidth60 propuser.phone typenumber refitem1 requiredu--input v-modeluForm.user.phone placeholder请输入手机号 clearable maxlength11/u--input/u-form-itemu-form-item label身份证 labelWidth60 propuser.idcard typeidcard refitem1 requiredu--input v-modeluForm.user.idcard placeholder请输入身份证号 clearable maxlength18/u--input/u-form-itemu-form-item label家庭住址 labelWidth100 propuser.address refitem1 requiredu--input v-modeluForm.user.address placeholder请输入家庭住址 clearablemaxlength60/u--input/u-form-item/u--formview classbtn-saveu-button text保存 typeprimary clicksubmit/u-button/view/view/uni-sectionu-toast refuToastRef/u-toast/view
/templatescriptexport default {data() {return {uForm: {user: {name: }},// 验证规则rules: {user.name: [{required: true,message: 请输入姓名,trigger: [change, blur],},{// 自定义验证函数validator: (rule, value, callback) {// 返回true表示校验通过返回false表示不通过return uni.$u.test.chinese(value);},message: 姓名只能输入汉字,// 触发器可以同时用blur和changetrigger: [change, blur],}],user.phone: [{required: true,message: 请输入手机号,trigger: [blur, change],},{// 自定义验证函数validator: (rule, value, callback) {// 返回true表示校验通过返回false表示不通过return uni.$u.test.mobile(value);},message: 手机号码不正确,// 触发器可以同时用blur和changetrigger: [change, blur],}],user.idcard: [{required: true,message: 请输入身份证号,trigger: [change, blur],},{// 自定义验证函数validator: (rule, value, callback) {// 返回true表示校验通过返回false表示不通过return uni.$u.test.idCard(value);},message: 身份证号不正确,// 触发器可以同时用blur和changetrigger: [change, blur],}],user.address: {type: string,required: true,message: 请填写家庭住址,trigger: [blur, change]},}}},onReady() {this.$refs.uForm.setRules(this.rules)},methods: {submit() {this.$refs.uForm.validate().then(res {this.$refs.uToastRef.show({type: success,message: 提交成功,})}).catch(err {// uni.$u.toast(校验失败)this.$refs.uToastRef.show({type: error,message: 请检查填写内容,})})}}}
/scriptstyle langscss scoped.form {background-color: $white;height: 100vh;.btn-save {width: 300rpx;margin: 0 auto;margin-top: 100rpx;}}
/style
