uniappuni-forms表单校验 :rules="loginRules" 代表表单校验规则
validate-trigger="bind"代表边输⼊边校验，还可以设置为submit，即提交表单时再校验；
uni-forms-item标签的属性name="phone"和校验规则中的⼀⼀对应，相当于element表单校验中的prop
<uni-forms :value="loginForm" ref="loginForm" :rules="loginRules" validate-trigger="bind">
<uni-forms-item name="phone">
<text class="loginTitles">账号</text>
<uni-easyinput type="text" v-model="loginForm.phone" placeholder="点击输⼊⼿机号"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="pwd">
<text class="loginTitles">密码</text>
<uni-easyinput type="text" v-model="loginForm.pwd" placeholder="点击输⼊密码"></uni-easyinput>
</uni-forms-item>
<button @click="goPath('loginForm')">登录</button>
</uni-forms>
// 密码登录校验规则
loginRules: {
phone: {
rules: [{
required: true,
errorMessage: '请输⼊⼿机号码'
}]
},
input标签placeholder属性
pwd: {
rules: [{
required: true,
errorMessage: '请输⼊密码',
}, {
validateFunction: function(rule, value, data, callback) {
if (value.length > 20 || value.length < 8) {
callback('密码长度在8-20位！')
} else {
callback();
}
}
}]
}
}
// 提交表单
goPath(validateForm) {
this.$refs[validateForm].validate(valid => {
if (!valid) {
uni.switchTab({
url: "../home/home"
})
}
})
}
如有问题，欢迎留⾔

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。