uniapp uni-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: '请输入手机号码'
		}]
	},
	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"
			})
		}
	})
}

如有问题，欢迎留言！！！