:rules用法_:rules=

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

1. 写在 data 中验证

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

1
2

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

1
2
3
4
5
6

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>
1
2
3
4
5
6

3. 引入外部定义的规则