意想不到的from表单以及input隐含操作

限制输入开头结尾输入空格

直接在v-model后添加.trim即可

<el-input v-model.trim="projectInfo.companyUserName" ></el-input>

添加自定义校验

方法：现在data()下面设置校验的变量，然后添加到rules校验当中

data() { //校验邮箱 var checkEmail = (rule, value, callback) => { if (value) { var reg = /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/; if (!reg.test(value)) { callback(new Error('请输入正确的邮箱')); } else { callback(); } } }; return { rules: {//表单校验 companyUserEmail: [ { validator: checkEmail, trigger: "blur" }, ] }, }

实现的样式： 其他常用的正则校验

只能输入英文和中间空格

var reg = /^[A-Za-z][A-Za-z\s]*[A-Za-z]$/

只能输入数字（我用于手机号校验）

var reg =/^1[3|4|5|7|8][0-9]\d{8}$/;

更多常用正则校验

清除表单校验

一般用于表单多次显示，但是上一次的校验痕迹还在

//productInfo是表单的ref值 this.$refs.productInfo.clearValidate();

$refs.[from]还是 $refs.from

我们在获取ref指向的元素时，如果ref后面直接是常量就不用加[]，但是如果我们是传值过来的，是个变量就需要加[]

对于from表单校验方法

获取el-from元素，然后调用validate方法，可以看出因为我们projectInfo是一个形参，是一个变量，所以就在下面加了[]

submitForm(projectInfo) { //获取projectInfo元素，也就是from表单 this.$refs[projectInfo].validate((valid) => { if (valid) { //校验成功 } else { //校验未成功 return false; } }); }