ElementUI的表单验证及常用规则
2018-08-29 本文已影响92人
de_self
http://element-cn.eleme.io/#/zh-CN/component/form
在官网上有关于form组件的详细介绍
这里总结了几个常用的规则，方便下次使用
必填，必选，邮箱，手机号，时间，数字，数组，字符长度，
以邮箱为例子与手机号为例
//这是一个邮箱的验证规则
rules: {
email: [{
required: true,//是否必填
message: '请输入邮箱地址',//错误提示信息
trigger: 'blur'//检验方式（blur为鼠标点击其他地方，）
},
{
type: 'email',//要检验的类型（number，email，date等）
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change']（change为检验的字符变化的时候）
}
]，
phone: [{
required: true,
pattern: /^1[34578]\d{9}$/,//可以写正则表达式呦呦呦
message: '目前只支持中国大陆的手机号码',
trigger: 'blur'
}],
}
验证实例
这是代码，直接复制到html文件打开即可
也可以使用此链接中的rules.js的方式，日常积累一些，直接引用即可
https://www.jianshu.com/p/6a29e9e51b61
此文中还写了QQ，身份证等验证方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-row>
<el-col :span="12" :offset="6">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="客户邮箱" prop="email">
<el-input v-model="ruleForm.email"></el-input>
</el-form-item>
<el-form-item label="客户年龄" prop="age" prop='age'>
<el-input type="age" v-model.number="ruleForm.age" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
age: '',
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: '',
email: '',
age: '',
},
rules: {
age: [{
required: true,
message: '年龄不能为空'
},
{
type: 'number',
message: '年龄必须为数字值'
},
],
email: [{
required: true,
message: '请输入邮箱地址',
trigger: 'blur'
},
{
type: 'email',
message: '请输入正确的邮箱地址',
trigger: ['blur', 'change']
}
],
name: [{
required: true,
message: '请输入活动名称',
trigger: 'blur'
}],
region: [{
required: true,
message: '请选择活动区域',
trigger: 'change'
}],
date1: [{
type: 'date',
required: true,
message: '请选择日期',
trigger: 'change'
}],
date2: [{
type: 'date',
required: true,
message: '请选择时间',
trigger: 'change'
}],
type: [{
type: 'array',
required: true,
message: '请至少选择一个活动性质',
trigger: 'change'
}],
resource: [{
required: true,
message: '请选择活动资源',
trigger: 'change'
}],
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if(valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
});
</script>
</body>
</html>
