小程序表单规则校验

最新推荐文章于 2024-06-06 12:20:30 发布

diamfor

最新推荐文章于 2024-06-06 12:20:30 发布

阅读量633

点赞数

文章标签：小程序 javascript vue.js

本文链接：https://blog.csdn.net/diamfor/article/details/123338334

版权

编写自定义规则

let rule = {
		pic: [
			{
				type: 'string',
				required: true,
				message: '请上传图片',
				trigger: ['change','blur']
			}
		],
		date: [
			{
				type: 'string',
				required: true,
				message: '请选择时间',
				trigger: ['change','blur']
			}
		],
		number: [
			{
				type: 'number',
				required: true,
				min: 15,
				max: 18,
				message: '数字长度在15-18之间',
				trigger: ['blur']
			}
		]
	}

绑定表单数据

let firstForm = {
	pic: [],
	date: '',
	number: ''
}

外部定义一个js文件,通过main.js引入数据

let common = {
//传入 定义的表单数据，自定义的规则
	checkRules(params, rules) {		//表单校验
		for (let key in rules) {     //遍历规则
			let arr = rules[key]
			for (let i = 0; i < arr.length; i++) {
				let rule = arr[i]    // 反向查找表单数据字段对应的规则
				val = params[key]===0?'0':params[key] || ''    // 获取当前规则表单绑定的值
				if (rule.required && (val==='' || val.length === 0)) {	//判断是否非空
					uni.showToast({
						title: rule.message,
						icon: "none"
					}); //当不满足规则时，弹窗弹出提示自定义规则信息message
					return false
				}
				if(rule.pattern && !rule.pattern.test(val)){	// 判断是否满足正则
					uni.showToast({
						title: rule.message,
						icon: "none"
					});
					return false
				}
				if(rule.max && rule.min && val !== ''){
					if(val.length > rule.max || val.length < rule.min){  //判断是否满足最大最小值
						uni.showToast({
							title: rule.message,
							icon: "none"
						});
						return false
					}
				}
				if((rule.min || rule.max) && val !== ''){
					if(val.length < rule.min){
						uni.showToast({
							title: '最小字符长度' + rule.min,
							icon: "none"
						});
						return false
					}
					if(val.length > rule.max){
						uni.showToast({
							title: '最大字符长度' + rule.max,
							icon: "none"
						});
						return false
					}
				}
                // 可以添加其它规则，同理通过val判断是否满足规则条件
                if(val ...){
                    uni.showToast({
                        title:rule.message  //或者自定义提示信息
                        icon: error
                    })
                }
			}
		}
		return true   //当以上条件全部不满足，则校验通过
	}

}

module.exports = common

// 校验规则
import common from './common.js';
Vue.prototype.$common = common;

方法引入

submit() {
				let flag = this.$common.checkRules(this.processFirstForm, this.rules)
                //满足条件返回true
				if(flag){
					// 提交接口
                    //success
					//uni.navigateTo({
						
					//});
				}
			},