验证绑定

avalon2新引入的指令，只能用于form元素上，用于为表单添加验证功能。它需要与ms-duplex, ms-rules指令一起配合使用。

此组件要依赖于Promise，显然Promise支持情况不太好，因此建议大家配合 es6 Promise库一起使用。

ms-validate - 图1

ms-validate的值应该对应一个对象，由于对象比较大，建议写在vm，像下面那样:

  1. vm.validate = {
  2.    onValidateAll: function(reasons){
  3.      //返回一个数组，如果长度为零说明没有错
  4.    },
  6.     onError: avalon.noop,//针对单个表单元素（使用了ms-duplex的input, select）
  7.     onSuccess: avalon.noop,//针对单个表单元素
  8.     onComplete: avalon.noop,//针对单个表单元素
  9.     onReset: avalon.noop,//针对单个表单元素
  10.     validateInBlur: true, // {Boolean} true，在blur事件中进行验证,触发onSuccess, onError, onComplete回调
  11.     validateInKeyup: true, // {Boolean} true，在keyup事件中进行验证,触发onSuccess, onError, onComplete回调
  12.     validateAllInSubmit: true, // {Boolean} true，在submit事件中执行onValidateAll回调
  13.     resetInFocus: true, // {Boolean} true，在focus事件中执行onReset回调,
  14.     deduplicateInValidateAll: false // {Boolean} false，在validateAll回调中对reason数组根据元素节点进行去重
  15. }

在一般情况下validateInBlur, validateInKeyup,validateAllInSubmit,resetInFocus都是默认的就行了。

onError,onSuccess,onComplete, onValidateAll的第一个参数都是reasons对象,this指向被验证的元素,reason里面有你需要的各种东西.

  1. var reason = {
  2.     element: elem,
  3.     data: field.data,
  4.     message: elem.getAttribute("data-" + ruleName + "-message") || elem.getAttribute("data-message") || hook.message,
  5.     validateRule: ruleName,
  6.     getMessage: getMessage
  7. }
  1. <body>
  2. <script>
  3.     var vm = avalon.define({
  4.         $id: "test",
  5.         action: '',
  6.         name: '',
  7.         add: function(e) {
  8.             e.preventDefault()
  9.             this.action = "add.php";
  10.             this.validate.onManual();
  11.         },
  12.         update: function(){
  13.             this.action = "update.php";
  14.             this.validate.onManual();
  15.         },
  16.         validate: {
  17.             validateAllInSubmit: false,
  18.             onSuccess: function(reasons, event) {
  19.                 console.log('成功',reasons)
  20.             },
  21.             onError: function(reasons, event) {
  22.                 console.log('有验证没有通过')
  23.             },
  24.             onValidateAll: function(reasons) {
  25.                 var form = this
  26.                 if(reasons.length) {
  27.                     // 表单有错误
  28.                     console.log("有验证没有通过",reasons);
  29.                     return false;
  30.                 } else {
  31.                     // 验证成功
  32.                     form.submit()
  33.                 }
  34.             }
  36.         }
  37.     })
  38. </script>
  41. <div ms-controller="test">
  42.     <form :validate="@validate" id="f1" :attr="{ action: @action }">
  43.         <input type="text" placeholder="Insert your Name" :duplex="@name" :rules="{ required: true, number:true }" />
  44.         <input type="submit" value="新建用户" :click="@add"/>
  45.         <input type="submit" value="修改用户" :click="@update"/>
  46.     </form>
  48. </div>
  49. </body>

一个页面有多个验证

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <title>TODO supply a title</title>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <script src='./dist/avalon.js'></script>
  9. </head>
  11. <body>
  12.     <script>
  13.         var vm = avalon.define({
  14.             $id: "test",
  15.             action: '',
  16.             name: '',
  17.             email: '',
  18.             add: function(e) {
  19.                 e.preventDefault()
  20.                 this.action = "add.php";
  21.                 this.validate.onManual();
  22.             },
  23.             update: function(e) {
  24.                 e.preventDefault()
  25.                 this.action = "update.php";
  26.                 this.validate.onManual();
  27.             },
  28.             add2: function(e) {
  29.                 e.preventDefault()
  30.                 this.action = "add.php";
  31.                 this.validate2.onManual();
  32.             },
  33.             update2: function(e) {
  34.                 e.preventDefault()
  35.                 this.action = "update.php";
  36.                 this.validate2.onManual();
  37.             },
  38.             validate: {
  39.                 name: 'validate1',
  40.                 validateAllInSubmit: false,
  41.                 onSuccess: function(reasons, event) {
  42.                     console.log('成功', reasons)
  43.                 },
  44.                 onError: function(reasons, event) {
  45.                     console.log('第1个表单没有通过验证 ', reasons.map(function(e) {
  46.                         return e.getMessage()
  47.                     }).join(' '))
  48.                 },
  49.                 onValidateAll: function(reasons) {
  51.                     var form = this
  52.                     if (reasons.length) {
  53.                         // 表单有错误
  54.                         console.log("第1个表单没有通过验证 ", reasons.map(function(e) {
  55.                             return e.getMessage()
  56.                         }).join(' '));
  57.                         return false;
  58.                     } else {
  59.                         // 验证成功
  60.                         // console.log(form) //在chrome控制台console面板勾选preserve log
  61.                         form.submit() //这里会发生跳转
  62.                     }
  63.                 }
  64.             },
  65.             validate2: {
  66.                 name: 'validate2',
  67.                 validateAllInSubmit: false,
  68.                 onSuccess: function(reasons, event) {
  69.                     console.log('成功', reasons)
  70.                 },
  71.                 onError: function(reasons, event) {
  72.                     console.log('第二个表单没有通过验证!', reasons.map(function(e) {
  73.                         return e.getMessage()
  74.                     }).join(' '))
  75.                 },
  76.                 onValidateAll: function(reasons) {
  78.                     var form = this
  79.                     if (reasons.length) {
  80.                         // 表单有错误
  81.                         console.log("第二个表单没有通过验证!", reasons.map(function(e) {
  82.                             return e.getMessage()
  83.                         }).join(' '));
  84.                         return false;
  85.                     } else {
  86.                         // 验证成功
  87.                         //console.log(form) //在chrome控制台console面板勾选preserve log
  88.                         form.submit() //这里会发生跳转
  89.                     }
  90.                 }
  91.             }
  92.         })
  93.     </script>
  95.     <div ms-controller="test">
  96.         <form :validate="@validate" id="f1" :attr="{ action: @action }">
  97.             <input type="text" placeholder="input your name" :duplex="@name" :rules="{ required: true, number:true }" />
  98.             <input type="submit" value="新建用户" :click="@add" />
  99.             <input type="submit" value="修改用户" :click="@update" />
  100.         </form>
  101.         <form :validate="@validate2" id="f2" :attr="{ action: @action }">
  102.             <input type="text" placeholder="input your email" :duplex="@email" :rules="{ required: true, email:true }" />
  103.             <input type="submit" value="新建邮箱" :click="@add2" />
  104.             <input type="submit" value="修改邮箱" :click="@update2" />
  105.         </form>
  106.     </div>
  107. </body>
  109. </html>

有关它的详细用法建议看ms-rules指令