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

Question

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

ant_anm

412

发布于
2016-09-22

新手上路，请多包涵

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

avalon

阅读 3.3k

1 个回答

得票最新

seven_tao

6242518

发布于
2016-09-22

<!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>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

相似问题

找不到问题？创建新问题

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

你尚未登录，登录后可以

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