微信小程序表单验证

心已赠人 2023-06-17 08:57 3阅读 0赞

由于微信小程序表单组件没有自带的验证功能，因此要针对每一项进行判断比较繁琐 因此封装了一个表单验证js, 具体验证规则根据自己所用到的进行添加,具体案例代码片段点击链接[微信小程序表单验证完整代码片段][Link 1]  
或者在微信小程序开发工具导入ID qGhpXdmZ7ydI

const form = { 
        /* @formData 要验证的表单数据 @rules 验证规则 required必填 ***/
        validation(formData, rules) { 
            for (let item of rules) { 
                let key = item.name;
                let ruleArr = item.rule;
                let msgArr = item.msg;
                if (!key || !ruleArr || ruleArr.length === 0 || !msgArr || msgArr.length === 0) continue
                for (let i = 0; i < ruleArr.length; i++) { 
                    let ruleItem = ruleArr[i];
                    let msg = msgArr[i];
                    if (!ruleItem || !msg) continue
    
                    let value = null;
                    if (ruleItem.indexOf(":") != -1) { 
                        let temp = ruleItem.split(":");
                        ruleItem = temp[0];
                        value = temp[1];
                    }
    
                    let isError = false;
                    switch (ruleItem) { 
                    case "required":
                        isError = form.isNull(formData[key]);
                        break;
                    case "isEmail":
                        isError = !form.isEmail(formData[key]);
                        break;
                    case "isTel": 
                        isError = !form.isTel(formData[key]);
                        break;
                    case "isSpecialWord":
                        isError = !form.isSpecialWord(formData[key]);
                        break;
                    case "minLength":
                        isError = !form.minLength(formData[key], value)
                        break;
                    case "maxLength":
                        isError = !form.maxLength(formData[key], value)
                        break;
                    default:
                        break;
                    }
    
                    if (isError) { 
                        wx.showToast({ 
                            title: msg,
                            icon: 'none'
                        })
                        return false
                    }
                }
            }
            return true;
        },
        isNull(value) { 
            if (typeof value == 'object') { 
                for (let prop in value) { 
                    if (typeof value[prop] == 'object') { 
                        for (let prop2 in value[prop]) { 
                            if (value[prop][prop2] === null || value[prop][prop2] === '' || value[prop][prop2] === undefined) { 
                                return true
                            } else { 
                                return false
                            }
                        }
                    }
                }
            }
            return (value === null || value === '' || value === undefined) ? true : false;
        },
        isEmail(value) { 
            return /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){ 1,63}[a-z0-9]+$/.test(value);
        },
        isTel(value) { 
            return /^(?:13\d|14\d|15\d|16\d|17\d|18\d|19\d)\d{ 5}(\d{ 3}|\*{ 3})$/.test(value);
        },
        isSpecialWord(value) { 
            //是否包含特殊字符
            let regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/,
                regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\]]/;
            return (regEn.test(value) || regCn.test(value)) ? false : true
        },
        minLength(value, min) { 
            return value.length >= Number(min)
        },
        maxLength(value, max) { 
            return value.length <= Number(max)
        }
    };
    module.exports = { 
        validation: form.validation
    };

[Link 1]: https://developers.weixin.qq.com/s/qGhpXdmZ7ydI

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序下表单验证的插件：WxValidate.js

（1）将WxValidate.js文件复制到utils文件夹中。（2）将WxValidate.js作为模块载入到需要用到的页面js文件中： A .CommonJS

淡淡的烟草味﹌/ 2023年07月19日 10:44/ 0 赞/ 10 阅读

相关微信小程序表单验证

由于微信小程序表单组件没有自带的验证功能，因此要针对每一项进行判断比较繁琐因此封装了一个表单验证js, 具体验证规则根据自己所用到的进行添加,具体案例代码片段点击链接[微信小

心已赠人/ 2023年06月17日 08:57/ 0 赞/ 4 阅读

相关微信小程序开发之表单验证（WxValidate使用）

微信小程序的开发框架个人感觉大体上跟VUE是差不多的，但是他的表单组件没有自带的验证功能，因此开发小程序的表单验证时候一般有两种方法，一是自己裸写验证规则，但是需要比较扎实的正

小灰灰/ 2022年11月13日 06:22/ 0 赞/ 500 阅读

相关微信小程序提交form表单内容

wxml <form catchsubmit="confirmPublish"> <view class="cu-form-group margin-to

矫情吗；*/ 2022年10月10日 04:44/ 0 赞/ 232 阅读

相关微信小程序-验证码

1.服务器 package com.ruoyi.project.system.user.controller; import java.awt.

布满荆棘的人生/ 2022年05月15日 07:58/ 0 赞/ 335 阅读

相关 6.微信小程序之表单提交

用户输入内容，点击提交，提交后显示提交内容。点击确认，显示提交成功；点击取消，显示取消提交 1.![70][] 2.![70 1][] 3.![70 2][] 4.![

曾经终败给现在/ 2022年05月08日 09:24/ 0 赞/ 2352 阅读

相关微信小程序表单验证WxValidate使用

请访问 GITHUB [https://github.com/skyvow/wx-extend][https_github.com_skyvow_wx-extend] 下载W

╰半橙微兮°/ 2022年01月30日 23:45/ 0 赞/ 344 阅读

相关微信小程序-表单弹窗示例

[https://blog.csdn.net/w10322331/article/details/80348848][https_blog.csdn.net_w10322331

柔光的暖阳◎/ 2021年12月12日 13:59/ 0 赞/ 691 阅读

相关微信小程序开发—(十四)表单验证2

一.知识点 1.是否为空 if(e.detail.value.userName.length==0||e.detail.value.psw.length==0||e

ゝ一纸荒年。/ 2021年09月12日 07:04/ 0 赞/ 499 阅读

相关微信小程序表单 form 组件

[完整微信小程序(Java后端) 技术贴目录清单页面（必看）][Java_] 表单。将组件内的用户输入的[switch][] [input][] [checkbox][]

爱被打了一巴掌/ 2021年09月08日 01:08/ 0 赞/ 582 阅读