Vue使用rules进行表单验证

    在web开发中表单验证是经常遇到的，学习一下Vue提供表单验证方式，下面是vue使用了element框架的一个登录表单：

<template>
  <div>
    <el-form label-position="left" label-width="0px" class="demo-ruleForm login-container" :model="loginForm"
             :rules="rules" ref="loginForm">
      <h3 class="title">系统登录</h3>
      <el-form-item prop="account">
        <el-input type="text" v-model="loginForm.account"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="loginForm.password"></el-input>
      </el-form-item>
      <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="submit('loginForm')" :loading="logining">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

        loginForm: {
          account: 'admin',
          password: '123456'
        },
        rules: {
          account: [
            {required: true, message: '账户不能为空', trigger: 'blur'},
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur'},
            {min: 6, max: 20, message: '密码长度6-20字符', trigger: 'blur'}
          ]
        }

     规则显示在表单输入框失去焦点时（trigger: 'blur'），会进行验证，账号不能为空，密码不能为空且长度为6到20字符，有几个关键的地方：

1. 在表单中在<el-form>元素中加上 :model="loginForm" :rules="rules" ref="loginForm"，注意是:model不是v-model,v-model是内置的数据双向绑定，:model相当于 v-bind:model
2. 在<el-form-item>标签上加上prop属性，如： prop="account"，只能加在这个<el-form-item>标签
3. 点击提交函数写法：submit('loginForm')，后面验证要用，loginForm为提交表单的名字

提交函数：

      submit (form) {
        this.$refs[form].validate(valid => {
          if (valid) {
               // do something
          }
        })

      }

可以先打印一下console.log(this.$refs[loginForm])看看取到表单了吗，如果前面在在表单上没有加入ref属性这就会取不到表单，打印undefined

对于比较复杂的校验还可以自己添加校验规则，新建validate.js文件，在其中编写校验函数：

export function validatePhone (rule, value, callback) {
  setTimeout(() => {
    if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(value)) {
      callback(new Error('请输入正确的号码'))
    } else {
      callback()
    }
  }, 500)
}

引入该js文件，更改一下rules：

        rules: {
          account: [
            {required: true, message: '账户不能为空', trigger: 'blur'},
            { validator: validatePhone, trigger: 'blur'},
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur'},
            {min: 6, max: 20, message: '密码长度6-20字符', trigger: 'blur'}
          ]
        }