uniapp之表单验证

页面代码form表单提交

name代表表单验证的名称、required代表这个是否是必填项 ，：rules表示表单调用时的名称

<template>
<view>
	<uni-forms ref="form" :rules="rules">
				<uni-forms-item label="昵称" name="nickName" required>
					<uni-easyinput placeholder="请输入昵称" v-model="user.nickName"></uni-easyinput>

				</uni-forms-item>
				<uni-forms-item label="用户名" name="userName" required>
					<uni-easyinput placeholder="请输入用户名" v-model="user.userName"></uni-easyinput>

				</uni-forms-item>
				<uni-forms-item label="密码" name="password" required>
					<uni-easyinput type="password" placeholder="请输入密码" v-model="user.password"></uni-easyinput>

				</uni-forms-item>
				<uni-forms-item label="电话号码" name="phonenumber" required>
					<uni-easyinput placeholder="请输入电话号码" v-model="user.phonenumber"></uni-easyinput>

				</uni-forms-item>
				<uni-forms-item label="性别" name="sex" required>
					<radio-group @change="change">
						<label>
							<radio value=0 :checked="user.sex==0" /><text>男</text>
						</label>
						<label>
							<radio value=1 :checked="user.sex==1" /><text>女</text>
						</label>
					</radio-group>
				</uni-forms-item>
				<uni-forms-item label="邮箱" name="email" required>
					<uni-easyinput placeholder="请输入邮箱" v-model="user.email"></uni-easyinput>

				</uni-forms-item>
				<uni-forms-item label="身份证" name="idCard" required>
					<uni-easyinput type="password" placeholder="请输入身份证" v-model="user.idCard"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="" name="">
					<button type="primary" @click="next">提交</button>
				</uni-forms-item>
			</uni-forms>
</view>
</template>

表单验证JS代码

<script>
export default {
		data() {
			return {
				user: {
					nickName: "",
					userName: "",
					phonenumber: "",
					sex: 0,
					email: "",
					idCard: "",
					password: "",
					avatar: ""
				},
				indexto: 0,
                      //表单验证字段
				rules: {
					// 对name字段进行必填验证
					nickName: {
						rules: [{
								required: true,
								errorMessage: '请输入昵称',
							},
							{
								minLength: 3,
								maxLength: 5,
								errorMessage: '昵称长度在 3 到 5 个字符',
							}
						]
					},
					userName: {
						rules: [{
								required: true,
								errorMessage: '请输入用户名',
							},
							{
								minLength: 2,
								maxLength: 11,
								errorMessage: '用户名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入密码',
							},
							{
								minLength: 6,
								maxLength: 18,
								errorMessage: '密码长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					sex: {
						rules: [{
							required: true,
							errorMessage: '请选择性别',
						}]
					},
					phonenumber: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}, {
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg = /^1[0-9]{10}$/
								if (!iphoneReg.test(value)) {
									callback('手机号码格式不正确，请重新填写')
								}
								return true
							}
						}]
					},
					email: {
						rules: [{
							required: true,
							errorMessage: '请输入邮箱',
						}, {
							validateFunction: function(rule, value, data, callback) {
								let iphoneReg =
									/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
								if (!iphoneReg.test(value)) {
									callback('邮箱格式不正确，请重新填写')
								}
								return true
							}
						}]
					},
					idCard: {
						rules: [{
								required: true,
								errorMessage: '请输入身份号',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									let iphoneReg =
										/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9]||[Xx]$/
									if (!iphoneReg.test(value)) {
										callback('身份证号格式不正确，请重新填写')
									}
									return true
								}
							}

						]
					},
				}

			}
		},
methods: {
	next() {
				this.$refs.form.validate().then(res => {
				//验证成功后执行
					console.log('表单数据信息：', res);
				}).catch(err => {
					//验证失败后执行
					console.log('表单错误信息：', err);
				})

			},
}
</script>