关于饿了么ui框架的使用之Form 表单的应用

Element，是饿了么提供的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。
官方网站请戳
github网址请戳

Form 表单

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。比如我们经常碰到的登录、注册、找回密码等。

有几个特殊的属性介绍：

• required：规定此项是否是必填项，如果设置，会在input框前面加个*，如果不设置，则会根据校验规则自动生成，默认为 false；
• rules：是表单验证规则，是对象类型；
• message：显示的错误信息；
• type：input框类型，比如密码是type=’password’、数字是type: ‘number’。

对于input框，有4中基本事件：
①focus②blur③change@input
四种事件配合起来用的话，会有更好的用户体验。（下面会有例子）

 ![呆毛](https://img-blog.csdn.net/20170524104929284?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQW1iZXJXdQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

"[{ required: true, message: '年龄不能为空'},{ type: 'number', message: '年龄必须为数字值'}]"

验证方式也有多种情况：

（1）行内直接验证

<el-form-item label="年龄" prop="age" :rules="[{ required: true, message: '年龄不能为空'},{ type: 'number', message: '年龄必须为数字值'}]">
    <el-input v-model="formData.age" placeholder="请输入年龄"></el-input>    
</el-form-item>

在el-form-item标签里面，以rules的方式直接定义验证规则，这样的情况适合简单的校验，比如非空校验、数字校验。如果验证规则较长，则不建议使用。

（2）自定义rules

  rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
         }

这个自定义相对来说较容易，可以直接写在rules里面。当然，长度限制可以直接写在input里， :maxlength="4"表示最长是4。

（3）自定义校验规则

如果校验规则实在太长，就需要定义一个校验规则，举个校验密码的例子。

      var validatePassBlur = (rule, value, callback) => {
        // 密码blur事件
        if (!value) {
          callback(new Error('请输入密码'));
        } else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/(value)) {
          callback(new Error('密码不符合规范，密码由8-16位字符，由字母a-z及数字组成'));
        }
        callback();
      }

当然，我们也可以在函数里写出更复杂的校验，比如在函数里写一个倒计时函数。

 var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };

又比如，可以调后台接口进行判断：

var checkTel = (rule, value, callback) => {
      if (!/^1\d{10}$/.test(value)) {
        callback(new Error('请输入正确的手机号!'));
      }
     AJAX {
        if (true) {
          callback(new Error('手机号码已存在!'));
        }
        callback();
      });
    };

这样，就能在函数里写多个校验规则，在调用的时候一定要写清楚trigger事件，这样可以实现更好的用户体验效果。
运用：

 rules: {
 pass: [{
        required: true,
        validator: validatePassBlur,
        trigger: 'blur'
       }]
        }

如果是一个input框有多个事件分别配不同的校验函数，可以这样写：

rules: {
pass: [{
      required: true,
      validator: validatePassBlur,
      trigger: 'blur'
    }, {
      required: true,
      validator: validatePassChange,
      trigger: 'change'
    }]
  }

第三种验证方式是比较常用的。

（4）input框之前的关联校验

这种校验最常见的就是需要确认密码的时候，比如这个：

来做这样一个模拟：
在【密码】框输入a123456789
在【确认密码】框输入a12345678

在鼠标从【确认密码】框移走后会显示’两次密码不一致’：

继续模拟：
在【确认密码】框输入一个9
‘两次密码不一致’错误信息会消失。

继续模拟：
在【密码】框输入1
最优化的体验，应该是确认密码框提示错误

————————————————————
觉得摸不着头脑？那我们来看一个连续的操作：

这是最佳的体验，要做到这种，实现以下代码：

var validatePassBlur = (rule, value, callback) => {
        // 密码框blur事件
        if (!value) {
          callback(new Error('请输入密码'));
        } else if (!reg_pass.test(value)) {
          callback(new Error('密码不符合规范，密码由8-16位字符，由字母a-z及数字组成'));
        }
        callback();
      }
      var validateCheckPassBlur = (rule, value, callback) => {
        // 确认密码框blur事件
        if (!value) {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.formData.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      }
      var validatePassChange = (rule, value, callback) => {
        // 密码框的change事件
        if (this.formData.checkPass !== '') {
          this.$refs.formData.validateField('checkPass');
        }
        callback();
      }
      var validateCheckPassChange = (rule, value, callback) => {
        // 确认密码框的change事件
        callback();
      }

this.$refs.formData.validateField(‘checkPass’);
是对【checkPass】进行校验。

再举个复杂的例子，

我们要做一个注册表单验证：

点击【注册】按钮，要对整个表单进行校验，点击【获取验证码】按钮，是对前两个input框进行校验。

看下效果：

分别给两个按钮设置点击事件：

      submitForm(formName) {
          //注册按钮点击
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('提交提交啦');
          } else {
            console.log('错误错误啦');
            return false;
          }
        });
      },
      sendMsg() {
        // 点击获取验证码按钮
        this.$refs.formData.validateField('tel'); // 检查手机号是否填写
        this.$refs.formData.validateField('picCode'); // 检查图形验证码是否填写
      }

这样就能获得最佳体验效果啦!!!!
~
~
~
~
好啦 ，啰嗦了太多，不知道能不能提供帮助。
最后po上我的在线代码，大家可以自行调试：猛戳猛戳猛戳