element ui官方使用手册里面对于表单正则描述得已经很详细了
https://element.eleme.io/#/zh-CN/component/form
一般正常使用是ok的
<el-dialog title="测试表单正则" ref="testData" width="600px" :visible.sync="testDialog" :close-on-click-modal="false" >
<el-form ref="testDataForm" :model="testData" label-width="130px" :rules="testRule">
<el-form-item label="邮箱" prop="email">
<el-input v-model="testData.email"></el-input>
</el-form-item>
<el-form-item label="电话号码" prop="mobile" class="is-required">
<el-input v-model.number="testData.mobile"></el-input>
</el-form-item>
<el-form-item label="选择" prop="status">
<el-radio-group v-model="testData.status">
<el-radio :label="1">同意</el-radio>
<el-radio :label="0">拒绝</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="拒绝原因：" prop="reason" v-show="!testData.status">
<el-input type="textarea" v-model="testData.reason"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="testDialog = false">取 消</el-button>
<el-button type="primary" @click="test">确定</el-button>
</span>
</el-dialog>
data() {
let validateReason = (rule, value, callback) => {
if(!this.testData.status && !value){
callback(new Error('请输入拒绝原因'))
}
callback()
}
return {
testDialog: true,
testRule: {
email: [
{required: true, message:'请输入', trigger: 'blur'},
{pattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,message: '请輸入正确的格式', trigger: 'blur'}
],
status: [
{required: true, message: '请选择', trigger: 'change'}
],
reason: [
{required: false, message: '请填写驳回原因', trigger: 'blur', validator: validateReason},
{min: 0, max: 50, message: '驳回原因50个字之内', trigger: 'blur'}
],
},
testData: {
status: 1,
reason: '',
email: '',
mobile: ''
},
}
},
WX20200421-231441@2x.png
WX20200421-232133@2x.png
主要是根据上面的代码说几个点
1、一般简单的正则可以直接在下面通过pattern加入正则校验，比如邮箱
如果是需要根据特定条件的，比如这儿的拒绝原因则是需要在拒绝状态下才是必填，那么就可以通过validator实现，
这儿还要注意必须要有callback()否则会出现校验都通过但是执行不了alert('ok')的情况
this.$refs[formName].validate((valid) => {
if (valid) {
alert('ok!);
} else {
console.log('no');
return false;
}
});
2、有时候需求是希望在提交的时候才去校验，不需要提示的红色文字，只是要求前面必须带有必填标记*，那么这个时候只需要给它手动添加class="is-required"就可以了
3、在tab切换或控制不同条件下字段显隐藏这些场景时，会发现这个时候表单会自动校验，还没有开始输入就已经整个表单做了校验
this.$nextTick(()=>{
this.$refs['testData'].clearValidate()
})
只需要在切换中加入这段代码就可以解决
切换时内容还未填写但是已经自动验证并显示红色提示文字的情况
