uni-app form表单校验 太过爱你忘了你带给我的痛 2023-01-06 04:24 552阅读 0赞 [插件][Link 1] 主要对 `name` 字段进行必填验证,提交事件通过 `form-type` 绑定 <uni-forms ref="signUpForm" :value="signUpFormData" :rules="rules"> <uni-forms-item label="" name="username"> <uni-easyinput type="number" placeholder="请输入登录手机号码" v-model="signUpFormData.username" /> </uni-forms-item> <button form-type="submit" @click="handleSignUp">登录</button> </uni-forms> data() { return { rules: { username: { rules: [{ required: true, errorMessage: '请输入注册手机号码' },{ validateFunction:function(rule, value, data, callback) { let iphoneReg = /^1[0-9]{10}$/ if (!iphoneReg.test(value)) { callback('手机号码格式不正确,请重新填写') } return true } }] } } } }, methods: { handleSignUp() { this.$refs.signUpForm.submit().then(params =>{ params.code = '95' params.uuid = this.signUpFormData.uuid this.$SignUp.login(params).then(res => { console.log(res, 'res') uni.navigateTo({ url: '/pages/template/news/index' }) }) }) } } `validate-trigger` 属性,有俩个属性值 `bind/submit`,默认submit,表示只有在点击提交按钮后,才会进行校验;bind 是边输入边校验,只有在输入正确的格式后才会关掉错误提示 `<uni-easyinput type="password" placeholder="请输入登录密码" v-model="signUpFormData.password" />` 输入框 type 类型为 `password` 时表示密码输入,密码会被隐藏掉,右侧出现眼睛按钮 ![在这里插入图片描述][2021011321434716.PNG_pic_center] [ElementUI:关于 el-formM必填项的校验规则][ElementUI_ el-formM] [vue + ivew 校验form表单俩次密码输入是否一致][vue _ ivew _form] [Link 1]: https://ext.dcloud.net.cn/plugin?id=2773 [2021011321434716.PNG_pic_center]: /images/20221119/1abb6ebaa56441b383d518f905b24ee9.png [ElementUI_ el-formM]: https://blog.csdn.net/weixin_43900414/article/details/107670469 [vue _ ivew _form]: https://blog.csdn.net/weixin_43900414/article/details/116598811?spm=1001.2014.3001.5501
还没有评论,来说两句吧...