其實很簡單：步驟1：先用element 把頁面寫出來；步驟2.規則驗證，需要自定義驗證的，引入對應的自定義驗證方法, 3.封裝一個自定義驗證的js。
1.先把結構寫出來；
注意： from 表單上有model（綁定數據），ref(提交的時有用)，rules(對表單的驗證規則)，這三者缺一不可。
2.代碼：
<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" maxlength="10" type="text"></el-input>
</el-form-item>
<el-form-item label="電話號碼" prop="phone">
<el-input v-model="ruleForm.phone" type="number" maxlength=11></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>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
3.data里面操作數據；
代碼：
import Format from "../commonJs/common.js"
data() {
return {
ruleForm: {
name: '',
phone: '',
region: '',
},
rules: {
name: [
{
validator: Format.FormValidate.Form().Name, //validator： 自定義驗證規則
trigger: "blur"
}
],
phone: [
{
validator: Format.FormValidate.Form().Tel,
trigger: "blur"
}
],
region: [
{ required: true, message: '請選擇活動區域', trigger: 'change' } //驗證
],
}
};
},
4.編寫表單驗證js（新建一個js）
let regId = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
let email = /^(\w+\.?)*\w+@(?:\w+\.)\w+$/ //郵箱
let tel = /^1[345789]\d{9}$/ //手機號碼
let fax = /^(\d{3,4}-)?\d{7,8}$/ //傳真
let name = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,10}$/; //姓名
let FormValidate = (function () {
// eslint-disable-next-line
function FormValidate() {}
// From表單驗證規則 可用於公用的校驗部分
FormValidate.Form = function () {
return {
// 姓名的驗證規則
Name: function (rule, value, callback) {
if (!value) {
return callback(new Error('姓名不能為空'))
}
if (!name.test(value)) {
callback(new Error('請輸入正確姓名!'))
} else {
callback()
}
},
// 郵箱的正則
Email: function (rule, value, callback) {
if (!value) {
return callback(new Error('郵箱不能為空'))
}
if (!email.test(value)) {
callback(new Error('請輸入正確的郵箱!'))
} else {
callback()
}
},
// 身份證的驗證規則
ID: function (rule, value, callback) {
if (!value) {
return callback(new Error('身份證不能為空'))
}
if (!regId.test(value)) {
callback(new Error('請輸入正確的二代身份證號碼'))
} else {
callback()
}
},
// 電話號碼的驗證
Tel: (rule, value, callback) => {
if (!value) {
return callback(new Error('電話不能為空'))
}
if (!tel.test(value)) {
callback(new Error('請正確填寫電話號碼'))
} else {
callback()
}
}
}
}
// FromOne表單驗證規則 用於FromOne個性化的校驗
FormValidate.FormOne = function () {
return {
// 姓名的驗證規則
Name: function (rule, value, callback) {
if (!value) {
return callback(new Error('姓名不能為空'))
}
if (!name.test(value)) {
callback(new Error('請輸入正確姓名!'))
} else {
callback()
}
}
}
}
return FormValidate
}())
exports.FormValidate = FormValidate
5.點擊提交/重置事件
代碼：
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();
}
},
6.demo展示
