11.16-11.20
# 11.16-11.20汇总
## 1.elementui-rules校验
type:
- string: 字符串类型（默认值）
- number: 数字类型
- boolean:布尔类型
- method: 函数类型
- regexp:正则表达式
- integer: 整型
- float: 双精度浮点型数字
- array: 数组类型
- object: 对象类型
- enum: 枚举值
- date: 日期格式
- url: 网址格式
- hex: 16进制数字
- email: 电子邮箱格式
- any: 任意类型
(1)方法一
el-from :rules=“rules”
el-from-item 中prop与rules中属性名对应
```js
rules: {
name:[{
required: true,
message: '请输入用户名',
trigger: 'blur'
},{
min: 2,
max: 5,
message: '长度在 2 到 5 个字符'
},{
pattern: /^[\u4E00-\u9FA5]+$/,
message: '用户名只能为中文'
}
//{ pattern:/^[a-zA-Z]w{1,4}$/, message: '以字母开头，长度在2-5之间， 只能包含字符、数字和下划线'}
],
password: [{
required: true,
message: '请输入密码',
trigger: 'blur'
}, {
min: 6,
max: 30,
message: '长度在 6 到 30 个字符'
}, {
pattern: /^(\w){6,20}$/,
message: '只能输入6-20个字母、数字、下划线'
}],
mobile:[{
required: true,
message: '请输入手机号码',
trigger: 'blur'
},
{validator:function(rule,value,callback){
if(/^1[34578]\d{9}$/.test(value) == false){
callback(new Error("请输入正确的手机号"));
}else{
callback();
}
}, trigger: 'blur'}
],
// pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码' }
peopleID:[{
required: true,
message: '请输入身份证ID',
trigger: 'blur'
},{
pattern:/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '你的身份证格式不正确'
}
],
carId:[
{required: true, message: '请输入车牌号', trigger: 'blur'},
{pattern:/(^[\u4E00-\u9FA5]{1}[A-Z0-9]{6}$)|(^[A-Z]{2}[A-Z0-9]{2}[A-Z0-9\u4E00-\u9FA5]{1}[A-Z0-9]{4}$)|(^[\u4E00-\u9FA5]{1}[A-Z0-9]{5}[挂学警军港澳]{1}$)|(^[A-Z]{2}[0-9]{5}$)|(^(08|38){1}[A-Z0-9]{4}[A-Z0-9挂学警军港澳]{1}$)/,
message: '常规格式：晋B12345'},
],
},
```
(2)方法二
行内校验
```js
<el-form-item
:label="$t('user.regionname')"
prop="regionids"
:rules="[
{ required: true, message: 'The regionname cannot be empty',trigger:'blur'}
]">
<el-input id="regionids" style="width:80%;" readonly name="regionids" :title="update.regionids" v-model="update.regionids"/>
<RegionSelect v-bind:genre="3" @selectRegion="getSelRegion" v-bind:toChildName="dialogStatus==='update'?update.regionids:fromChildNames"></RegionSelect>
</el-form-item>
```
## 2.Flex布局
容器属性
- flex-direction 决定主轴的方向（即项目的排列方向）row、row-reverse、column、column-reverse
- flex-wrap 默认情况下，项目都排在一条线（又称”轴线”）上 nowrap、wrap、wrap-reverse
- flex-flow flex-direction 属性和flex-wrap属性的简写形式
- justify-content 定义了项目在主轴上的对齐方式
- align-items 定义项目在交叉轴上如何对齐
- align-content 定义了多根轴线的对齐方式