form 表单校验 & 格式限制

一、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 ;
  }