uniapp form表单校验

最新推荐文章于 2024-07-19 11:23:25 发布
最新推荐文章于 2024-07-19 11:23:25 发布
阅读量158 收藏
点赞数 1
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hanx_/article/details/140512828
版权

公司的一个老项目，又要重新上架，uniapp一套代码，打包生成iOS端发布到App Store，安卓端发布到腾讯应用宝、OPPO、小米、华为、vivo，安卓各大应用市场上架要求不一样，可真麻烦啊

光一个表单校验，就整了半天，以前用的都是element-ui的，现成的组件，这有换成uni-form的，记录一下怎么用的，还用到了uni-data-picker选择器（不过只能两级，得搞个方法封装一下能多级

包括：必填校验，手机号校验，身份证号校验，邮箱校验

 

带required的就是有校验
name要对应model里的值，要统一

// 限制只能输入数字
{
    format: 'number',
    errorMessage: '企业规模请输入数字'
}

// 手机号校验
{
    pattern: /^1[0-9][0-9]\d{8}$/,
    errorMessage: '请输入正确的手机号码'
}

// 身份证号校验
{
    pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
    errorMessage: '请输入正确的身份证号码'
}

// 邮箱校验
{
    format: 'email',
    errorMessage: '请输入正确的邮箱'
}

demo代码

<template>
	<view class="curr_main">
		<view>
			<uni-forms :modelValue="formData" ref="uniForm" :rules="uniRules">
				<uni-forms-item class="cu-form-group" label="企业名称：" name="enterpriseName" required>
					<input type="text" v-model="formData.enterpriseName" placeholder="请输入企业名称" />
				</uni-forms-item>
				<uni-forms-item class="cu-form-group" label="企业简称：" name="enterpriseShortName" required>
					<input type="text" v-model="formData.enterpriseShortName" placeholder="请输入企业简称" />
				</uni-forms-item>
				<uni-forms-item class="cu-form-group" label="企业规模：" name="enterpriseScale" required>
					<input v-model="formData.enterpriseScale" placeholder="请输入企业规模(人)" />
				</uni-forms-item>
				<uni-forms-item class="cu-form-group" label="联系电话：" name="phone" required>
					<input type="text" v-model="formData.phone" placeholder="请输入联系电话" />
				</uni-forms-item>
				<uni-forms-item class="cu-form-group" label="企业所在城市：" name="districtId" required>
					<uni-data-picker placeholder="请选择企业所在城市" popup-title="请选择企业所在城市" :localdata="cityTree" v-model="formData.districtId" @change="onchange" @nodeclick="onnodeclick" @popupopened="onpopupopened" @popupclosed="onpopupclosed">
					</uni-data-picker>
				</uni-forms-item>
				<uni-forms-item class="cu-form-group" label="详细地址：" name="phone">
					<textarea maxlength="-1" @input="textareaBInput" v-model="formData.address" placeholder="请输入详细地址"></textarea>
				</uni-forms-item>
				<uni-forms-item class="cu-form-group margin-top" label="姓名：" name="legalName" required>
					<input type="text" v-model="formData.legalName" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item class="cu-form-group" label="身份证号码：" name="legalPassNumber" required>
					<input type="text" v-model="formData.legalPassNumber" placeholder="请输入身份证号" />
				</uni-forms-item>
                <uni-forms-item class="cu-form-group" label="邮箱：" name="email" required>
					<input type="text" v-model="formData.email" placeholder="请输入邮箱" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="flex justify-between padding-sm bg-fff">
			<button class="cu-btn round button-primary width-48" style="width:100%" @click="submit()">提交</button>
		</view>
	</view>
</template>
<script>
	export default{
		data(){
			return{
				pickerData: '',
				formData: {
					districtId: '',
					enterpriseName: '',
					enterpriseShortName: '',
					enterpriseCertificateType: '',
					certificateCode: '',
					enterpriseScale: '',
					phone: '',
					address: '',
					legalName: '',
					legalPassType: '',
					legalPassNumber: '',
					id: uni.getStorageSync('userId'),
                    email: ''
				},
				cityTree: [],
				uniRules: {
					enterpriseName: {
						rules: [{
							required: true,
							errorMessage: '请输入企业名称',
						}]
					},
					enterpriseShortName: {
						rules: [{
							required: true,
							errorMessage: '请输入企业简称',
						}]
					},
					districtId: {
						rules: [{
							required: true,
							errorMessage: '请选择企业所在城市',
						}]
					},
					enterpriseScale: {
						rules: [
							{
								required: true,
								errorMessage: '请输入企业规模'
							},
							{
								format: 'number',
								errorMessage: '企业规模请输入数字'
							}
						]
					},
					phone: {
						rules: [
							{
								required: true,
								errorMessage: '请输入联系电话',
							},
							{
								pattern: /^1[0-9][0-9]\d{8}$/,
                                errorMessage: '请输入正确的手机号码'
							}
						]
					},
					legalName: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
						}]
					},
					legalPassNumber: {
						rules: [
                            {
                                required: true,
                                errorMessage: '请输入身份证号码',
                            },
                            {
                                pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                                errorMessage: '请输入正确的身份证号码'
                            }
                        ]
					},
                    email: {
						rules: [
							{
								required: true,
								errorMessage: '请输入邮箱',
							},
							{
								format: 'email',
								errorMessage: '请输入正确的邮箱'
							}
						]
					},

				},
			}
		},
		components:{

		},
		onLoad(params) {
			this.getCity()
		},
		methods:{
			onnodeclick(e) {
				this.formData.districtId = e.id
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			onchange(e) {
				console.log('onchange:', e);
			},
			getCity(){
                let areaRows = [
                    {
                        "id": 130000,
                        "status": 1,
                        "creator": null,
                        "creationTime": null,
                        "modifier": null,
                        "modificationTime": null,
                        "districtName": "河北省",
                        "districtShortName": "河北省",
                        "parentId": 0,
                        "level": 1,
                        "sortNumber": 30,
                        "cities": [
                            {
                                "id": 130100,
                                "status": 1,
                                "creator": null,
                                "creationTime": null,
                                "modifier": null,
                                "modificationTime": null,
                                "districtName": "石家庄市",
                                "districtShortName": "石家庄",
                                "parentId": 130000,
                                "level": 2,
                                "sortNumber": 10,
                                "cities": [
                                    {
                                        "id": 130100,
                                        "status": 1,
                                        "creator": null,
                                        "creationTime": null,
                                        "modifier": null,
                                        "modificationTime": null,
                                        "districtName": "和平区",
                                        "districtShortName": "和平区",
                                        "parentId": 130001,
                                        "level": 3,
                                        "sortNumber": 10,
                                        "cities": null
                                    },
                                ]
                            },
                        ]
                    },
                    {
                        "id": 140000,
                        "status": 1,
                        "creator": null,
                        "creationTime": null,
                        "modifier": null,
                        "modificationTime": null,
                        "districtName": "山西省",
                        "districtShortName": "山西省",
                        "parentId": 0,
                        "level": 1,
                        "sortNumber": 40,
                        "cities": [
                            {
                                "id": 140100,
                                "status": 1,
                                "creator": null,
                                "creationTime": null,
                                "modifier": null,
                                "modificationTime": null,
                                "districtName": "太原市",
                                "districtShortName": "太原市",
                                "parentId": 140000,
                                "level": 2,
                                "sortNumber": 10,
                                "cities": null
                            },
                        ]
                    }
                ]
                areaRows?.map((item, index) => {
                    item.text = item.districtName;
                    item.value = item.id;
                    item.children = item.cities;
                    item.children?.map((el, inde) => {
                        el.text = el.districtName;
                        el.value = el.id;
                        item.children = item.cities
                    });
                });
                console.log(areaRows);
                // 试了下，只能两层
                this.cityTree = areaRows
			},
			textareaBInput(e) {
				this.textareaBValue = e.detail.value
			},
			submit(){
				console.log(this.formData);
				this.$refs.uniForm.validate().then(res=>{
					console.log('表单数据信息：', res);
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
		},

	}
</script>
<style lang="scss">
</style>

38kcok9w2vHanx_
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp 表单校验
qq_36454089的博客
07-08 3670
DCloud 插件市场 有表单校验插件 , 也可以自己封装一个 需要 在 vue 页面 定义一个表单校验规则rules 格式 : // 表单校验规则 rules: { // name 字段 userName: { //正则 校验 rule: /\S/, // 不为空 提示 name值 name: '用户名', // 正则匹配成功 提示值 msg: '用户名不为空' } } vald..
uniapp 表单页面_uniapp form表单提交，数据格式验证
weixin_29349409的博客
02-11 2712
uniapp form表单提交，数据格式验证前端页面姓名：性别：男女出生日期：患者电话：初步诊断：检查项目：JSmethods: {formSubmit:function(e){let tmp = JSON.stringify(e.detail.value)console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))...
uniapp之表单校验
weixin_44634613的博客
03-31 1万+
validateFunction 方法返回四个参数 validateFunction:function(rule,value,data,callback){} ，当然返回参数名开发者可以自定义：rule : 当前校验字段在 rules 中所对应的校验规则value : 当前校验字段的值data : 所有校验字段的字段和值的对象。
uniapp中表单校验
weixin_52568554的博客
06-14 1325
无
uniapp的表单校验方式整理
low666的博客
06-28 2396
这里我使用的模板为： uniapp本身自带表单校验的js文件，代码写的很简洁，也是比较全面的 应用代码： 第二种： uni-forms也带表单的校验，相较于第一种的话，校验的种类就不是很全了，可以自己传入校验规则进行校验，提示样式更加鲜明，只能说各利弊了。 代码比较多这里就不粘贴了。 没有找到手机号对应的校验方式，自己用的又比较多，所以手动在代码里面添加了 非常的便捷也可以在使用的时候添加自己的校验方式：
uniapp之自定义表单校验。
Anthony_Ccc的博客
06-20 242
uniapp的自定义表单校验。
uni-app form表单校验
热门推荐
票票的博客
01-13 2万+
插件 主要对 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"
uniapp form表单validator函数校验
程邓楠的博客
07-31 4163
尝试了用uniapp的from以及uni-forms发现并不是特别好用，就在插件市场找了一个类似于element-ui的表单验证组件，用法基本上和element-ui一致，使用也比较方便 因为目前是用uni-app做小程序，小程序使用有几个限制，需要注意一下； 一、使用 依赖于async-validator npm install async-validator --save npm下载依赖，插件市场导入插件即可直接使用 先上代码 HTML： <evan-form...
uniapp动态表单校验 深层对象表单校验 表单不会自动校验 校验第二次失效
weixin_50448781的博客
04-28 2406
代码中我用的是for in 去循环数组的 因为我之前写的动态表单是个对象 前面的索引是从1开始 页面用v-for循环也是从索引 1 开始循环的 介意的话可以全使用foreach 其他 但是用for in 去循环数组也没啥问题 我只是懒得改了；主要的bug就是uniapp这些表单不会自动校验 或者说是不会校验第二次就很恶心，所以我在输入框绑定的两个input和blur事件来处理 算是歪门邪道 但也是解决bug的关键方法；
微信小程序实现表单校验功能
08-29
"微信小程序实现表单校验功能" 微信小程序实现表单校验功能是小程序开发中最难实现的公共业务之一。表单校验的难点在于表单组件的多样性和校验规则的多样性，导致复杂度达到n³。解决这个问题的关键是组件化和非...
uniform:用于创建动态表单的组件
04-29
该库允许您基于提供的JSON配置生成表单。 特征 在字段级别上使用您自己的组件（ ）。 配置中的灵活验证（使用 ）。 条件显示逻辑。 表单级别的自定义选项。 教程 安装 安装库。 import formGenerator from '@...
自定义表单验证
05-13
简单的js表单验证 function validatename(){ var userN=document.myform.userName.value; if(userN.length==0){ document.getElementById("nerror").innerHTML="请输入用户名！"; return false; } ...
Django之form组件自动校验数据实现
12-23
我们之前在HTML页面中利用form表单向后端提交数据时，都会写一些获取用户输入的标签并且用form标签把它们包起来。 与此同时我们在好多场景下都需要对用户的输入做校验，比如校验用户是否输入，输入的长度和格式等正...
Vue快速实现通用表单验证的方法
10-15
对于更复杂的表单验证场景，可以考虑使用现有的验证库，如`VeeValidate`或`vue-form-validation`，它们提供了丰富的验证规则和更高级的用法，如异步验证、自定义验证等。 总之，Vue.js 提供了灵活的机制来实现表单...
智慧医院智能导诊系统源码，智慧导诊小程序源码，采用前端框架：Uniapp+后端框架：springboot+移动端：微信小程序、H5自主研发
baina666的博客
07-16 1099
智慧导诊系统是一种基于人工智能和大数据技术的医疗辅助系统，旨在提高患者的就医效率和医院的管理效率。以下是对智慧导诊系统的详细解析：定义与功能智慧导诊系统通过自然语言处理、机器学习等技术，自动分析患者的病情及伴随症状，并根据疾病类型和症状推荐合适的科室和医生，为患者提供精准的分诊服务。该系统能够帮助患者快速了解医院信息、科室布局、医生排班等情况，从而提高就医效率。
uniapp bug解决：uniapp文件查找失败:‘uview-ui‘ at main.js:14
最新发布
肥晨开发的学习之路
07-19 338
文件中配置 easycom 组件模式，确保 uView 的组件可以在项目中被正确引用。欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。标签中的首行位置引入 uView 的基础样式，确保给。文件中引入 uView 的 SCSS 主题文件。文件中引入并使用 uView 的 JS 库。改成具体文件路径即可。
uniapp 手写签名实现
baifangfang521的博客
07-17 303
这个例子提供了一个基本的手写签名实现，但在实际应用中可能需要考虑更多细节，比如签名质量的调整、设备兼容性问题等。注意：实际应用中可能需要额外的处理，比如按钮按压效果、签名清除功能等。在uniapp中实现手写签名功能，可以使用HTML5的。在这个例子中，我们定义了一个。元素和相关的方法来处理绘图。方法记录线条的移动并绘制，方法来保存或处理签名。
uniapp动态计算并设置元素高度
weixin_43066287的博客
07-17 173
uniapp动态计算并设置元素高度。
uniapp表单必填校验案例
06-01
好的，以下是一个简单的uniapp表单必填校验案例： ```html <template> <form> <div> <label for="username">用户名：</label> <input type="text" name="username" v-model="form.username" /> <span v-if="errors.username" class="error">{{ errors.username }}</span> </div> <div> <label for="password">密码：</label> <input type="password" name="password" v-model="form.password" /> <span v-if="errors.password" class="error">{{ errors.password }}</span> </div> <button type="submit" @click.prevent="submitForm">提交</button> </form> </template> <script> export default { data() { return { form: { username: '', password: '' }, errors: {} } }, methods: { validateForm() { this.errors = {} if (!this.form.username) { this.errors.username = '请填写用户名' } if (!this.form.password) { this.errors.password = '请填写密码' } return Object.keys(this.errors).length === 0 }, submitForm() { if (this.validateForm()) { console.log('表单验证通过，提交数据：', this.form) } } } } </script> <style> .error { color: red; } </style> ``` 在上面的代码中，我们首先定义了一个包含用户名和密码的表单，以及一个错误对象 `errors`。在 `validateForm` 方法中，我们通过判断表单中的用户名和密码是否为空来设置对应的错误信息，并返回一个布尔值来表示表单是否通过验证。在点击提交按钮时，我们调用 `validateForm` 方法进行表单验证，如果验证通过，则打印表单数据，否则不做任何操作。同时，我们使用 `v-if` 指令根据 `errors` 对象中的错误信息来渲染错误提示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值