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;
                    }
                });
            }
        }

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM