zoukankan      html  css  js  c++  java
  • 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;
                        }
                    });
                }
            }
    

      

  • 相关阅读:
    Hadoop
    java获取系统指定时间年月日
    JS获取系统的指定定年月日
    nodetree中 前面复选框禁用插件
    JS生成指定长度的随机数
    Post的请求案例
    Ajax的简单请求案例
    from 表单提交
    Oracle中添加视图
    java double保留小数点的零的问题,java保留小数点问题
  • 原文地址:https://www.cnblogs.com/dyy-dida/p/11375483.html
Copyright © 2011-2022 走看看