最近会把一些公司常用的套件做一些整理
下次在使用时可以避免在文档里迷路

Validation Plugin

使用jQuery进行表单验证

CDN

<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/additional-methods.min.js"></script>

github

载点-有提供语言包

作法

在submit表单前，针对form表单内有设定name属性的控制项，进行验证，若没有达成条件，则会在该控制项下方append一个label.error显示错误原因，可以将label.error设成红色字体，让错误讯息更加显眼。

form

        <form id="myForm" method="post">            <label>姓名：</label>            <input type="text" name="NAME" />            <br />            <label>年龄：</label>            <input type="text" name="AGE" />                       <br />            <button type="submit">注册</button>        </form>

js

        var validate = $("#myForm").validate({            rules: {                NAME: {                    required: true                },                AGE: {                    required: true,                    number: true,                    max: 100,                    min: 1                },                          }                });

这时候送出表单，会出现简单的错误讯息，告知你此栏位是必填等。

js

此套件可以输出客製化的错误提示，或是累积出错的项目数。

        var validate = $("#myForm").validate({            rules: {                NAME: {                    required: true                },                AGE: {                    required: true,                    number: true,                    max: 3,                    min: 1                },                          },            //错误提示            messages: {                NAME: "请填写姓名",                AGE: {                    required: "请提供年龄",                    number: "请输入有效的数值",                    max: "最大不能超过99岁",                    min: "至少1岁"                }            },            //出错的项目数            invalidHandler: function () {                alert("尚有 " + validate.numberOfInvalids() + " 项目未填");            }                    });

参考资料