uniapp graceChecker.js 表单验证

这篇具有很好参考价值的文章主要介绍了uniapp graceChecker.js 表单验证。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.新建文件 graceChecker.js

export default {
	error:'',
	check : function (data, rule){
		for(var i = 0; i < rule.length; i++){
			if (!rule[i].checkType){return true;}
			if (!rule[i].name) {return true;}
			if (!rule[i].errorMsg) {return true;}
			if (!data[rule[i].name]) {this.error = rule[i].errorMsg; return false;}
			switch (rule[i].checkType){
				case 'string':
					var reg = new RegExp('^.{' + rule[i].checkRule + '}$');
					if(!reg.test(data[rule[i].name])) {this.error = rule[i].errorMsg; return false;}
				break;
				case 'int':
					var reg = new RegExp('^(-[1-9]|[1-9])[0-9]{' + rule[i].checkRule + '}$');
					if(!reg.test(data[rule[i].name])) {this.error = rule[i].errorMsg; return false;}
					break;
				break;
				case 'between':
					if (!this.isNumber(data[rule[i].name])){
						this.error = rule[i].errorMsg;
						return false;
					}
					var minMax = rule[i].checkRule.split(',');
					minMax[0] = Number(minMax[0]);
					minMax[1] = Number(minMax[1]);
					if (data[rule[i].name] > minMax[1] || data[rule[i].name] < minMax[0]) {
						this.error = rule[i].errorMsg;
						return false;
					}
				break;
				case 'betweenD':
					var reg = /^-?[1-9][0-9]?$/;
					if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
					var minMax = rule[i].checkRule.split(',');
					minMax[0] = Number(minMax[0]);
					minMax[1] = Number(minMax[1]);
					if (data[rule[i].name] > minMax[1] || data[rule[i].name] < minMax[0]) {
						this.error = rule[i].errorMsg;
						return false;
					}
				break;
				case 'betweenF': 
					var reg = /^-?[0-9][0-9]?.+[0-9]+$/;
					if (!reg.test(data[rule[i].name])){this.error = rule[i].errorMsg; return false;}
					var minMax = rule[i].checkRule.split(',');
					minMax[0] = Number(minMax[0]);
					minMax[1] = Number(minMax[1]);
					if (data[rule[i].name] > minMax[1] || data[rule[i].name] < minMax[0]) {
						this.error = rule[i].errorMsg;
						return false;
					}
				break;
				case 'same':
					if (data[rule[i].name] != rule[i].checkRule) { this.error = rule[i].errorMsg; return false;}
				break;
				case 'notsame':
					if (data[rule[i].name] == rule[i].checkRule) { this.error = rule[i].errorMsg; return false; }
				break;
				case 'email':
					var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
					if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
				break;
				case 'phoneno':
					var reg = /^1[0-9]{10,10}$/;
					if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
				break;
				case 'zipcode':
					var reg = /^[0-9]{6}$/;
					if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
				break;
				case 'reg':
					var reg = new RegExp(rule[i].checkRule);
					if (!reg.test(data[rule[i].name])) { this.error = rule[i].errorMsg; return false; }
				break;
				case 'in':
					if(rule[i].checkRule.indexOf(data[rule[i].name]) == -1){
						this.error = rule[i].errorMsg; return false;
					}
				break;
				case 'notnull':
					if(data[rule[i].name] == null || data[rule[i].name].length < 1){this.error = rule[i].errorMsg; return false;}
				break;
				case 'idcard':
					if(data[rule[i].name].length < 15 || data[rule[i].name].length > 15 && data[rule[i].name].length < 18){this.error = rule[i].errorMsg; return false;}
					if (data[rule[i].name].length == 15 && !(/^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$/.test(data[rule[i].name]))) {
						this.error = rule[i].errorMsg; return false;
					}else if(data[rule[i].name].length == 18 && !(/^[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-9Xx]$/.test(data[rule[i].name]))){
						this.error = rule[i].errorMsg; return false;
					}
				break;
				case 'address':
					var reg = /^[\u4e00-\u9fa5]/;
					if(!reg.test(data[rule[i].name])){
						this.error = rule[i].errorMsg; return false;
					}
				break;
			}
		}
		return true;
	},
	isNumber : function (checkVal){
		var reg = /^-?[1-9][0-9]?.?[0-9]*$/;
		return reg.test(checkVal);
	}
}

在原作者的基础上由加上了 idcard验证和address验证(实地地址的验证)

自定义定义rules:

let rules=[
	{
		name:'title',
		checkType: "string",
		checkRule: "1,30",
		errorMsg: "标题应为1-30个字符"
	}
]

 然后引入graceChecker.js

<script>
	import graceChecker from "../../../common/graceChecker.js"
	export default{
		data(){
			return{}
		},
		methods:{
			formSubmit(e){
				let type = this.declareJson.type
				let rules = [
	              {
		            name:'title',
		            checkType: "string",
		            checkRule: "1,30",
		            errorMsg: "项目标题应为1-30个字符"
	              }
                ]
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rules);
				if (checkRes) {
					uni.showToast({
						title: "验证通过!",
						icon: "none"
					});
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			}
		}
	}
</script>

这样就可以根据自定义的校验信息进行校验及提示文章来源地址https://www.toymoban.com/news/detail-506595.html

到了这里,关于uniapp graceChecker.js 表单验证的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • js表单验证密码(确认密码),密码长度至少8位,并且英文与数字组合

    案例需求:在注册时,输入密码对其进行密码强度验证,并判断两次输入的密码是否一致。例如,密码长度至少8位,并且英文与数字组合。 代码实现 3.效果图

    2024年02月05日
    浏览(42)
  • uniapp 报错之 uView UI 表单校验 相关字段有数据有值的情况下非空验证失败问题

    1、uniapp 微信小程序使用了uView UI,表单字段有验证; 2、表单添加功能,数据校验正常,因为表单数据本身都是空的; 3、表单更新数据的时候,有些字段明明是有数据的,提交的时候非空验证提示不能为空; 表单更新,此时表单是有数据的,未再次改变表单校验的选择器的值

    2024年02月16日
    浏览(57)
  • 个人网站制作 Part 3 用JS添加高级交互(表单验证、动态内容更新) | Web开发项目

    欢迎回到基础Web开发练手项目系列! 在前两篇博文中,我们创建了个人网站的基本结构、样式、导航栏、项目展示、联系信息、表单交互和动画效果。 本篇将继续丰富你的网站,为其添加更高级的交互性功能,使用JavaScript进行操作。 🔨表单验证 🔧步骤 1: 添加JavaScript文件

    2024年02月01日
    浏览(45)
  • Dreamweaver网页作业——紫罗兰永恒花园动漫价绍网页 7页,含有table表格,js表单验证还有首页视频。以及列表页。浮动布局。div+css+js

    HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页

    2024年02月03日
    浏览(40)
  • elementUI表单验证之动态表单验证

    elementUI 中 Form 组件提供了表单验证的功能,只需要通过  rules  属性传入约定的验证规则,并将 Form-Item 的  prop  属性设置为需校验的字段名即可。 (1)常用表单验证 (2)自定义验证规则(:validator)  有些需要自定义的校验规则可以作为变量写在data中,然后赋值

    2024年02月11日
    浏览(53)
  • 表单验证 ---- 在Vue2中使用ElementUI进行表单验证

    目录 前言 给表单绑定对应属性 在data中定义数据对象和表单的定义规则 与数据对象双向绑定 对整个表单进行验证 在做项目时,对于表单进行验证是我们必不可少的 例如 搭建一个基本的登录界面 表单嵌套一般都是   el-form el-form-item el-input  进行验证前,我们需要先 对el-

    2024年01月20日
    浏览(42)
  • day31WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性

    目录 1.JS验证 2.JS验证+MIME  3.JS验证+.user.ini  4.JS验证+.user.ini+短标签 (ctfshow154,155关) 5.JS验证+.user.ini+短标签+过滤 [ ] 6.JS验证+.user.ini+短标签+加过滤+文件头 有关文件上传的知识 1.为什么文件上传存在漏洞        上传文件时,如果服务瑞代码未对客户端上传的文件进行严

    2024年01月25日
    浏览(50)
  • 【vue】element-ui的form数组表单验证(循环表单验证)

    基于 vue2.0 的 element-ui 的 form 表单验证比较简单,但是有些同学可能对于 数组类型 的表单验证无从下手,这里我基于一个我自己项目中的例子,展示一下怎么进行数组的表单验证。 项目截图: 上代码,为了让大家看起来比较清晰,我删掉了无关的代码: 咱们把数组验证的部

    2024年02月07日
    浏览(55)
  • Elenment UI表单验证时,有值但还是提示错误,表单验证失效问题

    下午在用Element UI写一个表单的时候突然发现,表单的验证规则失效了 使用Element自带的表单校验规则时,表单为空的时候下方有提示信息,表单不为空的时候依然有提示信息   查看资料找到几种方式都不管用 一种是检查 el-form-item 中的 prop值 和 el-input 的v-model的值是否一致,

    2024年02月11日
    浏览(46)
  • element 表单验证 深层验证绑定

    直接上代码 :prop 和prop 都可以,vue2和vue3或者是element、elementplus都可以用 table form:

    2024年02月14日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包