jquery多功能表单验证插件

jquery多功能表单验证插件

jquery多功能表单验证2.0,重写验证方法。用起来更方便,更随意。可以自定义验证,异步验证手机号或者用户名是否存在。提交表单前可以做些什么,由于方法用了部分es6语法,所以ie9以下是不兼容的。input输入框验证,多选,单选,下拉验证,可异步修改提示,表单异步提交。

有什么建议,或者看不懂说明、发现有什么bug的。请在下面留言。

1、表单可以submit提交,也可以ajax异步提交。ajax异步提交表单会返回参数

2、所有提示都有默认的提示,也可以自定义提示。

使用方法

第一个数组是要验证的input,第二个数组是配置一些基本参数。验证多选框、单选框、下拉框。发送短信按钮配置。

在头部引入JS文件。

1
2
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/mvalimin.js"></script>

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
$.myvali([{
            id: $('.req'), // 验证$('id')、注意:不是直接写id或者class
            reqTps: '必填选项,提示可自定义', // 必填自定义提示
            min: 2, // 最小长度
            minTps: '最小长度2,提示可自定义', // 最小长度提示
            max: 4, // 最大长度
            maxTps: '最大长度4,提示可自定义', // 最大长度提示
            equally: $('.req1'), // 验证两个值是否一样,最好两个一起验证,验证此项时,回调函数fn不会执行
            equallyTps: '密码不一样', // equally提示,提示最好跟要验证的对象的提示一样
            customRule: /^1d{10}$/, // 自定义正则验证
            customRuleTps: '手机号格式不正确', // 自定义正则验证提示
            isPhone: true, // 验证手机号是否可以注册,设置true
            isCor: false, // 验证通过,true/false,配合回调函数fn异步修改提示用
            fn: function() { // 验证回调函数。验证手机号是否已注册或者昵称是否存在.注意:设置equally参数时,回调函数不会执行
                var m = $(this);
                // 演示异步修改提示用
                setTimeout(function() {
                    // 异步设置提示
                    m[0].reqTps = '演示异步修改提示,账号可以注册';
                    // 设置true,验证通过
                    m[0].isCor = true;
                }, 1000)
            },
        }, ], [{
            submitBtn: '.btn', // (必填)表单提交按钮id
            submitForm: '.myvali', // (必填)表单id
            subMode: 'ajax', // (必填)表单提交方式,submit提交需要写submit参数,其他提交方式随便写
            isSubmit: false, // 如果表单是submit提交,可以阻止submit提交,true可以提交
            // 全部验证通过,表单提交前的回调函数。ajax提交时有返回参数
            // 第一个参数是input(不包括多选,单选,下拉框)验证通过的值,json格式
            // 第二个参数是多选框或者单选框选中的值,二维数组,1是选中状态[0,1,0,1],第几个1就是第几个选中状态
            // 第三个参数是下拉框选择的二维数组,返回的是下拉框选择的text值
            submitFnc: function(forser, checkboxArr, selectorArr) {
                var m = $(this);
                // 演示ajax延迟提交表单
                setTimeout(function() {
                    alert('表单ajax提交成功!返回参数' +
                        'n' + 'input参数 ' + JSON.stringify(forser) +
                        'n' + '多选框,单选框的参数 ' + JSON.stringify(checkboxArr) +
                        'n' + '下拉框的参数 ' + JSON.stringify(selectorArr)
                    )
                    // 设置为true,表单即可提交
                    m[0].isSubmit = true;
                }, 2000)
            },
            msgBtn: '.codebtn', // 短信发送按钮
            msgPhoneId: $('.phone'), // 要验证发送短信的手机号id
            msgBtnDate: 5, // 短信发送时间,不写默认60S
            msgFnc: function() { // 点击发送短信按钮函数
                console.log($('.phone').val())
            },
            corTps: '√', // 所有验证正确的提示
            checkbox: [ // 验证多选框,单选框
                $('.checkbox'), // 要验证的最外层元素
                $('.checkbox1'),
                $('.radio'),
            ],
            checkboxTps: [ // 选择框提示、不写会有默认提示
                '请选择兴趣',
                '请选择职业',
                '请选择性别',
            ],
            selector: [ // 验证下拉框
                $('.selector'),
                $('.selector1'),
            ],
            selectorTps: [ // 下拉框提示、不写会有默认提示
                '请选择收入',
                '请选择支出',
            ]
        }]
当前内容只有登录了才能查看,如果您已经注册,请登录
0

发表评论