基本表单验证流程

一.基本表单验证

1.el-form绑定        

    model:绑定数据

    rules:验证规则

    ref='form'用于获取el-form的实例对象

2.el-fom-item

     prop=’需要验证的字段名‘

rules:{

 prop对应的值:[

{required:true,message:"错误信息",trigger:"change/blur"},

{min:最小长度,max:最大长度,message:"错误信息",trigger:"change/blur"}

{ 

自定义规则:

validator:(rule,value,callback)=>{

rule:规则

value:当前验证项的值

callback:回调函数

验证成功:callback()

验证失败:callback(new Error('错误信息'))

} ,

trigger:"change/blur"

}

]

}

二.全局表单验证

el-form  ref="form"

this.$refs.form.validate((result)=>{

result:true 验证成功

false:验证失败

})

三.代码照进现实

<template>
  <div class="box">
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="账号" prop="mobile">
        <el-input v-model="form.mobile" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fn">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      form: {
        mobile: '',
        password: ''
      },
      rules: {
        mobile: [{ required: true, message: '请输入正确手机号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入正确手机号', trigger: 'blur' }, {
          validator: (rule, value, callback) => {
            const reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
            if (reg.test(value)) {
              callback()
            } else {
              return callback(new Error('请输入正确的手机号'))
            }
          },
          trigger: 'change'
        }]
      }
    }
  },
  methods: {
    fn() {
      this.$refs.form.validate((result) => {
        if (result) {
          this.$message('验证通过')
        } else {
          this.$message('验证失败')
        }
      })
    }
  }
}
</script>

<style scoped>
.box{
  height: 100%;
}

</style>

 

 

 这些就是饿了么的一些基本的表单验证，希望能帮助到大家。