如何写校验函数

MASAILA 发布于2019-08-20 16:44 / 857人阅读

摘要：前言在项目中经常会用到表单的校验，前端校验会减少对服务器的压力并且能提升用户体验，达到各种交互效果练习通用校验函数编写思考一般校验有哪几种情况从上至下提示语只有一个位置只显示错误的第一条标红不标红错误的相关项每个元素下方提示当前元素的错误提

前言

在项目中经常会用到表单的校验，前端校验会减少对服务器的压力并且能提升用户体验，达到各种交互效果

练习: 通用校验函数编写 思考: 一般校验有哪几种情况

从上至下,提示语只有一个位置只显示错误的第一条(标红/不标红错误的相关项)

每个元素下方提示当前元素的错误提示不适合以弹框的形式显示

提示语在元素右侧弹框安全高度640px以内

程序具体交互?首先得看产品的需求

从上至下校验,只提示按顺序错误的第一个错误信息,失去焦点/值改变立马校验(前提是已经点击过提交按钮了),标红/不标红相应错误的元素

同上,只是错误提示以toast形式显示

校验通过再激活提交按钮,某些还要禁止重复访问(用定时器设置禁止时间长度) 这种适合校验内容少且校验规则是大家普遍有共识的

一、从上至下校验

二、对应校验

思路

思路：表驱动法

设计校验提示信息表校验规则表校验元素表（表的健值对必须要一致，方便通过相同的健获取对应表值）

校验执行的顺序，是否中断校验的标志，校验函数返回值

向外暴露错误回调函数

// 主函数设计：validate(obj, fields, format, callback)
// 说明：
// 1.obj 要校验的元素对象
let obj = {
    "email":"",
    "password": ""
};
// 2.fields要校验的格式type和错误提示信息errMsg
let fields = {
    "email": {
        "type": "emailFormat",
        "errMsg": "邮箱格式错误"
    },
    "password": {
        "type": "passwordFormat",
        "errMsg": "密码格式错误"
    }
};
// 3.format校验的格式对应的函数
let format = {
    "emailFormat": isEmail,
    "passwordFormat": isPassword,
    "emptyFormat": isEmpty
};
// 4.错误回调
const callback = (errMsg, key) => {
    console.log(errMsg, key);
};
// 5.执行顺序 函数返回值已经中断标志
// isBreak是否中断当前某个元素的校验
// result 格式校验的结果 true标示校验正确
// isSuccess 校验主函数的返回值 true表示校验成功
// callback 校验失败要执行的操作
// 一、从上至下校验
map(() => {
    if (isBreak) {
        return false
    }
})
if (result) {
    // 校验成功
} else {
    // 校验失败
    callback(errMsg, key);
    isBreak = true; // 只要有一个校验出错函数就返回校验失败
    isSuccess = false; 
 
}
// 二、对应校验
// 去掉判断是否中断当前校验即可

代码

// 校验函数
const isEmpty = function (str) {
    return str === null || typeof str === "undefined" || str.replace(/^s+|s+$/g, "") ? true : false
};
const isEmail = function (str) {
    return pattern.email.test(str)
};
const isPassword = function (str) {
    return pattern.password.test(str)
};
// 错误回调
const callback = (errMsg, key) => {
    console.log(errMsg, key);
};
// 主函数
const validate = (obj, fields, format, callback) => {
    let isSuccess = true;
    let isBreak = false; // 是否中断校验的标志
    // obj要校验的对象,fields校验提示信息,format校验的格式,callback校验错误的回调函数
    // 函数返回值
    // 通过健一致来获取需要的对应的值
    Object.keys(obj).map((key) => {
        // 检测是否中断map循环
        if (isBreak) {
            return false
        }
        let formats = fields[key]["type"]; // 获取校验的格式
        let errMsg = fields[key]["errMsg"]; // 获取校验的错误提示语
        let validateFun = format[formats]; // 获取校验格式的函数
        let value = obj[key]; // 要校验对象的值
        let result = validateFun(value); // 执行校验函数,传参数(要校验对象的值) 返回true为校验当前校验通过
        if (result) {
            // 校验成功
            console.log("校验成功")
        } else {
            // 校验失败
            callback(errMsg, key);
            isSuccess = false; // 只要有一个校验出错函数就返回校验失败
            isBreak = true;
            console.log("只要有一个错误就退出当前校验");
        }
    });
    return isSuccess; // 只要有一个错误校验就不通过
};
// 用法 对应校验需要配合ui一起使用 callback(errMsg, key) key为校验的元素错误信息ui应与其相关联是否显示
// 1.obj 要校验的元素对象
let obj = {
    "email":"",
    "password": ""
};
// 2.fields要校验的格式type和错误提示信息errMsg
let fields = {
    "email": {
        "type": "emailFormat",
        "errMsg": "邮箱格式错误"
    },
    "password": {
        "type": "passwordFormat",
        "errMsg": "密码格式错误"
    }
};
// 3.format校验的格式对应的函数
let format = {
    "emailFormat": isEmail,
    "passwordFormat": isPassword,
    "emptyFormat": isEmpty
};
// 4.调用
console.log(validate(obj, fields, format, callback));

GPU云服务器云服务器 php写回调函数 java如何校验数字汇编写c语言函数 js如何校验两位小数

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83120.html

使用vue自定义指令开发一个表单验证插件validate.js

摘要：今天就来介绍一下如何利用的自定义指令来开发一个表单验证插件的过程。按照这种方式就能够使用自己开发的这个表单校验插件。这段时间在进行一个新项目的前期搭建，新项目框架采用vue-cli3和typescirpt搭建。因为项目比较轻量，所以基本没有使用额外的ui组件，有时候我们需要的一些基础组件我就直接自己开发了。今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过...

warnerwu 2019-05-23 17:26 评论0 收藏0
使用 EOLINKER 进行接口测试的最佳路径 (上)

摘要：创建测试环境并导入到用例集操作步骤如下动态图创建测试环境并导入到用例集动态图说明第一个页面为测试项目列表页面。第三个页面为前置用例集列表页面。本文内容：测试脚本管理：讲述如何在 EOLINKER 上设计测试项目目录结构。编写测试脚本：讲述如何在 EOLINKER 上编写接口测试脚本。测试脚本执行及报告：讲述如何在 EOLINKER 上执行接口测试脚本，及如何查看和下载测试报告...

lordharrd 2019-08-02 12:06 评论0 收藏0
使用 EOLINKER 进行接口测试的最佳路径 (上)

摘要：创建测试环境并导入到用例集操作步骤如下动态图创建测试环境并导入到用例集动态图说明第一个页面为测试项目列表页面。第三个页面为前置用例集列表页面。本文内容：测试脚本管理：讲述如何在 EOLINKER 上设计测试项目目录结构。编写测试脚本：讲述如何在 EOLINKER 上编写接口测试脚本。测试脚本执行及报告：讲述如何在 EOLINKER 上执行接口测试脚本，及如何查看和下载测试报告...

plokmju88 2019-07-01 10:59 评论0 收藏0
一块小饼干(Cookie)的故事-上篇

摘要：如果非要用汉语理解的话应该是一段小型文本文件，由网景的创始人之一的卢蒙特利在年发明。上述的套路会一直用下去，的组合。应该填入信息后，错误信息就消失的。 cookie 如果非要用汉语理解的话应该是一段小型文本文件，由网景的创始人之一的卢蒙特利在93年发明。上篇是熟悉一下注册的大致流程，下篇熟悉登录流程以及真正的Cookie 实现基本的注册功能我们打开网站，浏览网站，最常见的两个操...

wums 2019-08-26 11:40 评论0 收藏0