表单验证

avalon内置了强大的表单验证功能，它需要结合ms-duplex, ms-validate, ms-rules这个三个指令一起使用。

  • ms-duplex负责监控每个表单元素的输入。
  • ms-rules负责对表单元素的值进行各种检测，包括非空验证，长度验测，格式匹配等等。
  • ms-validate负责控制验证的时机，及针对每个表单元素的验证结果触发各种回调。
    验证规则定义在avalon.validators对象中, 为一个个带有message与get属性的对象.

具体用法详见验证规则绑定

  1. avalon.shadowCopy(avalon.validators, {
  2.     pattern: {
  3.         message: '必须匹配{{pattern}}这样的格式',
  4.         get: function (value, field, next) {
  5.             var elem = field.dom
  6.             var data = field.data
  7.             if (!isRegExp(data.pattern)) {
  8.                 var h5pattern = elem.getAttribute("pattern")
  9.                 data.pattern = new RegExp('^(?:' + h5pattern + ')$')
  10.             }
  11.             next(data.pattern.test(value))
  12.             return value
  13.         }
  14.     },
  15.     digits: {
  16.         message: '必须整数',
  17.         get: function (value, field, next) {//整数
  18.             next(/^\-?\d+$/.test(value))
  19.             return value
  20.         }
  21.     }
  22.  })

手动调用验证并根据点击不同按钮提交不同网址的例子

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>ms-validate</title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.         <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
  7.         <script src="../dist/avalon.js"></script>
  8.         <script>
  9.             avalon.validators.gtOne = {
  10.                 message: '必须数字并大于1',
  11.                 get: function (value, field, next) {
  12.                     //想知道它们三个参数是什么,可以console.log(value, field,next)
  13.                     var ok = Number(value) > 1
  14.                     next(ok)
  15.                     return value
  16.                 }
  17.             }
  18.             var greasons = []
  19.             var vm = avalon.define({
  20.                 $id: "test",
  21.                 aaa: '',
  22.                 url: 'javascript:void(0)',
  23.                 message: '',
  24.                 submit:  function (url) {//submit是真正的验证方法,通过点击时手动验证
  25.                     vm.validate.onManual()
  26.                     setTimeout(function () {
  27.                         if (greasons.length) {
  28.                             var a = greasons.map(function (el) {
  29.                                 return '<p>' + el.getMessage() + '</p>'
  30.                             })
  31.                             vm.message = a.join('')//打印所有错误
  32.                             vm.url = 'javascript:void(0)'
  33.                         } else {
  34.                             greasons = []
  35.                             vm.message = ''
  36.                             vm.url = url
  37.                         }
  38.                     })
  40.                 },
  41.                 validate: {
  42.                     //禁止提交时自动验证
  43.                     validateAllInSubmit: false,
  44.                     //这个是用来占位的
  45.                     onManual: avalon.noop,
  46.                     //这个转移到sumbit方法
  47.                     onValidateAll: function (reasons) {
  48.                         greasons = reasons.concat()
  49.                     }
  50.                 }
  51.             })
  52.         </script>
  53.     </head>
  55.     <body ms-controller="test">
  56.         <form class="cmxform" ms-validate="@validate" ms-attr='{action: @url}' >
  57.             <fieldset>
  58.                 <legend>自定义规则</legend>
  59.                 <p>
  60.                     <input 
  61.                         ms-duplex="@aaa"
  62.                         ms-rules="{required: true, number:true, gtOne: true}" 
  63.                         />
  64.                 </p>
  65.                 <p>
  66.                     <input :click="@submit('/add.php')" type="submit" value="add"/>
  67.                     <input :click="@submit('/update.php')" type="submit" value="update"/>
  68.                 </p>
  69.                 <p ms-html="@message" style="color: red"></p>
  70.             </fieldset>
  71.         </form>
  72.     </body>
  73. </html>