表单验证

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. October 24th Week 44th Monday 2016

    True love stories never have endings. 真正的爱情故事永远没有结局. It seems I have been customed to the single lif ...

  2. October 20th Week 43rd Thursday, 2016

    Now, it's clear. OPPO R9s 这一刻 更清晰. I want a new mobile phone, because the one I am using is broken. ...

  3. apache自带的web监控器配置

    第一:将mod_status模块放开,即去掉httpd.conf中的# 第二:在httpd.conf后面添加下面内容 <Location /server-status> SetHandle ...

  4. 简单理解Socket

    题外话 前几天和朋友聊天,朋友问我怎么最近不写博客了,一个是因为最近在忙着公司使用的一些控件的开发,浏览器兼容性搞死人:但主要是因为这段时间一直在看html5的东西,看到web socket时觉得很有 ...

  5. IBatis.Net使用总结（二）-- IBatis返回DataTable/DataSet（网上例子的集合）

    IBatis返回DataTable,DataSet ibatis.net QueryForDataTable 完整的为ibatis.net 引入datatable支持要改动很多地方,所以描述的是最小化 ...

  6. 开发常用之在webstorm中使用cmd

      而今前端开发经常与cmd打交道,如使用个npm什么的,如果老是在ide和cmd之间切换显得比较繁琐,众多前端利器中我最喜欢的就是webstorm,而webstorm中就可以直接使用cmd,如图1, ...

  7. for循环中i--的妙用 及 两变量互换数值的问题

    int[] array = new int[4]; for(int i = 0; i < array.length; i++){ array[i] = (int)(Math.random() * ...

  8. psql-10权限和事务

    用户和角色 用户和角色在整个数据库实例中都是全局的;

  9. iOS @@创建NSURL的字面量

    @@ 是创建 NSURL 的字面量的绝佳方法(例如:@@"http://example.com")

  10. nodejs安装express不是内部或外部命令

    工具/原料  Node.js安装包 方法/步骤  首先下载Node.js安装包,此处我用的是官方最新的v0.10.27 32位版: http://nodejs.org/dist/v0.10.27/no ...