element-ui 复杂form校验

最新推荐文章于 2025-05-29 15:46:55 发布

风儿轻丶

最新推荐文章于 2025-05-29 15:46:55 发布

阅读量3.6k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_21423689/article/details/81018654

本文介绍了一个用于前端表单验证的JavaScript函数，该函数确保用户输入为正整数，并针对不同输入字段提供了定制化的错误提示信息。通过正则表达式检查输入的有效性，实现了对宫格宽、宫格高、滚屏宽和滚屏高等字段的验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var validateNumber = (rule, value, callback) => {
			let errobj={
				widthinputgg:'请输入宫格宽',
				heightinputgg:'请输入宫格高',
				widthscroll:'请输入滚屏宽',
				heighscroll:'请输入滚屏高',
			};
			let reg = /^([1-9])([0-9]*)$/;
			if(this.ruleForm.gridOrRelative == 6 || this.ruleForm.gridOrRelative == 8) {
				if(!value) {
					callback(new Error(errobj[rule.fullField]));
				} else {
					if(!reg.test(value)) {
						callback(new Error('请输入一个正整数'));
					}
				}
			}
			callback();
		};

form绑定的数据

在rule数组里

rules: {				
				widthinputgg: [
					{
						validator: validateNumber,
						trigger: 'blur'
					}
				],
				heightinputgg: [
					{
						validator: validateNumber,
						trigger: 'blur'
					}
				],
				widthscroll: [
					{
						validator: validateNumber,
						trigger: 'blur'
					}
				],
				heighscroll: [
					{
						validator: validateNumber,
						trigger: 'blur'
					}
				]
			},