33avalon - 指令ms-validate(验证绑定)

简介: 33avalon - 指令ms-validate(验证绑定)

avalon2新引入的指令,只能用于form元素上,用于为表单添加验证功能,它需要与ms-duplex, ms-rules指令一起配合使用。

ms-validate的值应该对应一个对象,由于对象比较大,建议写在vm,像下面那样:

vm.validate = {
   onValidateAll: function(reasons){
     //返回一个数组,如果长度为零说明没有错
   },
    onError: avalon.noop,//针对单个表单元素(使用了ms-duplex的input, select)
    onSuccess: avalon.noop,//针对单个表单元素
    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数组根据元素节点进行去重
}

在一般情况下validateInBlur, validateInKeyup,validateAllInSubmit,resetInFocus都是默认的就行了。

onError,onSuccess,onComplete, onValidateAll的第一个参数都是reasons对象,this指向被验证的元素,reason里面有你需要的各种东西.

var reason = {
    element: elem,
    data: field.data,
    message: elem.getAttribute("data-" + ruleName + "-message") || elem.getAttribute("data-message") || hook.message,
    validateRule: ruleName,
    getMessage: getMessage
}

例子:

<body>
<script>
    var vm = avalon.define({
        $id: "test",
        action: '',
        name: '',
        add: function(e) {
            e.preventDefault()
            this.action = "add.php";
            this.validate.onManual();
        },
        update: function(){
            this.action = "update.php";
            this.validate.onManual();
        },
        validate: {
            validateAllInSubmit: false,
            onSuccess: function(reasons, event) {
                console.log('成功',reasons)
            },
            onError: function(reasons, event) {
                console.log('有验证没有通过')
            },
            onValidateAll: function(reasons) {
                var form = this
                if(reasons.length) {
                    // 表单有错误
                    console.log("有验证没有通过",reasons);
                    return false;
                } else {
                    // 验证成功
                    form.submit()
                }
            }
        }
    })
</script>
<div ms-controller="test">
    <form :validate="@validate" id="f1" :attr="{ action: @action }">
        <input type="text" placeholder="Insert your Name" :duplex="@name" :rules="{ required: true, number:true }" />
        <input type="submit" value="新建用户" :click="@add"/>
        <input type="submit" value="修改用户" :click="@update"/>
    </form>
</div>
</body>
目录
相关文章
|
7月前
|
存储 人工智能 自然语言处理
0 代码焦虑!阿里云 Bolt.diy 一键解锁你的专属网站,30 分钟惊艳上线
Bolt.diy 是阿里云推出的智能化建站工具,基于函数计算 FC 和百炼模型服务,通过自然语言描述即可快速生成网站。无需本地配置环境,3分钟完成部署,适合各水平用户。支持个性化定制、域名绑定及数据备份,安全可靠。无论是个人博客还是企业官网,都能轻松实现。立即领取免费额度体验:[部署链接](https://www.aliyun.com/solution/tech-solution/fc-bolt-diy?utm_content=g_1000403257)。
267 4
项目中使用antd中的upload组件file对象到底是info.file还是info.file.originFileObj_坑
在Ant Design的Upload组件中,`onChange`事件处理函数接收一个对象参数,其中`file`字段在不同情况下可能是一个File对象或包含`originFileObj`属性的对象。为了兼容,可以使用`info.file.originFileObj ? info.file.originFileObj : info.file`来确保获取到原始的File对象。官方建议这种写法,并将在未来的大版本中统一返回包含`originFileObj`属性的对象。
542 1
项目中使用antd中的upload组件file对象到底是info.file还是info.file.originFileObj_坑
|
8月前
|
JSON JavaScript 前端开发
shpfile转GeoJSON;控制shp转GeoJSON的精度;如何获取GeoJSON;GeoJSON是什么有什么用;GeoJSON结构详解(带数据示例)
在使用Openlayers、leaflet、mapbox等地图控件的时候,GeoJSON几乎是不可避免打交道的数据类型,如果您想要从事gis行业相关的开发工作,本篇文章应该能为您带来一些帮助。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
存储 程序员 编译器
简述 C、C++程序编译的内存分配情况
在C和C++程序编译过程中,内存被划分为几个区域进行分配:代码区存储常量和执行指令;全局/静态变量区存放全局变量及静态变量;栈区管理函数参数、局部变量等;堆区则用于动态分配内存,由程序员控制释放,共同支撑着程序运行时的数据存储与处理需求。
602 22
mapshaper命令:geojson转shp中文乱码的解决方案
mapshaper命令:geojson转shp中文乱码的解决方案
772 0
|
存储 运维 分布式数据库
1T 数据到底有多大?
本文探讨了1TB数据量的实际意义,通过对比日常业务量和数据库处理能力,揭示了1TB数据的庞大。文中指出,虽然一些机构拥有PB级别的数据,但这更多是存储需求而非计算需求。文章最后强调,优化TB级数据处理效率,如将几小时的处理时间缩短至几分钟,对于大多数应用场景来说更为实际和重要。
|
存储 算法 数据安全/隐私保护
基于A律压缩的PCM脉冲编码调制通信系统simulink建模与仿真
本项目展示了一种基于MATLAB 2022a的脉冲编码调制(PCM)算法,用于将模拟信号转换为数字信号。A律压缩是非均匀量化方法之一,适用于语音信号编码,能够提高信噪比和编码效率。核心代码已提供,并附有详细中文注释和操作视频。A律压缩通过调整量化间隔来适应人耳的听觉特性,减少量化噪声,实现高质量的语音通信。此技术广泛应用于电话通信、VoIP和数字音频处理等领域。
|
JSON 前端开发 JavaScript
JSON parse error: Cannot deserialize value of type `java.lang.Integer` from Boolean value
这篇文章讨论了前端Vue应用向后端Spring Boot服务传输数据时发生的类型不匹配问题,即后端期望接收的字段类型为`int`,而前端实际传输的类型为`Boolean`,导致无法反序列化的问题,并提供了问题的诊断和解决方案。
JSON parse error: Cannot deserialize value of type `java.lang.Integer` from Boolean value
|
SQL 关系型数据库 MySQL
MySQL多实例部署:从概念到实操的全面指南
MySQL多实例部署:从概念到实操的全面指南
501 0
|
Java Spring
SpringBoot - @Async异步任务与线程池
SpringBoot - @Async异步任务与线程池
827 1