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的方式，日常積累一些，直接引用即可
http://www.lxweimin.com/p/6a29e9e51b61
此文中還寫了QQ，身份證等驗證方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" >
</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>
ElementUI的表單驗證(二)之dialog關閉驗證http://www.lxweimin.com/p/473141679ce4
