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節點來驗證的