【表单验证方法封装（适合各种场景）】

最新推荐文章于 2023-09-27 09:06:18 发布
最新推荐文章于 2023-09-27 09:06:18 发布
阅读量754 收藏 3
点赞数
分类专栏： 前端 JavaScript 文章标签： javascript 前端 vue.js 正则表达式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WQH_Boss/article/details/126698555
版权

表单验证方法封装（适合各种场景）

提示：以下是个人学习笔记，有问题欢迎评论交流

文章目录

前言

最近在做uni-app项目时用到表单验证，开始选择使用官方验证方法，但有些规则还得自己根据需求加，后来想到其他项目如果遇到相同的场景的话如何自己写一套符合自己要求的方法，直接用。在查阅了一些有的没的文档之后感觉收获还是有的，接下来就把自己感觉有用的地方记录下来，方便今后使用，当然也可以帮助大家少走弯路。

提示：以下是本篇文章正文内容，下面案例可供参考

一、新建js文件

具体名称和位置自定义，我建在了根目录的common文件夹下。
代码如下：

//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':      //Double验证
					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':       //Float验证
					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;
			}
		}
		return true;
	},
	isNumber : function (checkVal){
		var reg = /^-?[1-9][0-9]?.?[0-9]*$/;
		return reg.test(checkVal);
	}
}

二、使用方法

1.引入

在需要表单验证的文件中引用，注意： 要与封装方法中的传参字段要对应，尤其是rule中的对应参数。
代码如下（这里用uni-app为例）：


<template>
	<view>
		<page-head title="form"></page-head>
		<view class="uni-padding-wrap uni-common-mt">
			<form @submit="formSubmit" @reset="formReset">
				<view class="uni-form-item uni-column">
					<view class="title">姓名</view>
					<input class="uni-input" name="nickname" placeholder="请输入姓名" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">性别</view>
					<radio-group name="gender">
						<label>
							<radio value="男" /><text>男</text>
						</label>
						<label>
							<radio value="女" /><text>女</text>
						</label>
					</radio-group>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">爱好</view>
					<checkbox-group name="loves">
						<label>
							<checkbox value="读书" /><text>读书</text>
						</label>
						<label>
							<checkbox value="写字" /><text>写字</text>
						</label>
					</checkbox-group>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">年龄</view>
					<slider value="20" name="age" show-value></slider>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">保留选项</view>
					<view>
						<switch name="switch" />
					</view>
				</view>
				<view class="uni-btn-v">
					<button form-type="submit">Submit</button>
					<button type="default" form-type="reset">Reset</button>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
	import graceChecker from "../../../common/graceChecker.js"  //引入
	export default {
		data() {
			return {}
		},
		methods: {
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
				//定义表单规则
				var rule = [{
						name: "nickname",   //对应表单项的name
						checkType: "string",  //对应需要验证的类型，此处为字符验证
						checkRule: "1,3",	//验证规则传参，根据该值判断
						errorMsg: "姓名应为1-3个字符"  //提示信息
					},
					{
						name: "gender",
						checkType: "in",
						checkRule: "男,女",
						errorMsg: "请选择性别"
					},
					{
						name: "loves",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "请选择爱好"
					}
				];
				//进行表单检查
				var formData = e.detail.value;
				var checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					uni.showToast({
						title: "验证通过!",
						icon: "none"
					});
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},
			formReset: function(e) {
				console.log('清空数据')
			}
		}
	}
</script>
 
<style>
	.uni-form-item .title {
		padding: 20rpx 0;
	}
</style>

总结

大家可以参考上面代码封装自己的轮子，重要的是实现逻辑，这样不管在什么项目中都可以在不依赖第三方库的情况下自己编写验证规则。请添加图片描述

花海海
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js-checker:一个javascript类型检查器
05-23
js检查器 js-checker是一个javascript类型检查器。 它可以自动生成界面文档。 安装 # install js-checker npm install js-checker # run test npm run test # get demo .html file npm run html 例子 let { c , t , renderHtml , getHtml } = require ( 'js-checker' ) ; let personType = c . Obj ( { age : t . Num , nick : t . Num , favourites : c . Arr ( t . Str ) , details : c . Optional ( t . Any ) } ) ; //generate interfac
uniapp graceChecker.js 表单验证
weixin_59685936的博客
06-21 414
uniapp graceChecker.js 表单验证
uniapp-表单判断处理
热门推荐
qq_43239475的博客
02-14 2万+
&lt;template&gt; &lt;view&gt; &lt;!-- &lt;page-head :title="title"&gt;&lt;/page-head&gt; --&gt; &lt;view class="uni-padding-wrap"&gt; &lt;form @submit="formSubmit" @r
前端表单验证工具类 - graceChecker
一个搬砖工人
08-31 415
【代码】前端表单验证工具类 - graceChecker。
uniapp表单验证方法封装
weixin_44694389的博客
12-10 2244
本次代码完全是uniapp官方源码，写在这里是记录笔记，如果想看源码，可以打开uniapp软件新建项目，选择uniapp官方项目案例即可。 本次目的是学习代码规范，因为觉得自己写的代码太臃肿，后期维护太难。 1.在根目录新建文件common,在文件里面新建一个js文件，名称随意。 //graceChecker.js /** 数据验证（表单验证） 来自 grace.hcoder.net 作者 hcoder 深海 */ export default { error:'', check : fu
Laravel中使用FormRequest进行表单验证方法及问题汇总
12-18
今天天气不错，我们来说说表单验证。 Controller中做表单验证 有的同学把表单验证逻辑写在Controller中，例如这个对用户提交评论内容的验证： <?php // ... use Validator; class CommentControlle
JSValidation-----强大而灵活的表单客户端验证框架
07-31
它将常见的校验（目前支持13种）封装起来，并创造性的采用xml来存贮表单验证信息，使得表单的验证成为整个项目中最不重要的环节，开发者只需要定义几个xml标记，就可以创建出复杂的验证策略，而不用编写一行...
lamp-cloud微服务脚手架
10-20
基于Mybatis-plus-generator自定义了一套代码生成器， 通过配置数据库字段的注释，自动生成枚举类、数据字典注解、SaveDTO、UpdateDTO、表单验证规则注解、Swagger注解等。 16、定时任务调度器： 基于xxl-jobs进行了...
lamp-cloud微服务脚手架-其他
06-11
基于Mybatis-plus-generator自定义了一套代码生成器， 通过配置数据库字段的注释，自动生成枚举类、数据字典注解、SaveDTO、UpdateDTO、表单验证规则注解、Swagger注解等。 16、定时任务调度器： 基于xxl-jobs进行了...
twitter-demo
04-28
封装良好的表单验证（用于tweet长度）。 我认为，这种模式可以很好地扩展到其他用例。 有效的Java爱好者将很乐意发现1、2、4、13、14、15、16、21、22、29、34、45、46、52等项目：） ！ 这是一款类似于生产的...
js 特效 html 特效 BrowserCheck脚本
06-13
js 特效 html 特效 BrowserCheck脚本
【js--封装组件】表单校验
qwe_ee的博客
09-21 698
js-表单校验
js正则验证以及通用封装方法
最新发布
80岁小姑娘的博客
09-27 174
【代码】js正则验证以及通用封装方法。
一个好用的表单验证方法封装
写点什么好
07-01 450
在项目中，我们时刻都需要做表单验证。在网上找到一个很好用的表单验证的封装，忘记是谁的了。 首先在工具类，也就是utils文件夹下创建一个validate.js文件。 /** * 表单验证 * * @param {Object} rules 验证字段的规则 * @param {Object} messages 验证字段的提示信息 * */ class Validate { constructor(rules = {}, messages = {}) { Object.assign(
Vue --- 正则共用和表单校验封装方法
WuqibuHuan的博客
11-24 1796
** 1.在view/api 目录下创建pattern.js文件 ** //整数 const IntegerRegex = /(^-?[1-9]\d*)|(0{1})$/ //正整数 const IntegerPlusRegex = /^[1-9]\d*|0$/ //小数 const decimalRegex = /^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$/ //正小数 const decimalPlusRegex = /^[+]{0,1}(\d+)$|^
基于async-validator的表单验证validateRules.js封，iView、element的通用验证封装函数，包含常用手机、邮箱、身份证、验证码、QQ号码、微博账号、最小、最大等验证
weixin_39703282的博客
03-19 2097
开发基于Vue.js使用Element UI、iView UI的项目时，写验证和常用自定义验证可以封装成独立函数，调用时轻松调用 validate.js /** * @description 表单验证封装 * @author WXF * @update 2019-06-20 */ export const regExp = { // 10字符必填（同理20字符必填，50字符必填，1500字符必填） validateLen(rule, value, callback) { let
javaScript-06 表单验证 详细易懂，加案例分析
YZZdear的博客
03-29 2025
JavaScript表单验证，全网最详细
this.$graceChecker.check 多行文本 换行符 非空校验不通过
qq_29384639的博客
02-25 530
问题： <textarea maxlength="200" class="replyform-textarea" v-model="replyform.itemContent" placeholder="请输入..." /> var rule = [ { name: 'itemContent', checkType: 'string', checkRule: '1,200', errorMsg: '请输入事项内容' } ];
react入门—实现复杂表单方法的封装以及表单验证功能的实现（表单验证方法的封装优化）
weixin_45745641的博客
03-11 1340
文章目录前言复杂表单页面的实现表单验证方法 前言 在前端开发中，表单验证是很常见的功能，这边文章就来讲一下react入门实现复杂表单的功能，以及表单验证功能的实现 复杂表单页面的实现 实现一个表单页面，包含输入框，单选框和下拉框，点击提交能够拿取输入的数据 1.首先定义我们的非受限组件Hello，并在state中定义我们需要用到的变量： class Hello extends React.Component { state = { name: '',
react高阶组件使用场景
06-06
2.逻辑抽象：有些逻辑可能与具体的组件实现无关，例如表单验证、访问控制等，这时候可以将这些逻辑封装到 HOC 中，使得组件的实现更加简洁。 3.性能优化：有些操作可能会对性能产生影响，例如数据获取、渲染优化等...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值