avalon框架系列---指令(四)

这一节主要是表单方面的指令,

表单页面的开发一般需要两个特点:1.输入内容按规则验证 2.表单内容提交

 

1.ms-validate 表单内容提交

    该指令只能用于form元素上，用于为表单添加验证功能

    指令的值对应一个对象，由于对象比较大，建议写在vm中

    一般会这么写:

    achievements: {

      resetInFocus: true,

      onSuccess: function (reasons) {

         reasons.forEach(function (reason) {

            $('#' + reason.element.id + 'Tips').html("");

         })

     },

     onValidateAll: function (reasons) {

        if (reasons.length) {

          reasons.forEach(function (reason) {

            $('#' + reason.element.id + 'Tips').html(reason.getMessage()).css("color", "red");

            $('html,body').animate({scrollTop: $('#' + reason.element.id + 'Tips').parent().parent().prev().offset().top}, 200);

         })

      } else {

          正式的收集参数和提交给后台方法

     }

   }

  },

  以上校验对应对象时,可随意写以下的:

     onError: avalon.noop,//针对单个表单元素（使用了ms-duplex的input, select）

     onSuccess: avalon.noop,//针对单个表单元素

     onComplete: avalon.noop,//针对单个表单元素

     onReset: avalon.noop,//针对单个表单元素

     validateInBlur: true, // {Boolean} true，在blur事件中进行验证,触发onSuccess, onError, onComplete回调

     validateInKeyup: true, // {Boolean} true，在keyup事件中进行验证,触发onSuccess, onError, onComplete回调

     validateAllInSubmit: true, // {Boolean} true，在submit事件中执行onValidateAll回调

     resetInFocus: true, // {Boolean} true，在focus事件中执行onReset回调,

     deduplicateInValidateAll: false // {Boolean} false，在validateAll回调中对reason数组根据元素节点进行去重

 2.ms-rules 校验规则对象

    只能用于添加ms-duplex指令的表单元素

   avalon内置的校验规则有很多,可在官方文档上查看,我们这里说下自定义的校验规则

 

    avalon.validators.aaa = {

     message: '必须数字并大于0',

    get: function (value, field, next) {

     //想知道它们三个参数是什么,可以console.log(value, field,next)

      var ok = (value === '' || (Number(value) > 0))

     next(ok)

     return value

  }

 }

 

 <input

 ms-duplex="@aaa"

ms-rules="{aaa: true}"

>

还有一种是内置的校验规则,但是错误的提示不符合需求,可以使用自定义的提示

data-xxx-message="xxxxxxx"(主要用于required等其他规则)