:rules用法

在vue中使用rules对表单字段进行验证1. 写在 data 中验证<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">formRules: {userName: [{required: true,message: "请输入用户名称",trigger: "blur"}]

阿呆0710

6134人浏览 · 2021-04-12 14:14:00

阿呆0710 · 2021-04-12 14:14:00 发布

在vue中使用rules对表单字段进行验证

1. 写在 data 中验证

<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">

formRules: {
            userName: [
                {required: true,message: "请输入用户名称",trigger: "blur"}
            ]
        }

2. 写在行内

<el-form-item label="用户名" prop="name" >
        <el-input type="text" id="username" v-model="username" 
        :rules="[{ required: true, message: '请填写用户名' },//用于表当验证
        {pattern:/^[1][3,4,5,6,7,8][0-9]{9}$/,message:'请输入正确的11位手机号'}]"
        ></el-input>
      </el-form-item>