表单验证

avalon内置了强大的表单验证功能，它需要结合ms-duplex, ms-validate, ms-rules这个三个指令一起使用。

  • ms-duplex负责监控每个表单元素的输入。
  • ms-rules负责对表单元素的值进行各种检测，包括非空验证，长度验测，格式匹配等等。
  • ms-validate负责控制验证的时机，及针对每个表单元素的验证结果触发各种回调。

验证规则定义在avalon.validators对象中, 为一个个带有message与get属性的对象.

 avalon.shadowCopy(avalon.validators, {

     pattern: {

         message: '必须匹配{{pattern}}这样的格式',

         get: function (value, field, next) {

             var elem = field.dom

             var data = field.data

             if (!isRegExp(data.pattern)) {

                 var h5pattern = elem.getAttribute("pattern")

                 data.pattern = new RegExp('^(?:' + h5pattern + ')$')

             }

             next(data.pattern.test(value))

             return value

         }

     },

     digits: {

         message: '必须整数',

         get: function (value, field, next) {//整数

             next(/^\-?\d+$/.test(value))

             return value

         }

     }

  })

手动调用验证并根据点击不同按钮提交不同网址的例子

<!DOCTYPE html>

<html>

    <head>

        <title>ms-validate</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge" />

        <script src="../dist/avalon.js"></script>

        <script>

            avalon.validators.gtOne = {

                message: '必须数字并大于1',

                get: function (value, field, next) {

                    //想知道它们三个参数是什么,可以console.log(value, field,next)

                    var ok = Number(value) > 1

                    next(ok)

                    return value

                }

            }

            var greasons = []

            var vm = avalon.define({

                $id: "test",

                aaa: '',

                url: 'javascript:void(0)',

                message: '',

                submit:  function (url) {//submit是真正的验证方法,通过点击时手动验证

                    vm.validate.onManual()

                    setTimeout(function () {

                        if (greasons.length) {

                            var a = greasons.map(function (el) {

                                return '<p>' + el.getMessage() + '</p>'

                            })

                            vm.message = a.join('')//打印所有错误

                            vm.url = 'javascript:void(0)'

                        } else {

                            greasons = []

                            vm.message = ''

                            vm.url = url

                        }

                    })

                },

                validate: {

                    //禁止提交时自动验证

                    validateAllInSubmit: false,

                    //这个是用来占位的

                    onManual: avalon.noop,

                    //这个转移到sumbit方法

                    onValidateAll: function (reasons) {

                        greasons = reasons.concat()

                    }

                }

            })

        </script>

    </head>

    <body ms-controller="test">

        <form class="cmxform" ms-validate="@validate" ms-attr='{action: @url}' >

            <fieldset>

                <legend>自定义规则</legend>

                <p>

                    <input

                        ms-duplex="@aaa"

                        ms-rules="{required: true, number:true, gtOne: true}"

                        />

                </p>

                <p>

                    <input :click="@submit('/add.php')" type="submit" value="add"/>

                    <input :click="@submit('/update.php')" type="submit" value="update"/>

                </p>

                <p ms-html="@message" style="color: red"></p>

            </fieldset>

        </form>

    </body>

</html>

　　

avalon的表单验证的更多相关文章

  1. jQuery学习之路（8）- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  2. 玩转spring boot——AOP与表单验证

    AOP在大多数的情况下的应用场景是:日志和验证.至于AOP的理论知识我就不做赘述.而AOP的通知类型有好几种,今天的例子我只选一个有代表意义的“环绕通知”来演示. 一.AOP入门 修改“pom.xml ...

  3. form表单验证-Javascript

    Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...

  4. ASP.NET MVC5+EF6+EasyUI 后台管理系统（33）-MVC 表单验证

    系列目录 注:本节阅读需要有MVC 自定义验证的基础,否则比较吃力 一直以来表单的验证都是不可或缺的,微软的东西还是做得比较人性化的,从webform到MVC,都做到了双向验证 单单的用js实现的前端 ...

  5. 实现跨浏览器html5表单验证

    div:nth-of-type(odd){ float: left; clear: left; } .origin-effect > div:nth-of-type(even){ float: ...

  6. jQuery Validate 表单验证 — 用户注册简单应用

    相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...

  7. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  8. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  9. 走进AngularJs 表单及表单验证

    年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeom ...

随机推荐

  1. unrecognized selector sent to instance

    今天长一见识(特此感谢小星星老湿-坏笑),凡是遇到“unrecognized selector sent to instance *******”的都是******方法没有,比如这种的错误: 可以尝试 ...

  2. CDN -- 集合

    weui https://cdnjs.cloudflare.com/ajax/libs/weui/0.4.3/style/weui.min.css 百度静态资源库 http://cdn.code.ba ...

  3. windows 8下配置PLSQLDeveloper

    Win 8 64位系统上安装64 位Oracle,但是没有64位的PL/SQL,不能连接Oracle数据库,怎么办呢?方法是有的:我们可以通过安装32位的Oracle客户端来实现连接. 工具/原料 P ...

  4. python初学杂记

    python常用命令: 1.python 或者 python3  打开交互式python解释器 2.python hello.py   通过命令提示符运行python脚本 交互式python解释器常用 ...

  5. DB2 license过期的问题

    今天启动DB2,无论如何都启动不了,报一个错误:“Windows 不能在 本地计算机 启动 DB2 - DB2COPY - DB2-0.有关更多信息,查阅系统事件日志.如果这是非 Microsoft ...

  6. [perl]字符串转拼音首字母(支持多音字)

    实现的思路是,查表找到该字的所有读音,然后取首字母. 代码: while (<DATA>) { chomp; })(.*)$/; $all =~ s/^\s+//; ### 只保留无音标号 ...

  7. Android Studio 之 no render target selected

    今天第一次使用android studio, 莫名其妙出现 no render target selected的错误,没有设计界面, 各种百度之后在 stackoverflow.com/questio ...

  8. win7 eclipse 调试storm

    windows 下eclipse开发storm 用本地模式,直接run as 运行topology解决了可以什么都不用下,直接把storm-starter的源码下下来,1.在eclipse创建一个ja ...

  9. 搭把手教美工妹妹如何通过升级SSD提升电脑性能

    -----by LinHan 不单单适用于妹子,我这名的意思的妹子也能看懂. 以下教程依据实践和部分互联网资料总结得出,向博客园, CSDN的前辈们致谢:同时,如有说的不正确或有不到位的地方,麻烦指出 ...

  10. NOI 题库 6266

    6266  取石子游戏 描述 有两堆石子,两个人轮流去取.每次取的时候,只能从较多的那堆石子里取,并且取的数目必须是较少的那堆石子数目的整数倍.最后谁能够把一堆石子取空谁就算赢. 比如初始的时候两堆石 ...