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