verify.js 极简表单校验插件

cppowboy 发布于2019-08-21 10:41 / 3185人阅读

摘要：这是一款极简洁的表单校验插件，仅行代码，属于半封装模式，可任意编写业务逻辑代码，核心代码如下校验插件判断是否函数表单提交校验全部将单个事件对象追加到数组中，提交表单时遍历执行核心处理方法单个元素注册失焦事件遍历对象提交按钮注册事件返回集合，

这是一款极简洁的表单校验插件，仅50行代码，属于半封装模式，可任意编写业务逻辑代码，核心代码如下：

(function(){
    // 校验插件
    if(!$.fn.hasOwnProperty("verify")){
        $.fn.verify = function(config) {
            var fields = [], item;
            if (!config) return;
            // 判断是否函数
            function isFunction(obj) {
                return !!(obj && obj.constructor && obj.call && obj.apply);
            }
            // 表单提交校验(全部)
            function handleSubmit() {
                var  i, errors = false, len = fields.length;
                for (i = 0; i < len; i++) {
                    if (!fields[i].testValid()) errors = true;
                }
                if (errors) return false;
                if (isFunction(config.success)) return config.success();
            }
            function process(opts, selector) {
                var field = $(selector),
                    error = {message: opts.message || ""},
                    errorEl = config.errorTemplate(error);
                // 将单个input事件对象追加到数组中，提交表单时遍历执行                    
                fields.push(field);
                // 核心处理方法
                field.testValid = function testValid() {
                    var temp, error, el = $(this), val = el.val();
                    error = !opts.test(val);
                    if (error) {
                        el.after(errorEl);
                        return false;
                    } else {
                        temp = errorEl.get(0);
                        temp.parentNode && temp.parentNode.removeChild(temp);
                        return true;
                    }
                };
                // 单个input元素注册失焦事件
                field.on("blur", field.testValid);
            }
            // 遍历对象
            for(item in config.fields) {
                process(config.fields[item], item)
            }
            // 提交按钮注册事件
            if (config.submitButton) {
                $(config.submitButton).click(handleSubmit);
            } else {
                this.on("submit", handleSubmit);
            }
            // 返回集合，供调用
            return fields;            
        }
    }    
})();

插件调用方法如下：

(function(){
    // 注册校验
    $("#register").verify({
        fields:{
            //选中名字字段，设置校验规则
            "#register input[name="phone"]":{
                //错误提示信息
                message:"手机号码格式不正确，请重新输入",
                //校验规则，返回布尔值，true则成功，false则失败，可在此回调函数中插入您的业务逻辑，最终返回bool值就好，极方便
                test:function(val){
                    var reg = /^(1[3-8][0-9])d{8}$/;
                    return reg.test(val);
                }
            },
            "#register input[name="password"]":{
                message:"请输入正确格式的密码",
                test: function (val) {
                    if (!val) return false;
                    var reg = /^[a-zA-Z0-9]{6,20}$/;
                    return reg.test(val);
                }
            },
            "#register input[name="repassword"]":{
                message:"两次密码输入不一致！",
                test:function(val){
                    var password = $("input[name="password"]").val();
                    if(password != val) {
                        return false;
                    } else {
                        return true;
                    }
                }
            }                            
        },
        // 错误模板，设置装载错误信息的容器，插入上面设置的错误提示信息
        errorTemplate:function(error){            
            return $("" + error.message + "");
        },
        //校验成功后的回调方法，可插入校验成功后要执行的逻辑代码
        success:function(){
            //coding~~
        }        
        //表单提交按钮，若未设置，则为默认的form.submit;
        submitButton: "#register .submit"   
    });          
})

原本是想在插件内封装一些固定的表单校验方法，但后来发现各种业务需求千奇百怪，简直众口难调，固以此方式呈现，只封装通用的校验流程，业务逻辑自行穿插，美其名曰：”半封装“，具体优劣各位看官自行研究了，当然，更希望您能够分享自己的见解～～

下附传送门，详细测试demo请自行跳转下载，不谢！
https://github.com/cloverso/verify

GPU云服务器云服务器表单校验异步校验表单 form表单校验 bootstrap校验表单

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

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

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

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

warnerwu 2019-05-23 17:26 评论0 收藏0
va.js——Vue 表单验证插件的写作过程

摘要：一表单验证模块的构成任何表单验证模块都是由配置校验报错取值这几部分构成的。其实我是想写个指令来完成表单验证的事的。当然表单验证这种是高度定制化的。前言前段时间，老大搭好了Vue的开发环境，于是我们愉快地从JQ来到了Vue。这中间做的时候，在表单验证上做的不开心，看到vue的插件章节，感觉自己也能写一个，因此就自己开始写了一个表单验证插件va.js。当然为什么不找个插件呢？ vu...

suosuopuo 2019-08-20 12:30 评论0 收藏0
JQuery填坑系列（二）：动态添加表单校验失效问题

摘要：表单验证用的插件，还用到了下拉列表相关的插件。没想到，这其中暗暗地隐藏着一个个坑。于是看了一下插件的官方文档，它提供了两种方法，可以在表单元素上添加，删除校验规则。表单验证用的jquery validation插件，还用到了下拉列表相关的插件selectize。有这样一个功能，表单中一个下拉列表A的required属性是根据另一个下拉列表B的选择内容来动态变换的。于是想着根据B被选中...

LeviDing 2019-08-23 14:03 评论0 收藏0
巧用 Bootstrap的 popover插件实现表单校验提示

摘要：浏览文档，发现插件特别适合做表单校验出错的提示。因为使的非常频繁，最近把它封住下，做成的插件。通过本插件，在标签中定义好校验正则错误信息即可。点击提交时，如果有表单项目不合法，会阻止表单继续提交。最后调整下，就实现了截图的效果。最近的项目，用Bootstrap比较多。浏览Bootstrap文档，发现 popover 插件特别适合做表单校验出错的提示。因为使的非常频繁，最近把它封住下...

Corwien 2019-08-20 10:35 评论0 收藏0
css進階

摘要：栅格系统用于处理页面多终端适配的问题。它表示抓取对象以后拖放到另一个位置。目前，它是标准的一部分。精简高效的命名准则方法这篇文章发布于年月日，星期日，，归类于相关。但是不会受到包含块的限制，可能会溢出。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由...

import. 2019-08-29 14:07 评论0 收藏0