zoukankan      html  css  js  c++  java
  • vue—表单

    <!-- 表单区域 -->
    <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
        <el-form-item label="用户名" prop="username">
            <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
             <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
            <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
    </span>                    
    • <el-form></el-form>:表单区域
    • ref:表单被引用时的名称,标识 是我们绑定的对象
    • rules:表单验证的规则
    • model:表单数据对象 是绑定我们form表单中需要提交给后台的一个对象
    • label-width:表单域标签的宽度,作为 Form 直接子元素的 form-item 会继承该值
    • <el-form-item>:表单中的每一项子元素
    • label:标签文本
    • prop:表单域 model 字段,在使用 validate、resetFields 方法的情况下,该属性是必填的,在每一个el-form-item上面绑定prop属性,这个属性就是我们下面要做正则校验的地方
    • v-model:绑定的表单数据对象属性
    data数据
    data(){
         //验证邮箱的规则
         var checkEmail = (rule, value, callback) => {
             //验证邮箱的正则表达式
             const regEmail=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(.[a-zA-Z0-9_-]+)+$/
             if(regEmail.test(value)) return callback()
             callback(new Error('请输入合法的邮箱'))
        }
        //验证手机号的规则
        var checkMobile = (rule, value, callback) => {
            //验证手机号的正则表达式
            const regMobile=/^1(?:3d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8d|9d)d{8}$/
            if(regMobile.test(value)) return callback()
            callback(new Error('请输入合法的电话'))
        }
        return{
            //用户的表单数据
            addForm:{
                 username:'',
                 password:'',
                 email:'',
                 mobile:'',
            },
            //表单的验证规则对象
            addFormRules:{
                username:[
                    { required: true, message: '请输入登录名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                password:[
                    { required: true, message: '请输入登录密码', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                 ],
                 email:[
                     { required: true, message: '请输入邮箱', trigger: 'blur' },
                     {validator:checkEmail,trigger:'blur'}
                  ],
                  mobile:[
                      { required: true, message: '请输入电话', trigger: 'blur' },
                      {validator:checkMobile,trigger:'blur'}
                  ],
            },
        }
    }            



  • 相关阅读:
    如何通过css控制内容显示顺序 第二行的内容优先显示
    《掌上流年》“国内首部微信日记”出版
    Hello Kitty微信主题很可爱?小心财产安全!
    第三方网站不能调用微信公众平台里的图片了 显示"此图片来自微信公众号平台未经允许不可引用"
    鼓浪屿船票也能用微信支付了
    excel判断单元格包含指定内容的函数用=IF(COUNTIF(A1,"*内容*"),"0","1")
    认证的政府与媒体类订阅号可取得网页授权接口了
    来八卦一下常刷微信朋友圈的你属于什么类型
    微信稳居Android App排行榜4月份国内榜首
    [福利]非认证公众帐号也能申请微信连Wi-Fi了
  • 原文地址:https://www.cnblogs.com/Bluebells/p/15131757.html
Copyright © 2011-2022 走看看