当前位置：文江博客话题详情

avalon 用ajax提交表单怎样调用onValidateAll

发布于 2022-09-03 19:12:05 字数 48 浏览 9 评论 0

表单提交方式是ajax，在提交时，怎样调用onValidateAll，验证表单数据

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（1）

旧城烟雨 2022-09-10 19:12:05

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>validate</title>
    <link rel="stylesheet" type="text/css" href="http://cdn.amazeui.org/amazeui/2.7.1/css/amazeui.min.css">
</head>

<body>
    <div ms-controller="vm" class="am-container">
        <form class="am-form am-form-horizontal" :validate="@validate">
            <div class="am-form-group">
                <label class="am-u-sm-2 am-form-label">姓名</label>
                <div class="am-u-sm-10">
                    <input type="text" placeholder="输入姓名" :duplex="@username" :rules='{required:true,chs:true,minlength:2,maxlength:5}' data-required-message="姓名必须填写" data-chs-message="姓名必须中文" data-minlength-message="姓名最少2个字" data-maxlength-message="姓名最多5个字" />
                </div>
            </div>
            <div class="am-form-group">
                <label class="am-u-sm-2 am-form-label">密码</label>
                <div class="am-u-sm-10">
                    <input type="password" :duplex="@password" :rules='{required:true}' data-required-message="密码必须填写" />
                </div>
            </div>
            <div class="am-form-group">
                <div class="am-u-sm-10 am-u-sm-offset-2">
                    <button type="submit" class="am-btn am-btn-default">提交</button>
                    <span class="am-margin-left am-text-danger">{{@errmsg}}</span>
                </div>
            </div>
        </form>
    </div>
    <script src="http://cdn.bootcss.com/avalon.js/2.1.6/avalon.min.js"></script>
    <script>
    var vm = avalon.define({
        $id: 'vm',
        username: '',
        password: '',
        errmsg: '',
        validate: {
            onValidateAll: function(reasons) {
                // 针对整个表单提交
                // 返回一个数组，如果长度为零说明没有错
                if (reasons.length) {
                    vm.errmsg = reasons[0].getMessage();
                } else {
                    // console.log('全部通过');
                    vm.errmsg = '';
                    alert('全部通过');
                    // do your ajax function
                }
            },
            onError: function(reasons) {
                // 针对单个表单元素（使用了ms-duplex的input, select）
                vm.errmsg = reasons[0].getMessage();
            },
            onSuccess: function() {
                // 针对单个表单元素
                vm.errmsg = '';
            },
            onComplete: avalon.noop, // 针对单个表单元素
            onReset: avalon.noop, // 针对单个表单元素
            validateInBlur: true, // {Boolean} true，在blur事件中进行验证,触发onSuccess, onError, onComplete回调
            validateInKeyup: true, // {Boolean} true，在keyup事件中进行验证,触发onSuccess, onError, onComplete回调
            validateAllInSubmit: true, // {Boolean} true，在submit事件中执行onValidateAll回调
            resetInFocus: true, // {Boolean} true，在focus事件中执行onReset回调,
            deduplicateInValidateAll: false // {Boolean} false，在validateAll回调中对reason数组根据元素节点进行去重
        }
    });
    </script>
</body>

</html>

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

21 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

不再见

文章 0 评论 0

真是无聊啊

文章 0 评论 0

樱娆

文章 0 评论 0

浅语花开

文章 0 评论 0

烛光

文章 0 评论 0

绻影浮沉

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文