vue开发（八）关于element表单校验的一些总结

最新推荐文章于 2024-08-06 17:26:24 发布

疯糖

最新推荐文章于 2024-08-06 17:26:24 发布

阅读量516

点赞数

分类专栏： vue模块

本文链接：https://blog.csdn.net/Cynthia_Yue27/article/details/108003018

版权

vue模块专栏收录该内容

23 篇文章 0 订阅

订阅专栏

form表单校验的基础总结：
①<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"></el-form>上边需要加***rules***字段
②<el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item>item中prop字段需要和rules对象中的规则名一致，也要和v-model中绑定的字段名一致，如果绑定名不一致会出现就算输入了数据也判定为空
不同表单元素的校验
①input
输入的数据校验：

手机号：
<el-input v-model="ruleForm.whitePhone" oninput="value=value.replace(/[^0-9]/g,'')"></el-input>

rules:{
	whitePhone: [
		{ type:"string", required:true, message:"必填字段", trigger:"blur" },
        { min: 11, max: 11, message: '手机号码长度为11位', trigger:"blur"}
    ]
}
数字字母：
oninput="value=value.replace(/[^A-Za-z0-9]/g,'')"
禁止输入表情😀📕🆒：
watch: {
  'ruleForm.name': {
     handler (val, oldVal) {
       var reg = "[^\\u0020-\\u007E\\u00A0-\\u00BE\\u2E80-\\uA4CF\\uF900-\\uFAFF\\uFE30-\\uFE4F\\uFF00-\\uFFEF\\u0080-\\u009F\\u2000-\\u201f\\r\\n]"
       if (val.match(reg)) {
         this.formData.name = oldVal
       }
     }
   }
 },

② 时间选择器

<el-date-picker
   align="right"
   v-model="ruleForm.learnedTime"
   type="datetime"
   clearable
   format="yyyy-MM-dd HH:mm:ss"
   value-format="yyyy-MM-dd HH:mm:ss"
   :picker-options="pickerOptions"
   placeholder="选择日期时间">
 </el-date-picker>
 
 data () {
 	var validateTime = (rule, value, callback) => {
      if (!value && new Date(value).getTime() > Date.now()) {
        callback(new Error('选择时间不得大于当前时间'))
      } else {
        callback();
      }
    }
 	return {
		rules:{
			learnedTime: [
				{ type: 'string', required: true, message: '请选择日期', trigger: 'change' },
		        { validator: validateTime, trigger: 'change'}
		    ]
		}
	}
}
	注意：1.如果日期选择器上设置了value-format="yyyy-MM-dd HH:mm:ss"即传入时间的格式，type需要由原来的date格式改成string格式，否则会报错
		2.element中对于type="datetime"其实给出了限制选择日期的方案，但只能限制日期，不能限制时间，所以我自己加了校验

③图片上传数据校验

<el-form-item label="图片预览" prop="bannerImg" class="upload-item">
	<el-upload
		class="avatar-uploader"
		action="#"
		:on-change="changeBannerImgUpload"
		:auto-upload="false"
		:show-file-list="false">
		<img v-if="form.bannerImg" :src="form.bannerImg" class="avatar">
		<i v-else class="el-icon-plus avatar-uploader-icon"></i>
		<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且尺寸为690*140！</div>
	</el-upload>
</el-form-item>
data () {
	return {
		rules: {
        	bannerImg: { required: true, message: '请上传轮播图', trigger: 'change' }
		},
		form: {
		 'bannerImg': ''
		}
	}
}
changeBannerImgUpload (file) {
      this.form.bannerImg = URL.createObjectURL(file.raw)
      const isImg = file.type === 'image/jpeg' || 'image/png'
      if (!isImg) {
	        this.$message.error('上传头像图片只能是 jpg/png 格式!')
      }
      this.judgeImgSize(file, () => {
	        this.$message.error('上传轮播图片尺寸为690*140')
	        this.fileList = []
      })
},
// 判断图片尺寸
judgeImgSize (file, callBack) {
	let reader = new FileReader()
	reader.onload = (e) => {
		let data = e.target.result
		let img = new Image()
		img.onload = () => {
			let width = img.width
			let height = img.height
			if (width !== 690 || height !== 140) {
				  callBack()
			}
		}
		img.src = data
	}
	reader.readAsDataURL(file.raw)
}

校验方法的总结：
①数据清空

this..$refs.form.resetFields()

②单独校验某一项和全部校验

单独校验某一项：
this.$refs.form.validateField('bannerImg')
全部校验：
this.$refs.form.validate((valid) => {
	if (valid) {
		alert('submit!')
	} else {
		console.log('error submit!!')
		return false
	}
})

③动态修改校验提示信息，比如部分数据由后端校验返回错误提示信息

this.$refs['form'].fields[0].validateMessage = '人员信息有误！'
this.$refs['form'].fields[0].validateState = 'error'  //  显示提示信息
this.$refs['form'].fields[0].validateState = ''  // 隐藏提示信息