Form表单组件的基本使用

        

 <el-form ref="form" :model="form" label-width="80px" :rules='rules' >
  <el-form-item label="账号" prop='phonenumber'>
    <el-input v-model="form.phonenumber"  ></el-input>
  </el-form-item>
<el-form-item label="密码" prop='password'>
    <el-input v-model="form.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>

ref="form" 用来获取组件(表单校验)  --  :model="form"       el-form 中的 内容是 插槽

表单验证最好采用组件库中自带的验证方式 在向后端发送请求调用接口之前,我们一定要对所传递的参数进行验证 来把用户的错误扼杀在摇篮之中

不能相信用户的任何输入

 表单验证三部曲:

                    1. 定义验证规则, data()中按格式定义规则

                   2.1 给表单设置rules属性传入验证规则   ----  :rules="rules"

                   2.2 给表单设置model属性传入表单数据  ----  :model="form"

                   2.3 给表单项(Form-item) 设置prop属性 值为设置需要校验的表单项

                    3. 手动兜底验证 

phonenumber: [
          { required: true, message: '手机号-用户名不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不对', trigger: 'blur' }],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 8, message: '密码长度必须是6-8位', trigger: 'blur' },
          {
            validator (rule, value, callback) {
              if (value === '123456') {
                callback(new Error('密码过于简单'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ]

              

 onSubmit () {
      // console.log('submit!')
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log('验证通过')
        } else {
          console.log('验证失败')
        }
      })
    }

下面三个地方的属性名必须一致

 自定义表单验证规则 (rule 这个参数不能省略)

validator:function(rule,value,callback){
    if(value === '123456'){
    callback(new Error('密码过于简单')
} else {
    callback()
}

}