妙啊！Element-ui的表单验证功能

在使用Element-ui的时候，我们使用最多的是封装好漂亮的组件，其实element-ui还提供给了我们很方便的表单验证功能。element-ui提供的表单验证功能如下：

使用表单验证功能步骤：

第一步：使用element-ui的表单。

1. el-form容器，通过model绑定数据
2. el-form-item容器，通过label绑定标签
3. 表单组件通过v-model半丁model中的数据

<template>
  <div id="app">
    <el-form inline :model="data">
      <el-form-item label="用户名">
        <el-input v-model="data.user" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      data: {
        user: 'sam'
      }
    }
  }
}
</script>

第二步:绑定验证规则

1.el-form容器，通过rules绑定所有的验证规则
2.el-form-item容器，通过prop绑定rules下的验证规则。

<template>
  <div id="app">
    <el-form inline :model="data">
      <el-form-item label="用户名" prop="user">
        <el-input v-model="data.user" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    const userValidator = (rule, value, callback) => {
      if (value.length > 3) {
        callback()
      } else {
        callback(new Error('用户名长度必须大于3'))
      }
    }
    return {
      data: {
        user: 'sam'
      },
      rules: {
        user: [
          { required: true, trigger: 'change', message: '用户名必须录入' },
          { validator: userValidator, trigger: 'change' }
        ]
      }
    }
  }
}
</script>

解析规则：

• required：是否必须填写。值为布尔值
• trigger：触发校验的条件。值为输入框的事件，类似change和blur。
• message：错误提示信息
• validator：校验器，是一个函数，默认参数是rule、value(输入框的值)，callback(回调函数)。如果符合你的规则，就调用callback，不符合就传一个error对象，值是错误提示信息

官网文档没有提及的功能：validate-status

1.el-form容器，添加status-icon属性。让input中显示状态图标。
2.el-form容器，绑定validate-status属性。validate-status的值有：

• success：验证成功
• error：验证失败
• validating：验证中
• 空：未验证

综合应用代码：

<template>
  <div>
    <el-form
      :model="data"
      style="width:500px"
      label-position="right"
      label-width="80px"
      label-suffix=":"
      :rules="rules"
      status-icon
      hide-required-asterisk
    >
      <el-form-item label="用户名" prop="name" :validate-status="status">
        <el-input clearable v-model="data.name" @blur="validateName"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input clearable v-model="data.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="re_password">
        <el-input clearable v-model="data.re_password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input clearable v-model="data.phone" type="text"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    // 封装一下相似功能的校验器
    const validatorMethod = function (length, message) {
      return (rule, value, callback) => {
        if (value.length < length) {
          callback(new Error(message))
        } else {
          callback()
        }
      }
    }
    // 确认密码校验器
    const comfirmPassword = (rule, value, callback) => {
      if (value !== this.data.password) {
        return callback(new Error('两次输入密码不一致'))
      }
      callback()
    }
    // 手机号校验器
    const phoneValidator = (rule, value, callback) => {
      if (/^1[3456789]\d{9}$/.test(value)) { // 利用正则表达式校验手机号
        callback()
      } else {
        callback(new Error('请输入正确手机号'))
      }
    }
    return {
      status: '',
      data: {
        name: '',
        password: '',
        re_password: '',
        phone: null
      },
      // 所有校验规则
      rules: {
        name: [ // 用户名验证
          { required: true, trigger: 'change', message: '用户名必须填写' },
          { validator: validatorMethod(3, '用户名长度不能小于3'), trigger: 'change' }
        ],
        password: [ // 密码验证
          { required: true, trigger: 'change', message: '密码不能为空' },
          { validator: validatorMethod(8, '密码长度不能小于8'), trigger: 'change' }
        ],
        re_password: [ // 重复密码验证
          { required: true, trigger: 'change', message: '请再一次输入密码' },
          { validator: comfirmPassword, trigger: 'blur' }
        ],
        phone: [ // 手机号验证
          { required: true, trigger: 'change', message: '手机号不能为空' },
          { min: 11, max: 11, trigger: 'change', message: '请输入11位手机号码' },
          { validator: phoneValidator, trigger: 'blur' }
        ]
      }
    }
  },
  components: {

  },
  methods: {
    validateName (e) {
      if (e.target.value.trim() !== '') { // 输入框为空不校验
        // status的四个值：error(失败)，success(成功)，validating(验证中)，null
        this.status = 'validating'
        setTimeout(() => { // 模拟发送ajax请求，检查用户名是否重复
          if (e.target.value === 'wjg') {
            this.status = 'success'
          } else {
            this.status = 'error'
          }
        }, 2000)
      }
    }
  }
}
</script>

<style scoped>
</style>

图：