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

      

  • 相关阅读:
    django-rest-framework之基于类的视图
    django-rest-framework之请求与响应
    django-rest-framework之序列化
    Linux上安装二进制文件MySQL详解
    django-rest-framework快速入门
    初识RESTful
    layer弹出层详解
    Jquery.validate.js表单验证
    实习总结
    常见的攻击手段及其防御方式
  • 原文地址:https://www.cnblogs.com/dyy-dida/p/11375483.html
Copyright © 2011-2022 走看看