验证规则
<template>
<el-form size="large" label-width="25%" ref="FormData" :rules="FormDataRules" :model="FormData"> <el-form-item label="登录名" prop="Logoname"> <el-input v-model="FormData.Logoname"></el-input> </el-form-item> <el-form-item label="电话" prop="Phone"> <el-input v-model="FormData.Phone"> </el-input> </el-form-item> <el-form-item label="邮箱" prop="Email"> <el-input v-model="FormData.Email"> </el-input> </el-form-item> <el-form-item > <el-button type="primary" @click.prevent="ButtonAdd()">确定</el-button> <el-button type="primary" @click.prevent="ButtonCancel()">取消</el-button> </el-form-item> </el-form>
</template>
export default {
data() {
//验证手机号
var RulePhone = (rule, value, callback) => {
var reg= /^1[3|4|5|7|8][0-9]{9}$/;
if (String(value).length<11) {
callback(new Error('电话号码为11位数!'));
} else if (value!=parseFloat(value)) {
callback(new Error('联系方式只能是数字'));
}else if(!reg.test(value)){
callback(new Error('请输入正确的电话号码'));
}else{
callback();
}
};
//验证邮箱
var RuleEmail = (rule, value, callback) => {
const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
if (!value) {
callback(new Error("邮箱不能为空"))
}else if (!mailReg.test(value)) {
callback(new Error("请输入正确的邮箱格式"))
} else {
callback()
}
};
return {
FormData: {
Logoname: '', //登录名
Phone: '', //电话
Email:'', //邮箱
},
FormDataRules:{
Logoname: [{ required: true, message: '请输入姓名', trigger: 'blur' }], //登录名
Phone: [{required: true, type:'number', validator:RulePhone, trigger: 'blur' } ] //电话
Email:[{validator:RuleEmail,trigger:'blur'}] //邮箱
}
}
},
methods: {
//确定按钮
ButtonAdd(){
this.$refs.FormData.validate((valid) => {
if(valid){
if(this.FormData.Pwd!=this.FormData.AgainPwd){
this.$message("两次密码输入不一致,请重新输入");
}
}
})
}
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步