一、vue element -> form 表单校验
字段验证 :正则表达式
1、在表单form 里 :
<el-form :rules='rules' prop="name">
:rules="[{ required: true, message: 'name不能为空', trigger: 'blur' }]"
//(可以直接写)
:rules="[{required:true, message:'名字不能为空'},{validator:'/^[\u4E00-\u9FA5]+$/',message:'名字为中文'}]"
</el-form>
2、在data 中:定义 (return同级)
//姓名校验
var name =/^[\u4E00-\u9FA5]+$/
var validatePasswd = (rule, value, callback) => {
if (!value) {
return callback(new Error('姓名不能为空!!'))
}
setTimeout(() => {
if (!name.test(value)) {
callback(new Error('格式有误(6到12位,且不能出现空格)'))
} else {
callback()
}
}, 200)
}
3、在return 使用 用prop属性接收
//校验
rules: {
name: [{ required: true, validator: validatePasswd3, trigger: 'blur' }],
},
4、提交 ->判断是否填写完整:
commit(form) {
this.$refs[form].validate((valid) => {
if (valid) {
// 请求
} else {
this.$message({message: '您还没有填完哦',type: 'warning'});
return false;
}
}
二、录像/录音限制
vue 组件中自带的有个方法 绑定 :beforeUpload="beforeUpload"
定义方法:
beforeUpload(file){
var test = file.name.substring(file.name.lastIndexOf('.')+1)
const exten = test === 'mp3'
const exten2 = test === 'mp4'
//文件大小
const isfile = file.size / 1024 / 1024 < 10
if(!exten && !exten){
this.$message({
message:"上传文件只能是mp3,mp4格式!",
type:'error'
})
}
if(!isfile ) {
this.$message({
message: '上传文件大小不能超过 10MB!',
type: 'warning'
});
return exten || exten2 && const isfile ;
}