element 表单验证

按照官方文档先引入

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

然后使用

html

              
                
              
              
                
              
              立即提交
              重置
            

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节点来验证的