uni-forms 表单验证使用步骤

第一步：写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()
			}
		}