el-form-表单

 el-form

• model：绑定表数据对象

• rules：表单验证规则

• size： 用于控制该表单内组件的尺寸 medium / small / mini

• ref:用于获取组件dom

<el-form
        ref="form"
        :model="formModel"
        :rules="rules"
        size="large"
        autocomplete="off"
          ></el-form>

表行el-form-item

 <el-form-item><h1>登陆</h1></el-form-item>

输入框el-form-input

• prop="username"：绑定rules中的某个规则

• formModel.username:绑定表数据对象中的数据

• :prefix-icon：绑定图标

• placeholder：灰色字体

 <el-form-item prop="username">
          <el-input
            v-model="formModel.username"
            :prefix-icon="User"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>

校验规则

• (1) el-form => :model="formModel" 绑定的整个form的数据对象{xxx,xxx,xxx}

• (2) el-form => :rules="rules" 绑定的整个rules的规则对象{xxx,xxx,xxx}

• (3) 表单元素 => v-model ="ruleForm.xxx" 给表单元素,绑定form的子属性

• (4) prop配置生效的是哪个校验规则 (和rules中的字段要对应)

 设置表单form数据对象

//整个的用于提交的form对象 注意参数需要跟接口参数命名一致
const formModel = ref({
  username: '',
  password: '',
  repassword: ''
})

 设置表单校验规则

• 1.非空校验：required:true,message:消息提示,trigger：触发校验的事件

• 2.长度校验：min:xx,max:xx

• 3.正则校验：pattern:正则校验 \S为非空字符

• 4.自定义校验：自己写逻辑校验(校验信息)

• validator:(rule,value,callback)

(1)rule当前校验规则相关的信息

(2)value所校验的表单元素目前的表单值

(3)callback 无论成功还是失败，都需要callback回调

callback() 校验成功

callback(new Error(错误信息)) 校验失败

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 5, max: 10, message: '用户名必须是5-10位的字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{5,16}$/,
      message: '密码必须是6-15为的字符',
      trigger: 'blur'
    }
  ],
  repassword: [
    { required: true, message: '请再次输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是6-15的非空字符',
      trigger: 'blur'
    },
    {
      validator: (rule, value, callback) => {
        if (value === formModel.value.password) {
          callback()
          console.log(rule)
        } else {
          callback(new Error('两次输入密码不一致'))
        }
      },
      trigger: 'blur'
    }
  ]
}

预校验

1.设置按钮触发预校验事件

<el-button type="primary" @click="register" class="btn">注册</el-button>

2.触发预校验

// 注册按钮点击事件
const register = async () => {
    //预校验
  await form.value.validate()
    //发起请求
  await userRegisterService(formModel.value)
    //消息提示
  ElMessage.success('注册成功')
}