表单验证

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. iOS开发UI篇—CAlayer层的属性

    iOS开发UI篇—CAlayer层的属性 一.position和anchorPoint 1.简单介绍 CALayer有2个非常重要的属性:position和anchorPoint @property ...

  2. ASP.NET知识总结（6.一般处理程序动态处理图片（验证码、水印、缩略图））

    ->使用GDI+完成图片的处理,需要引入程序集System.Drawing ->GDI+的基本处理模型 <1>创建画布Bitmap <2>创建画图工具对象Graph ...

  3. iOS 获取键盘view 覆盖新view

    UIWindow *window = [[[UIApplication sharedApplication] windows] lastObject];    UIView * keyview=[[w ...

  4. 【Java EE 学习 22 下】【单线程下载】【单线程断点下载】【多线程下载】

    一.文件下载简述 1.使用浏览器从网页上下载文件,Servlet需要增加一些响应头信息 (1)response.setContentType("application/force-downl ...

  5. Oracle 11g新特性延迟段创建和truncate的增强

    下面测试Oracle 11g开始的新特性truncate的增强和延迟段空间创建. Oracle从11g开始,当用户创建一张空表的时候不会先分配段和空间,只有当对这张表插入第一行数据的时候才分配段和空间 ...

  6. JS将指定的时间戳转为UTC时间

    Js中获取时间戳可用var dayMiliseconds = parseInt(new Date().valueOf());Js的时间戳单位为毫秒(1s = 1000 ms),下面是一个将制定的格式转 ...

  7. AdaBoost算法分析与实现

    AdaBoost(自适应boosting,adaptive boosting)算法 算法优缺点: 优点:泛化错误率低,易编码,可用在绝大部分分类器上,无参数调整 缺点:对离群点敏感 适用数据类型:数值 ...

  8. PullToRefresh

    PullToRefreshListView的使用,实现下拉刷新,上拉加载更多.首先是布局文件: <com.handmark.pulltorefresh.library.PullToRefresh ...

  9. iOS 开发技巧收藏贴 链接整理

    54个技巧 57个技巧 正则表达式

  10. 诡异的C语言实参求值顺序

    学了这么久的C语言,竟然第一次碰到这么诡异的实参求值顺序问题,大跌眼镜.果然阅读面太少了! #include<iostream> void foo(int a, int b, int c) ...