表单验证

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. C#设计模式之工厂方法

    工厂方法模式: 1.不再提供一个按钮工厂类来统一负责所有产品的创建,而是将具体按钮的创建过程交给专门的工厂子类去完成 如果出现新的按钮类型,只需要为这种新类型的按钮定义一个具体的工厂类就可以创建该新按 ...

  2. 对DIP IoC DI的理解与运用

    DIP,IoC,DI基本概念 依赖倒置原则(DIP,Dependency Inverse Principle):强调系统的“高层组件”不应当依赖于“底层组件”,并且不论是“高层组件”还是“底层组件”都 ...

  3. sybase 收集常用sql语句

    -------创建sybase设备 语句--------- disk init name="DEV_DB_CLIENT_DAT26", physname="F:\syba ...

  4. Logistic回归的使用

    Logistic回归的使用和缺失值的处理 从疝气病预测病马的死亡率 数据集: UCI上的数据,368个样本,28个特征 测试方法: 交叉测试 实现细节: 1.数据中因为存在缺失值所以要进行预处理,这点 ...

  5. java中的继承与oc中的继承的区别

    为什么要使用继承? 继承的好处: (1)抽取出了重复的代码,使代码更加灵活 (2)建立了类和类之间的联系 继承的缺点: 耦合性太强 OC中的继承 1.OC中不允许子类和父类拥有相同名称的成员变量名:( ...

  6. NewBluePill源码学习

    NewBluePill的源码也看的差不多了,一直说等有时间了再写学习的一些心得,拖来拖去弄到现在了,时间不是等来的,慢慢开始吧. 0x00     初识硬件虚拟化 硬件虚拟化对大数人来讲还是比较陌生. ...

  7. sar命令的使用

    http://blog.csdn.net/wudiyi815/article/details/7494847 http://blog.csdn.net/colin_liu2009/article/de ...

  8. Java上传截断漏洞的解决方案

    文件上传漏洞解决方案 1. 最有效的,将文件上传目录直接设置为不可执行,对于Linux而言,撤销其目录的'x'权限:实际中很多大型网站的上传应用都会放置在独立的存储上作为静态文件处理,一是方便使用缓存 ...

  9. iOS 设置1像素的UIView线

    如果是代码实现,直接 在CGRectMake里把对应的参数设置为: 1.0/[UIScreenmainScreen].scale 即可.         如果是用xib实现,就需要将对应的限制拖一个I ...

  10. Scala：映射和元组

    映射是键值对偶的集合.Scala有一个通用的叫法——元组:n个对象的聚集,并不一定要相同的类型. 构造映射 键A -> 值B scala> val scores = Map()//不可变映 ...