表单使用avalon2 ms-validate 进行验证后无法跳转？

发布于 2022-09-03 19:21:34 字数 2462 浏览 18 评论 0

表单使用avalon2 ms-validate 进行验证后,所有字段验证通过，但点击按钮页面不会跳转。

如果我直接删除form标签的ms-validate属性，则可以正常跳转。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://cdn.bootcss.com/avalon.js/2.1.5/avalon.js"></script>
    <script>
        var vm = avalon.define({
            $id: 'register',
            username: '',
            password: '',
            repeat: '',
            validate: {
                onError: function (reasons) {
                    reasons.forEach(function (reason) {
                        console.log(reason.getMessage());
                    })
                },
                onValidateAll: function (reasons) {
                    if (reasons.length) {
                        console.log('有表单没有通过')
                    } else {
                        console.log('全部通过')
                    }
                }
            }
        })
    </script>
</head>
<body ms-controller="register">
    <div ms-validate="@validate">
        <form action="/register" method="post" ms-validate="@validate">

            <label>Username</label>
            <input  type="text" 
                    name="username" 
                    ms-duplex='@username' 
                    ms-rules="{required:true}" 
                    data-required-message="请输入您的名字">
            <br>

            <label>Password</label>
            <input  type="password" 
                    id="password" 
                    name="password" 
                    ms-duplex='@password' 
                    data-required-message="请输入您的密码">
            <br>

            <label>Repeat password</label>
            <input  type="password" 
                    id="repeat" 
                    name="repeat" 
                    ms-duplex='@repeat | change' 
                    ms-rules="{required:true,equalto:'password'}" 
                    data-equalto-message="两次密码输入不一致">
            <br>

            <input class="btn btn-danger" type="submit" value="Register">
        </form>
    </div>
</body>
</html>

图片描述