vue+elementui 表單校驗
阿新 • • 發佈：2022-03-17
表單校驗
1. 表單校驗
- 在 el-form 上動態繫結校驗規則
<el-form :model="form" label-width="80px" :rules="rule" ref="ruleForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" placeholder="姓名"></el-input>
</el-form-item>
</el-form>
- 在 data 中定義校驗規則
data(){ return{ rule: { name: [{ required: true, message: "請輸入名稱", trigger: "blur" }], }, } }
2. 常用表單校驗
{ required: true, message: '請輸入活動名稱', trigger: 'blur' }, // 非空校驗 { min: 3, max: 5, message: '長度在 3 到 5 個字元', trigger: 'blur' } //字元數校驗 { type: 'date', required: true, message: '請選擇日期', trigger: 'change' } // 指定date資料型別+非空校驗 { type: 'array', required: true, message: '請至少選擇一個活動性質', trigger: 'change' } // 指定array資料型別+非空校驗 { type: 'email', message: '請輸入正確的郵箱地址', trigger: ['blur', 'change'] } // 指定email資料型別+非空校驗
3. 自定義校驗規則
- 在 el-form 上動態繫結校驗規則
<el-form :model="form" label-width="80px" :rules="rule" ref="ruleForm">
<el-form-item label="身份證號" prop="idNum">
<el-input v-model.number="form.idNum" placeholder="身份證號"></el-input>
</el-form-item>
</el-form>
[注意] v-model.number.trim="form.idNum"
v-model.number.trim=""
如果想自動將使用者的輸入值轉為數值型別，可以給 v-model 新增 number 修飾符
如果要自動過濾使用者輸入的首尾空白字元，可以給 v-model 新增 trim 修飾符
- 在 data 中定義校驗規則
data(){
let isNum = (rule, val, callback) => {
let reg = /^\d{18}$/;
if (!reg.test(val)) {
console.log("校驗不通過");
callback(new Error("請輸入18位數字"));
} else {
console.log("校驗通過");
callback();
}
};
return{
rule: {
idNum: [
{ required: true, message: "請輸入證件號", trigger: "blur" },
{ validator: isNum, trigger: "blur" },
],
},
}
}
4. 提交表單時 對整個表單進行校驗
- ref 給 el-from 元素註冊引用資訊
<el-form :model="form" label-width="80px" :rules="rule" ref="ruleForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item label="身份證號" prop="idNum">
<el-input v-model="form.idNum" placeholder="身份證號"></el-input>
</el-form-item>
</el-form>
- this.$refs.ruleForm 獲取 el-from 元素，呼叫 validate 方法校驗整個表單
onSubmit() {
this.$refs.ruleForm.validate((valid) => {
if (valid) { // valid===true表示校驗通過
console.log("發起請求，提交資料");
}
});
},
5. 重置整個表單
this.$refs.ruleForm 獲取 el-from 元素，呼叫 resetFields 方法重置整個表單
this.$refs.ruleForm.resetFields()
6. 新增修改列表資料 demo---表單校驗應用
<template>
<div>
<el-button @click="updata">新增</el-button>
<!-- 列表展示區域 -->
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column prop="name" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column prop="" label="操作">
<template slot-scope="scope">
<el-button @click="updata(scope.row)">修改</el-button>
</template>
</el-table-column>
</el-table>
<!-- 新增修改 表單彈框 -->
<el-dialog
title="提示"
:visible.sync="show"
width="500px"
:before-close="close"
>
<el-form :model="form" label-width="80px" :rules="rule" ref="ruleForm">
<el-form-item label="日期" prop="date">
<el-input v-model="form.date" placeholder="日期"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" placeholder="姓名"></el-input>
</el-form-item>
<el-form-item label="身份證號" prop="idNum">
<el-input v-model="form.idNum" placeholder="身份證號"></el-input>
</el-form-item>
<el-form-item label="地址" prop="address">
<el-input v-model="form.address" placeholder="地址"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="close">取消</el-button>
<el-button type="primary" @click="onSubmit">確定</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
let isNum = (rule, val, callback) => {
let reg = /^\d{18}$/;
if (!reg.test(val)) {
console.log("校驗不通過");
callback(new Error("請輸入18位數字"));
} else {
console.log("校驗通過");
callback();
}
};
return {
rule: {
date: [{ required: true, message: "請輸入日期", trigger: "blur" }],
name: [{ required: true, message: "請輸入名稱", trigger: "blur" }],
idNum: [
{ required: true, message: "請輸入證件號", trigger: "blur" },
{ validator: isNum, trigger: "blur" },
],
address: [{ required: true, message: "請輸入地址", trigger: "blur" }],
},
tableData: [
{
date: "2016-05-02",
name: "王小虎",
idNum: "140427199709111111",
address: "上海市普陀區金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
idNum: "140427199709111111",
address: "上海市普陀區金沙江路 1517 弄",
}
],
form: {
date: "",
name: "",
address: "",
idNum: ""
},
show: false,
};
},
methods: {
updata(row) {
console.log(row);
this.form = { ...row }; //深拷貝
console.log(this.form === row);
this.show = true;
},
close() {
this.show = false;
this.$refs.ruleForm.resetFields();
},
onSubmit() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
console.log(valid);
console.log("發起請求");
} else {
console.log(valid);
}
});
this.show = false;
},
},
};
</script>