elementUI form表单验证
<el-form :model="form" ref="form" label-width="100px"> <div class="padd"> <div class="label-input"> <el-row> <el-col class="lbin-row" :span="24"> <el-form-item label="姓名" prop="name" :rules="[{required: true, message: '请输入姓名', trigger: 'blur'}]"> <el-input v-model="form.name"></el-input> </el-form-item> </el-col> <el-col class="lbin-row" :span="24"> <el-form-item label="手机号" prop="mobile" :rules="[{required: true, message: '请输入手机号', trigger: 'blur'}]"> <el-input v-model="form.mobile"></el-input> </el-form-item> </el-col> <el-col class="lbin-row" :span="24"> <el-form-item label="密码" prop="pwd" v-if="isHidden" :rules="[{required: true, message: '请输入密码', trigger: 'blur'}]"> <el-input v-model="form.pwd"></el-input> </el-form-item> </el-col> <el-col class="lbin-row" :span="24"> <el-button @click="getSubmit('form')">提交</el-button> </el-col> </el-row> </div> </div> </el-form>
js
data() { return { form:{ name:'', mobile:'', pwd:'', }, isHidden:false, } }, created(){ }, methods:{ getSubmit(form){ this.$refs[form].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); } }