意想不到的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;
		}
	});
}