elementUI 表单验证记录

基础表单

<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="input输入框">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
<el-from>

参数	说明	类型	可选值	默认值
model	表单数据对象	object	—	—
rules	表单验证规则	object	—	—
inline	行内表单模式	boolean	—	false
label-position	表单域标签的位置，如果值为 left 或者 right 时，则需要设置 label-width	string	right/left/top	right
label-width	表单域标签的宽度，例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。	string	—	—
label-suffix	表单域标签的后缀	string	—	—
hide-required-asterisk	是否显示必填字段的标签旁边的红色星号	boolean	—	false

 item中的prop与rules

<el-form ref="form" :model="form" label-width="80px" :rules='rules'>
  <el-form-item label="姓名" prop='name'>
    <el-input v-model="form.name"></el-input>
  </el-form-item>
<el-form-item label="手机号" prop='phone'>
    <el-input v-model="form.phone"></el-input>
  </el-form-item>
<el-from>

prop绑定属性值 

prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的	string	传入 Form 组件的 model 中的字段	—
label	标签文本	string	—	—
label-width	表单域标签的的宽度，例如 '50px'。支持 auto。	string	—	—

 rules中的属性名与表单数据项中的属性名必须是一致的。

rules

表单验证规则

object

—

—

 data() {
    return {
        rules: {
            phone: [
              // 添加正则表达式 pattern: /^1[3|5|7|8|9]\d{9}$/，验证手机号是否正确
              { required: true, message: '请输入手机号', trigger: 'change' },
              { pattern: /^1[3|5|7|8|9]\d{9}$/, 
                message: '请输入正确的号码格式', trigger:'change' }
                    ],
             name: [{ required: true, message: '请输入姓名', trigger: 'change' }],
                }
            }
        }

 验证按钮

 <el-form-item>
    <el-button type="primary" @click="submitForm('form')">确定</el-button>
    <el-button @click="resetForm('form')">重置</el-button>
  </el-form-item>

submitForm(formName){
  this.$refs[formName].validate((valid) => {
        if (valid) {
          //执行函数
        } else {
          console.log("error submit!!");
          return false;
        }
      });
}