最近有一个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>
