element-ui的表单验证包括三个元素
rules：表示验证的规则
prop：某个字段所在的位置
v-model：某个字段填写的值
一.rules设置的位置
1.在<el-form>中设置全部的rules
<el-form :model="dataForm" ref="dataForm1" label-width="150px" :rules="rules">
2.在<el-form-item>中设置单独的rules
<el-form-item
label="消息"
:rules="[ { required: true, message: '消息不能为空', trigger: 'blur' },
{ validator: JSONStringCheck, trigger: 'blur' }]"
:prop="message"
>
</el-form-item>
二.rules的值
1.必填设置，required
2.自己写逻辑或正则验证
(1).写方法验证
a.在<el-form-item>中引入方法（验证是否为JSON格式）
<el-form-item
:label="消息"
:rules="[
{ required: true, message: '消息不能为空', trigger: 'blur' },
{ validator: JSONStringCheck, trigger: 'blur' }
]"
:prop="message"
>
<el-input v-model="dataForm.message" type="textarea" :rows="5"></el-input>
</el-form-item>
methods: {
JSONStringCheck(rule, value, callback) {
if (!this.isJson(value)) {
callback(new Error("请输入正确的json格式"));
} else {
callback();
}
},
isJson(data) {
if (typeof data === 'string') {
try {
var obj = JSON.parse(data)
if (typeof obj === 'object' && obj) {
return true
} else {
return false
}
} catch (e) {
return false
}
}
},
}
b.在data中引入方法（验证是否为大于0的数字）
export default {
data() {
const validatorNumber = (rule, value, callback)=> {
if (typeof value === 'string'&&!value.match(/^[0-9]*$/)) {
callback(new Error('请输入数字'));
} else {
if(value>0) {
callback();
} else {
callback(new Error('请输入大于0的数字'));
}
}
}
return {
rules: {
maxPv: [
{
required: true, message: '请输入访问次数上限', trigger: 'blur',
},
{ validator: validatorNumber },
],
},
};
},
(2).正则表达式可直接写在rules中
rules: {
sharePageShareUrl: [
{
pattern: /(http|https):\/\/([\w.]+\/?)\S*/,
message: 'XXX格式有误',
trigger: 'blur'
},
{required: true, message: 'XXX不能为空', trigger: 'blur'}
],
},
3. trigger是触发验证的事件
blur：当输入框<el-input>失去焦点时触发，但下拉框<el-select>不会触发
change：值改变时，通常用于下拉框<el-select>，<el-input>输入框也会触发
4. 输入值的类型type
字符串：设置type:string，默认
数字：利用监听键盘事件，只能输入数字，<el-input v-model="dataForm1.name" oninput ="value=value.replace(/[^\d.]/g,'')" ></el-input>
时间类型：设置type:date，通常用于时间选择器，<el-date-picker type="date" placeholder="选择日期"></el-date-picker>
数组类型：设置type:array，通常用于多选框，<el-checkbox-group>
三.动态增减表单（数组表单），主要注意对prop的设置
<div class="flex" v-for="(item, index) in dataForm1.messageList">
<div style="width: 100%;">
<el-form-item
:key="`${index}message`"
:label="`消息JSON ${index + 1}`"
:rules="[
{ required: true, message: '消息不能为空', trigger: 'blur' },
{ validator: JSONStringCheck, trigger: 'blur' }
]"
:prop="'messageList.'+index+'.message'"
>
<el-input v-model="item.message" type="textarea" :rows="5" placeholder=""></el-input>
</el-form-item>
<el-form-item
:key="`${index}immediatelyState`"
:label="`推送时间 ${index + 1}`"
:rules="[{ required: true, message: '推送时间不能为空', trigger: 'blur' }]"
:prop="'messageList.'+index+'.immediatelyState'"
>
<el-radio-group v-model="item.immediatelyState">
<el-radio label="1">立即推送</el-radio>
<el-radio label="0">延时发送</el-radio>
</el-radio-group>
<div v-if="item.immediatelyState === '0'" style="display: inline-block;margin-left: 10px;">
<el-input v-model="item.hour" style="width:60px;"></el-input>
时
<el-input v-model="item.min" style="width:60px;"></el-input>
分
<el-input v-model="item.second" style="width:60px;"></el-input>
秒
</div>
</el-form-item>
</div>
<div class="del">
<el-button type="danger" size="small" @click="delMessage(index)">删除</el-button>
</div>
</div>
这里注意，如果是先获取数据，在进行新增或删除的操作时会出现不在页面中及时动态增减，解决办法：
addMessage() {
this.dataForm1.messageList.push({message: '', immediatelyState: '', second: 0, hour: 0, min: 0})
//对整个对象重新赋值
this.dataForm1 = {...this.dataForm1}
},
delMessage(index) {
this.dataForm1.messageList.splice(index, 1)
this.dataForm1 = {...this.dataForm1}
},
