表单验证

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. 17. Letter Combinations of a Phone Number

    题目: Given a digit string, return all possible letter combinations that the number could represent. A ...

  2. [Android Pro] ScrollView使用fillViewport设置高度为MatchParent

    reference to : http://blog.csdn.net/u012975705/article/details/49275001 之前遇到一问题,就是当使用ScrollView时,Scr ...

  3. Redhat/Ubuntu/Windows下安装Docker

    Redhat/Ubuntu/Windows下安装Docker 什么是Docker Docker是Docker.inc公司开源的一个基于LXC技术之上构建的Container容器引擎,基于Go语言并遵从 ...

  4. 【Java EE 学习 35 上】【strus2】【类型转换器】【struts2和Servlet API解耦】【国际化问题】【资源文件乱码问题已经解决】

    一.类型转换器 1.在动作类action中,声明和表单中name属性的值同名的属性,提供get和set方法,struts2就可以通过反射机制,从页面中获取对应的内容 package com.kdyzm ...

  5. Power BI的一些视频演示资源

    Power BI作为Self Service BI的方案,得到了人们的广泛关注.Power BI里的大多数组件目前还都是预览版的阶段,但是我们已经可以从powerbi.com网站下体验到其相当给力的一 ...

  6. 利用WCF创建简单的RESTFul Service

    1):用VS2013创建一个WCF的工程,如下图所示: 2):我们来看一下默认状态下的config文件内容,这里的内容我们会再后续的步骤中进行修改 <?xml version="1.0 ...

  7. xcode下载

    http://adcdownload.apple.com/Developer_Tools/Xcode_7.3.1/Xcode_7.3.1.dmg http://adcdownload.apple.co ...

  8. HYSBZ 2002 分块

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2002 题意:中文题面 思路:考虑分块,每个位置维护一个跳出该块需要的步数cnt[],和跳出 ...

  9. 10 Cookie/Session

    JSP/EL入门     * SUN提供了开发WEB资源的技术     Servlet/JSP              * response.getWriter().write();         ...

  10. 数位DP CF 55D Beautiful numbers

    题目链接 题意:定义"beautiful number"为一个数n能整除所有数位上非0的数字 分析:即n是数位所有数字的最小公倍数的倍数.LCM(1到9)=2520.n满足是252 ...