最近有一個pc端后台的項目
用element-ui開發，有很多表單提交，所以這里寫一下 rules校驗
html中：
一定要注意
prop，ref，model ，rules 這幾個屬性一定要添加，否則校驗不生效，以及對應的值 對應
<!-- ref 表單被引用時的名稱，標識 this.$refs.shop.validate() 與這個對應-->
<!-- model 表單數據對象 和data中shop對應-->
<!-- rules 表單校驗規則，和data中保持一致 submitRules-->
<el-form ref="shop" :model="shop" :rules="submitRules" label-width="120px">
<!-- prop：表單域 model 字段，要和data中保持一致，在使用 validate、resetFields 方法的情況下，該屬性是必填的-->
<el-form-item prop="name" label="店鋪名稱">
<el-input name="name" v-model="shop.name" />
</el-form-item>
</el-form>
js：
export default {
name: "Setin",
data() {
return {
// 表單的對應數據
shop: {
name: '',
codeid: '',
id: '',
code: '',
phone: '',
email: '',
password: '',
surepassword: ''
},
// 檢驗規則
submitRules: {
// 字段名添加校驗規則 以及觸發條件
email: [
{required: false, trigger: "blur" }
],
// 除了必填其他的校驗
phone: [
{required: true, trigger: "blur", validator: vaildatePhone }
],
name: [
{required: true, trigger: "blur", message: "該項為必填項"}
],
id: [
{required: true, trigger: "blur", message: "該項為必填項"}
],
code: [
{required: true, trigger: "blur", message: "該項為必填項"}
],
codeid: [
{required: true, trigger: "blur", message: "該項為必填項"}
],
surepassword: [
{required: true, trigger: "blur", message: "該項為必填項"}
],
password: [
{required: true, trigger: "blur", message: "該項為必填項"}
]
},
}
},
methods: {
},
onSubmit() {
// 校驗通過以后 掉接口 this.$refs.shop 和html中ref對應
this.$refs.shop.validate(valid => {
if (valid) {
//成功回調
} else {
//失敗回調
}
});
},
}
}
校驗規則
export function isEmail(val) {
return /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(val)
}
完整代碼：
<template>
<div>
<div class="app-container">
<!-- ref 表單被引用時的名稱，標識 this.$refs.shop.validate() 與這個對應-->
<!-- model 表單數據對象 和data中shop對應-->
<!-- rules 表單校驗規則，和data中保持一致 submitRules-->
<el-form ref="shop" :model="shop" :rules="submitRules" label-width="120px">
<!-- prop：表單域 model 字段，要和data中保持一致，在使用 validate、resetFields 方法的情況下，該屬性是必填的-->
<el-form-item prop="name" label="店鋪名稱">
<el-input name="name" v-model="shop.name" />
</el-form-item>
<el-form-item prop="id" label="店鋪賬號">
<el-input name="id" v-model="shop.id" />
</el-form-item>
<el-form-item prop="password" label="登錄密碼">
<el-input name="password" type="password" v-model="shop.password" />
</el-form-item>
<el-form-item prop="surepassword" label="確認密碼">
<el-input name="surepassword" type="password" v-model="shop.surepassword" />
</el-form-item>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="手機號碼" name="phone">
<el-form-item prop="phone" label="手機號碼">
<el-input name="phone" v-model="shop.phone" />
</el-form-item>
</el-tab-pane>
<el-tab-pane label="郵箱" name="email">
<el-form-item prop="email" label="郵箱">
<el-input name="email" v-model="shop.email" />
</el-form-item>
</el-tab-pane>
</el-tabs>
<el-form-item prop="code" label="圖片驗證碼">
<el-row>
<el-col :span="8">
<el-input name="code" v-model="shop.code" />
</el-col>
<el-col :offset="1" :span="4" style="height:40px;"><img :src="imgUrl" @click="getVerifyCodeFun"/></el-col>
</el-row>
</el-form-item>
<el-form-item prop="codeid" label="驗證碼">
<el-input name="codeid" v-model="shop.codeid"/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
<el-button @click="onCancel">取消</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import { getVerifyCode,businessRegister } from "@/api/business";
// 引入公用的校驗規則
import { isPhone,isEmail } from "@/utils/validate";
// 根據校驗規則，給與單獨的提示
const vaildatePhone=(rule,value,callback)=>{
if(!isPhone(value)){
callback(new Error("請輸入正確的手機號"));
}else{
callback()
}
};
const validateEmail = (rule, value, callback) => {
if(!isEmail(value)){
callback(new Error("請輸入正確的郵箱"));
}else{
callback()
}
};
export default {
name: "Setin",
data() {
return {
// 表單的對應數據
shop: {
name: '',
codeid: '',
id: '',
code: '',
phone: '',
email: '',
password: '',
surepassword: ''
},
// 檢驗規則
submitRules: {
// 字段名添加校驗規則 以及觸發條件
email: [
{required: false, trigger: "blur" }
],
// 除了必填其他的校驗
phone: [
{required: true, trigger: "blur", validator: vaildatePhone }
],
name: [
{required: true, trigger: "blur", message: "該項為必填項"}
],
id: [
{required: true, trigger: "blur", message: "該項為必填項"}
],
code: [
{required: true, trigger: "blur", message: "該項為必填項"}
],
codeid: [
{required: true, trigger: "blur", message: "該項為必填項"}
],
surepassword: [
{required: true, trigger: "blur", message: "該項為必填項"}
],
password: [
{required: true, trigger: "blur", message: "該項為必填項"}
]
},
imgUrl: "",
activeName: 'phone'
}
},
methods: {
handleClick(tab, event) {
// 切換手機號 郵箱 驗證
if(tab.name=='phone'){
this.submitRules.email=[
{required: false, trigger: "blur"}
];
this.submitRules.phone=[
{required: true, trigger: "blur", validator: vaildatePhone }
]
}else{
this.submitRules.email=[
{required: true, trigger: "blur", validator:validateEmail}
];
this.submitRules.phone=[
{required: false, trigger: "blur"}
]
}
},
getVerifyCodeFun() {
getVerifyCode().then(data => {
// 傳輸文件流 ajax 必須有 responseType: 'arraybuffer' ，然后對數據進行前端拼接
let imgUrl =
"data:image/png;base64," +
btoa(
new Uint8Array(data).reduce(
(data, byte) => data + String.fromCharCode(byte),
""
)
);
// 這里如果不清楚 new Uint8Array(data.data) 中data的指代，就看看最上面的那個圖
this.imgUrl = imgUrl;
});
},
onSubmit() {
console.log(this.submitRules)
// 校驗通過以后 掉接口 this.$refs.shop 和html中ref對應
this.$refs.shop.validate(valid => {
if (valid) {
businessRegister({
storeName:this.shop.name,
username:this.shop.id,
password:this.shop.password,
contact:this.shop.phone ? this.shop.phone : this.shop.email
}).then( data=>{
this.$message('成功')
})
} else {
console.log("error submit!!");
this.$message({
message: '錯誤!',
type: 'error'
})
return false;
}
});
},
onCancel() {
this.$message({
message: '取消!',
type: 'warning'
})
this.shop={
name: '',
codeid: '',
id: '',
code: '',
phone: '',
email: '',
password: '',
surepassword: ''
}
}
},
mounted() {
this.getVerifyCodeFun();
}
}
</script>
<style scoped>
</style>
有一個博客 就這個問題寫的比較詳細 放在這里方便以后查看 https://blog.csdn.net/qq_41402200/article/details/86016313