第一步:写form体表单域
<!-- 表单域 -->
<uni-forms ref="forms" class="forms px-2" :value="forms" :rules="rules">
<uni-forms-item name="username">
<uni-easyinput :input-border="false" placeholder="账号" class="input-bg-color py-2" v-model="forms.username"/>
</uni-forms-item>
<uni-forms-item name="password">
<uni-easyinput :input-border="false" placeholder="密码" type="password" class="input-bg-color py-2" v-model="forms.password"/>
</uni-forms-item>
<view class="text-center secondary-color position-relative">
<view>注册新用户?</view>
<view class="line position-absolute"/>
</view>
</uni-forms>
第二步:设置rules
1.<uni-forms ref=”forms” class=”forms px-2″ :value=”forms” :rules=”rules”>
2.在data里编写规则
rules: {
username: {
rules: [{
required: true,
errorMessage: '请输入{label}',
}, {
minLength: 2,
maxLength: 10,
errorMessage: '{label}长度{minLength}到{maxLength}',
},
{
pattern: /^[\u4E00-\u9FA5A-Za-z0-9]+$/,
errorMessage: "{label}不能包含特殊字符"
}],
label: "账号"
},
password: {
rules: [{
required: true,
errorMessage: '请输入{label}',
}, {
minLength: 6,
maxLength: 16,
errorMessage: '{label}长度在{minLength}到{maxLength}',
}, {
pattern: /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{6,16}$/,
errorMessage: "{label}必须包含大小写字母"
}],
label: "密码"
}
}
第三步:实现校验:this.$refs.forms.validate()
1.在表单上设置ref名称
2.在methods里面设置相应的方法
3.利用this.$refs.forms.validate()实现效果
methods: {
login(){
console.log("login")
this.$refs.forms.validate()
}
}