http://element-cn.eleme.io/#/zh-CN/component/form
在官網(wǎng)上有關(guān)于form組件的詳細(xì)介紹
這里總結(jié)了幾個(gè)常用的規(guī)則蔚携，方便下次使用
必填精耐，必選狼速，郵箱，手機(jī)號(hào)卦停，時(shí)間向胡，數(shù)字，數(shù)組惊完，字符長(zhǎng)度僵芹，
以郵箱為例子與手機(jī)號(hào)為例
//這是一個(gè)郵箱的驗(yàn)證規(guī)則
rules: {
email: [{
required: true,//是否必填
message: '請(qǐng)輸入郵箱地址',//錯(cuò)誤提示信息
trigger: 'blur'//檢驗(yàn)方式（blur為鼠標(biāo)點(diǎn)擊其他地方，）
},
{
type: 'email',//要檢驗(yàn)的類(lèi)型（number小槐，email拇派，date等）
message: '請(qǐng)輸入正確的郵箱地址',
trigger: ['blur', 'change']（change為檢驗(yàn)的字符變化的時(shí)候）
}
]，
phone: [{
required: true,
pattern: /^1[34578]\d{9}$/,//可以寫(xiě)正則表達(dá)式呦呦呦
message: '目前只支持中國(guó)大陸的手機(jī)號(hào)碼',
trigger: 'blur'
}],
}
驗(yàn)證實(shí)例
這是代碼凿跳，直接復(fù)制到html文件打開(kāi)即可
也可以使用此鏈接中的rules.js的方式件豌，日常積累一些，直接引用即可
http://www.reibang.com/p/6a29e9e51b61
此文中還寫(xiě)了QQ控嗜，身份證等驗(yàn)證方式
<!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="活動(dòng)名稱(chēng)" 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="活動(dòng)區(qū)域" prop="region">
<el-select v-model="ruleForm.region" placeholder="請(qǐng)選擇活動(dòng)區(qū)域">
<el-option label="區(qū)域一" value="shanghai"></el-option>
<el-option label="區(qū)域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活動(dòng)時(shí)間" 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="選擇時(shí)間" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="活動(dòng)性質(zhì)" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐廳線上活動(dòng)" name="type"></el-checkbox>
<el-checkbox label="地推活動(dòng)" name="type"></el-checkbox>
<el-checkbox label="線下主題活動(dòng)" 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="線下場(chǎng)地免費(fèi)"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即創(chuàng)建</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: '年齡必須為數(shù)字值'
},
],
email: [{
required: true,
message: '請(qǐng)輸入郵箱地址',
trigger: 'blur'
},
{
type: 'email',
message: '請(qǐng)輸入正確的郵箱地址',
trigger: ['blur', 'change']
}
],
name: [{
required: true,
message: '請(qǐng)輸入活動(dòng)名稱(chēng)',
trigger: 'blur'
}],
region: [{
required: true,
message: '請(qǐng)選擇活動(dòng)區(qū)域',
trigger: 'change'
}],
date1: [{
type: 'date',
required: true,
message: '請(qǐng)選擇日期',
trigger: 'change'
}],
date2: [{
type: 'date',
required: true,
message: '請(qǐng)選擇時(shí)間',
trigger: 'change'
}],
type: [{
type: 'array',
required: true,
message: '請(qǐng)至少選擇一個(gè)活動(dòng)性質(zhì)',
trigger: 'change'
}],
resource: [{
required: true,
message: '請(qǐng)選擇活動(dòng)資源',
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的表單驗(yàn)證(二)之dialog關(guān)閉驗(yàn)證http://www.reibang.com/p/473141679ce4
