提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

接私活福音，validation组件敏捷开发，效率提升5倍！

组件 开发
2023-03-14 22:50:28 时间

本文摘要

·对于10,000元以下的外包项目，有很多表单需要提交，一般我们需要在form表单、js代码、后端代码中重复写3遍元素name值，而且在前端页面无法对输入进行验证与拦截，这样接活赚钱的效率太低了（哈哈）！

·本文将介绍一个在jquery.validation框架上二开的组件，帮助大家无脑开发。

作者：CSDN 征途黯然.

一、组件介绍

  本validation组件是基于jquery.validation进行二开的，其官方网址是: jQuery Validate 官网,文档与例子的参考地址是：jQuery Validate 插件。

  组件的最终效果如下图：

image.png

  本组件支持的功能如下：

    · 前端数据验证
    · 支持字长限制、控制限制、手机号限制、邮箱地址限制等等等等

    · form表单ajax提交
    · 选中（多）行数据
    · 搜索表格内容
    · 按表头排序
    · 分页【这个是服务器端分页，即时请求】

二、组件使用说明

   获取组件源代码，您可以关注公众号‘三黄工作室’回复‘validation’获取。项目的目录树如下图所示：

image.png

  其中，message_zh.json存放国际化资源，主要用来做中文显示；其他都是组件需要用到的资源文件。

  下载好源代码后，大家可以修改index.html里面的代码来测试不同的效果，最后移植到自己的项目中就可以了。

三、组件参数详解

   index.html文件内容如下：

<html>
    <title>组件二 | 表单验证</title>

    <!-- jquery -->
    <script src="plugs/jquery/jquery-3.3.1.min.js" type="text/javascript"></script>
    <!-- 前端数据验证 -->
    <script src="plugs/validation/jquery.validate.min.js"></script>
    <!-- form表单ajax提交支持 -->
    <script src="plugs/validation/jquery.form.min.js"></script>
    <!-- 前端数据验证 国际化语言包 -->
    <script src="plugs/validation/i18n/messages_zh.js"></script>

<body>
    <script>

        $().ready(function() {
            $("#commentForm").validate({

                submitHandler: function(form) {
                    // form表单提交 会跳转到新页面
                    // form.submit();

                    // ajax提交
                    $(form).ajaxSubmit({
                        success:(data)=>{
                            console.log(data)
                        },
                        // 提交成功后清空表单
                        clearForm: true,
                        // 提交成功后重置表单
                        resetForm: true
                    });     
                    
                },

                // 验证无误 显示信息
                success: function(label) {
                    label.text("格式正确");
                }
            });

            // 重置表单按钮
            $("#reset").click(function() {
                validator.resetForm();
            });
        });
    </script>
        
    <form id="commentForm" method="post" action="API.php" >
        <fieldset>
            <legend>输入您的名字，邮箱，URL，备注。</legend>
            <p>
                <label for="cname">Name (必需, 最小两个字母)</label>
                <input id="cname" name="name" minlength="2" type="text" required>
            </p>
            <p>
                <label for="cemail">E-Mail (必需)</label>
                <input id="cemail" type="email" name="email" required>
            </p>
            <p>
                <label for="curl">URL (可选)</label>
                <input id="curl" type="url" name="url">
            </p>
            <p>
                <label for="ccomment">备注 (必需)</label>
                <textarea id="ccomment" name="comment"></textarea>
            </p>
            <p>
                <input class="submit" type="submit" value="Submit">
            </p>
        </fieldset>
    </form>
</body>
</html>

   【引入资源文件】----第4-11行，引入了必要的css、js资源，各自的作用详见注释；


  【表格基本样式】----第49-72行，添加了一个form表单，必须有id值，需要设置methon、action属性，方便jq插件自动提交表单。每个input标签可以写入必要的validation限制，详情参考网站：：jQuery Validate 插件。


  【引入资源文件】----第14-47行，初始化validation表单，详细配置见注释。21行是采用默认表单提交行为，24-32行是采用ajax提交行为，里面有成功回调函数、清除表单等。

相关文章