• 9.Element-ui的校验规则Rules


    Element-ui的校验规则Rules

    <el-form label-position="left" label-width="80px" :model="user" ref="user" :rules="rules">
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="user.phone"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="user.password" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="pass">
                    <el-input v-model="user.pass" type="password"></el-input>
                </el-form-item>
                <el-form-item label="真实姓名" prop="member.name">
                    <el-input v-model="user.member.name"></el-input>
                </el-form-item>
                <el-form-item label="身份">
                    <el-radio-group v-model="user.member.type">
                        <el-radio :label="false">学生</el-radio>
                        <el-radio :label="true">教职工</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="学院" prop="member.dep">
                    <el-input v-model="user.member.dep"></el-input>
                </el-form-item>
                <el-form-item label="专业" prop="member.pro">
                    <el-input v-model="user.member.pro"></el-input>
                </el-form-item>
                <el-form-item label="班级" v-if="!user.member.type" prop="member.team">
                    <el-input v-model="user.member.team"></el-input>
                </el-form-item>
                <el-form-item label="转出机构" v-if="user.member.addType" prop="relation.outOrganization">
                    <el-input v-model="user.relation.outOrganization"></el-input>
                </el-form-item>
                <el-form-item label="转出日期" v-if="user.member.addType" prop="relation.outDate">
                    <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="转出日期" v-model="user.relation.outDate" style=" 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="validate('user')">注册</el-button>
                    <el-button @click="back">返回</el-button>
                </el-form-item>
    </el-form>
    

    注意form标签的 model、ref、rules三个属性

    注意form-item标签上的prop属性

    
    
  • 相关阅读:
    Servlet3.0之五:servlet3.0下的web.xml
    RESTLET开发实例(二)使用Component、Application的REST服务
    并发容器之ConcurrentLinkedDeque
    script的onerror事件支持情况调查
    纯CSS后台框架
    浏览器对width与height的最大值限制
    DOM系统中的各种队列
    跨域的异步请求四
    JSON parse在各浏览器的兼容性列表
    在IE6~8下创建HTML5新标签
  • 原文地址:https://www.cnblogs.com/TimerHotel/p/vue_09.html
Copyright © 2020-2023  润新知