uni-app form表单校验

插件

主要对 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 时表示密码输入，密码会被隐藏掉，右侧出现眼睛按钮

ElementUI：关于 el-formM必填项的校验规则
vue + ivew 校验form表单俩次密码输入是否一致