vue + element form 验证 示例

目标-结果

1.创建/src/FormRule.js

const cellphone = [{
	validator: (rule, value, callback) => {
		let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
		if ($.trim(value) == '') {
			callback(new Error('请输入手机号码'));
		} else if (!reg.test(value)) {
			callback(new Error('请输入有效手机号码'));
		} else {
			callback();
		}
	},
	trigger: 'blur'
}];
const telephone = [{
	validator: (rule, value, callback) => {
		let reg = /\d{3}-\d{8}|\d{4}-\d{7}/;
		if ($.trim(value) == '') {
			callback(new Error('请输入电话号码'));
		} else if (!reg.test(value)) {
			callback(new Error('请输入有效电话号码'));
		} else {
			callback();
		}
	},
	trigger: 'blur'
}];
const password = [{
	validator: (rule, value, callback) => {
		let reg = /^[a-zA-Z0-9]{6,18}$/;
		if ($.trim(value) == '') {
			callback(new Error('请输入密码'));
		} else if (!reg.test(value)) {
			callback(new Error('请输入6-18位密码'));
		} else {
			callback();
		}
	},
	trigger: 'blur'
}];
const Email = [{
	validator: (rule, value, callback) => {
		let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
		if ($.trim(value) == '') {
			callback(new Error('请输入Email地址'));
		} else if (!reg.test(value)) {
			callback(new Error('请输入有效Email地址'));
		} else {
			callback();
		}
	},
	trigger: 'blur'
}];
const IP = [{
	validator: (rule, value, callback) => {
		let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
		if ($.trim(value) == '') {
			callback(new Error('请输入IP地址'));
		} else if (!reg.test(value)) {
			callback(new Error('请输入有效IP地址'));
		} else {
			callback();
		}
	},
	trigger: 'blur'
}];
const URL = [{
	validator: (rule, value, callback) => {
		let reg = /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/;
		if ($.trim(value) == '') {
			callback(new Error('请输入URL地址'));
		} else if (!reg.test(value)) {
			callback(new Error('请输入有效URL地址'));
		} else {
			callback();
		}
	},
	trigger: 'blur'
}];

export default {
	cellphone,
	telephone,
	password,
	Email,
	IP,
	URL
}

2.修改/src/main.js

import FormRule from './FormRule'
Vue.prototype.FormRule = FormRule;

3.修改.vue页面

<template>
	<div class="login">
		<div class="main">
			<h2>表单验证</h2>
			<div class="box">
				<el-form :model="elForm" ref="elForm">
					<el-form-item prop="cellphone" :rules="FormRule.cellphone">
						<el-input v-model="elForm.cellphone" @keyup.enter.native="login('elForm')" placeholder="用户名"></el-input>
					</el-form-item>
					<el-form-item prop="password" :rules="FormRule.password">
						<el-input v-model="elForm.password" @keyup.enter.native="login('elForm')" placeholder="密码" type="password"></el-input>
					</el-form-item>
					<el-form-item>
						<div @click="login('elForm')" class="btn">登录</div>
					</el-form-item>
				</el-form>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'login',
		data() {
			return {
				elForm: {
					cellphone: '',
					password: ''
				}
			}
		},
		methods: {
			login(form) {
				this.$refs[form].validate((valid) => {
					if (valid) {
						console.log('登录成功');
					} else {
						console.log('登录失败');
					}
				});
			}
		}
	}
</script>