uniapp 表单验证

<template>
	<uni-forms ref="form" :value="formData" :rules="rules" validate-trigger="bind" err-show-type="undertext">
		<uni-forms-item class="form-item" label=" 姓名" required label-width="120" name="realName">
			<uni-easyinput type="text" :inputBorder="true" v-model="formData.realName" placeholder="请输入姓名"/>
		</uni-forms-item>
		<uni-forms-item class="form-item" label=" 民族" required label-width="120" name="nation">
			<uni-easyinput type="text" :inputBorder="true" v-model="formData.nation" placeholder="请输入民族" />
		</uni-forms-item>
		<uni-forms-item class="form-item" label=" 身份证号" required label-width="120" name="idcardNo">
			<uni-easyinput type="text" :inputBorder="true" v-model="formData.idcardNo" placeholder="请输入身份证号" />
		</uni-forms-item>
	</uni-forms>
</template>
<script>
[import {checkIDCard} from "../../lib/validate.js"](https://download.csdn.net/download/y_f__/19701517)
	export default {
		data() {
			return{
				rules: {
					realName: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					idcardNo: {
						rules: [{
							required: true,
							errorMessage: '身份证号不能为空'
						}, {
							validateFunction: function(rule, value, data, callback) {
							//rule : 当前校验字段在 rules 中所对应的校验规则
							//value : 当前校验字段的值
							//data : 所有校验字段的字段和值的对象
							//callback : 校验完成时的回调
								if (!checkIDCard(value)) {
									callback('身份证格式不争确')
								}
								return true
							}
						}]
					},
					nation: {
						rules: [{
							required: true,
							errorMessage: '民族不能为空'
						}]
					}
				}
			}
		}
	}
</script>

你可能感兴趣的:(uniapp)