Validform和aui2.0结合使用的表单自定义验证提示和列表页异步获取数据Demo

首页 > 代码库 > Validform和aui2.0结合使用的表单自定义验证提示和列表页异步获取数据Demo

Validform和aui2.0结合使用的表单自定义验证提示和列表页异步获取数据Demo

2024-08-15 15:15:33 216人阅读

二.添加自定义验证演示
    Validform验证提示大多都是在输入框或下拉框的右边或下面。感觉就是不美观，特别是表单字段少的时候，这种在相应对象旁边的提示就没必要了，
   它会给人一种不友好的感觉（只是自己的感觉）。所以下面写了三种添加演示，希望大家能给出建议，以免下次用起来纠结，不知道用哪种好。
   表单验证插件是我们经常使用的Validform_v5.3.2_min.js。先上添加1演示的表单验证js代码，这里我设置了点击提交按钮后才验证。其他添加演示的区别不大，详细的代码可以到文章的底部下载源码。

  <script>        var dialog = new auiDialog({});        var toast = new auiToast();        $(function () {             $(".form1").Validform({                btnSubmit: "#btn_sub",//点击此id按钮时触发                tipSweep:true,//true是提交表单才验证，离开焦点不验证            tiptype:function(msg,o,cssctl){                //是错误的才提示                if (o.type == 3) {                                                          dialog.alert({                        title: "提示",                        msg:msg,                        buttons: [ ‘确定‘]                    }, function (ret) {                        o.obj.focus();//设置当前对象焦点                                            })                }                           },            beforeSubmit: function (form) {                //在验证成功后，表单提交前执行的函数，curform参数是当前表单对象。                //这里明确return false的话表单将不会提交;                $.ajax({                    type: "Post",                    data: form.serialize(),                    dataType: "json",                    url: form.attr("url"),                    success: function (data, textStatus) {                        if (data.status == 1) {                            toast.success({                                title:data.msg,                                duration: 2000                            });                        }                        else                        {                            dialog.alert({                                title: "错误提示",                                msg: data.msg,                                buttons: [‘确定‘],                            }, function (ret) {                                                           })                        }                    },                    error: function (XMLHttpRequest, textStatus, errorThrown) {                        dialog.alert({                            title: "错误提示",                            buttons: [ ‘确定‘],                            msg: ‘状态：‘ + textStatus + ‘错误：‘ + errorThrown,                        }, function (ret) {                        })                    }                });                return false;            }        })        })    </script>

其中的自定义验证是：

    tiptype:function(msg,o,cssctl){                //是错误的才提示                if (o.type == 3) {                                                          dialog.alert({                        title: "提示",                        msg:msg,                        buttons: [ ‘确定‘]                    }, function (ret) {                        o.obj.focus();//设置当前对象焦点                                            })                }                           }

1.添加1自定义验证演示：

alert提示。验证不通过，弹出提示框，点击确认关闭提示框。提示框关闭后才能继续输入。