uni-app form表單校驗
阿新 • • 發佈:2021-01-15
技術標籤:Vue
主要對 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
時表示密碼輸入,密碼會被隱藏掉,右側出現眼睛按鈕