Semantic-UI 表单验证 API 使用技巧总结

Web 开发大多数处理的都是表单，其中表单前后端验证又是最常见的需求。如果前端框架使用了 Semantic-UI,那么对于表单验证，充分利用其 form.js 组件的特性可达到事半功倍的效果。
这篇文章总结 Semantic-UI 表单验证特性的使用技巧，其中会结合源代码分析为啥这样使用，授人以渔，以后分析和使用其它前端框架的特性，结合文档和源码分析可充分理解和快速上手其它前端框架的使用。

使用范例:

var $messageForm = $('.member_form');
$messageForm.form({
  inline: true,
  on: 'blur',
  fields: {
    name:{
      identifier  : 'name',
      rules: [
        {
          type   : 'empty',
          prompt : "姓名不能为空"
        }
      ]
    },
    email:{
      identifier  :"email",
      rules:  [
        {
          type: 'empty',
          prompt: "邮箱不能为空"
        },
        {
          type: 'email',
          optional: true,
          prompt: "邮箱格式不正确"
        }
      ]
    },
    phone:  {
      identifier: 'phone',
      rules:  [
        {
          type: 'number',
          prompt: "手机号码只允许数字"
        },
        {
          type: 'exactLength[11]',
          prompt: "手机号码长度不正确"
        }
      ]
    }
  },
  onValid: function(){
    ajaxValidate($(this).attr("id"), $(this).val());
  },
  onFailure:  function(){
    console.log('nnnn');
  }
});

function ajaxValidate(selector, value){
  $.ajax({
    url: "#{validate_user_user_admin_users_path}",
    data: {
      name: selector,
      value: value
    },
    success: function(data){
      if(data.result == true){
        console.log("yyyy");
      }else{
        if(data.type == "email"){
          $messageForm.form('add prompt', "email", "邮箱已存在");
        }
        else if(data.type == "phone"){
          $messageForm.form('add prompt', "phone", "电话号码已存在");
        }
      }
    }
  });
}

着重看一下 form 函数，调用 form 函数时有两种方式:

form_selector.form({});
form_selector.form('behaviors', argumentOne, argumentTwo);

解释两种方式调用 form 函数内部原理

结合上面的代码片段以及 form.js 组件源码, 分析其内部调用原理。

第一个参数为 Object 引用对象

第一种方式是把 Object 类型作为第一个参数传递给 form 函数；在上面例子中 Object 对象为

{
  inline: true,
  on: 'blur',
  fields: {
    ....
  }
  onValid: function(){
    ...
  },
  onFailure: function(){
    ...
  }
}

那么，在 Object 对象中，还有那些 key/value 可以设置呢。查看源码:

$.fn.form.settings = {

  name              : 'Form',
  namespace         : 'form',

  debug             : false,
  verbose           : false,
  performance       : true,

  fields            : false,

  keyboardShortcuts : true,
  on                : 'submit',
  inline            : false,

  delay             : 200,
  revalidate        : true,

  transition        : 'scale',
  duration          : 200,

  onValid           : function() {},
  onInvalid         : function() {},
  onSuccess         : function() { return true; },
  onFailure         : function() { return false; },
  ...

在 Semantic-UI 官方文档中可看到各个 key 对应的作用 Form Settings。
onXxx 为回调方法, 在文档 Callbacks 可看到这四个回调方法的作用。在我们的例子中，当某个字段前端验证通过之后，回调 onValid函数调用 ajaxValidate函数往后端发送 ajax 请求，进行后端校验。
fields key 对应的值是一个 Object 对象，用以对各表单项进行前端校验。identifier 的值为后端渲染 input 的html name 属性的值。通过查看源码，2.2.4 版本的 from.js 组件支持校验的类型有 empty, checked, email, url, regExp, integer, decimal, number 这几大类，具体在文档中可看到 Validation Rules ，以及自定义规则

第一个参数为字符串

第二种方式是第一个参数为字符串类型，调用 form.js 组件内部的方法。form 函数的第二、第三个参数传递给内部方法。文档 Behavior 可看到详细功能说明。
在例子中，前端校验通过之后，回调函数 onValid 调用 ajaxValidate 函数发送 ajax 给后端，后端返回被校验的 input 项以及校验结果 json 数据格式。ajax 请求的 success 回调解析后端返回数据，当校验错误，前端提示校验错误，譬如: $messageForm.form('add prompt', "email", "邮箱已存在");。 add prompt 就是字符串，表明会调用 add 的 prompt 方法给指定被校验项添加错误提示。

这些以字符串作为 form 函数第一个参数有 is XXX(例如 "is value"), add XXX(例如: "add prompt"), get XXX getting-values, set XXXwriting-values 和 has XXX 系列，以及 clear 和 reset reset--clear-fields 。