element 表单验证

按照官方文档先引入

import { Form,FormItem,Input} from 'element-ui';
Vue.component(Form.name, Form);
Vue.component(FormItem.name, FormItem);
Vue.component(Input.name, Input);

然后使用

html

<el-form ref="ruleFormRef" :rules="rules" :model="ruleForm" label-width="80px">
              <el-form-item label="昵称" prop="nickname">
                <el-input v-model="ruleForm.nickname"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="nickname">
                <el-input v-model="ruleForm.password"></el-input>
              </el-form-item>
              <el-button type="primary" @click="submitForm">立即提交</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form>

js

data() {
            return {
                rules: {
                    nickname: [
                          { required: true, message: '请输入昵称', trigger: 'change' },
                          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    password: [
                          { required: true, message: '请输入密码', trigger: 'change' },
                          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                },
                ruleForm: {
                    nickname:''
                }
            }
            
        },

methods:{
            submitForm (){
                this.$refs.ruleFormRef.validate((valid) => {
                  if (valid) {
                    alert('submit!');
                  } else {
                    console.log('error submit!!');
                    return false;
                  }
                });
            },
            resetForm (){
                this.$refs.ruleFormRef.resetFields();
            }
        }

input的验证三步骤

1.   :rules="rules"   
2.   prop="nickname"
3.   rules: {}  //data里的规则

button的验证

ref="ruleFormRef"  就是根据ref找到dom节点来验证的