<el-form :rules="rules" ref="ruleForm" label-position="top" :model="form" label-width="100px"
class="basicform">
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="手机号：" prop="name">
<el-input v-model="form.name" placeholder="请输入"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="12">
<el-form-item label="截止日期：">
<el-date-picker v-model="form.date" type="date" placeholder="请选择">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="负责人：" prop="person">
<el-select v-model="form.person" placeholder="请选择">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="描述：" class="namehuod">
<el-input type="textarea" v-model="form.ison"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-row :gutter="24" style="width: calc(100% - 0px);margin: 0 auto;">
<el-col :span="24" style="border-top: 1px solid #ccc;padding: 10px 0;">
<el-button size="small" type="primary" @click="submitFnc()"
style="float: right;margin-right: 15px;">确认</el-button>
<el-button size="small" @click="resetForm" style="float: right;margin-right: 15px;">取消</el-button>
</el-col>
</el-row> data() {
return {
form: {
},
rules: {
name: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ validator: this.isPhone, trigger: 'blur' }
],
person: [
{ required: true, message: '请选择负责人', trigger: 'change' }
]
}
};
}, methods: {
isPhone(rule, value, callback) {
if (!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
.test(value)) {
return callback(new Error('请输入正确的手机号'));
}
callback();
},
submitFnc() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
console.log("校验通过")
} else {
return false;
}
});
},
resetForm() {
//清除校验
this.$refs.ruleForm.resetFields();
},
}
添加校验规则有多中方法，其他方式可参考ele ui 官网
