vue【实现表单数据验证】

1. 为el-form表单添加：rules
2. 在data中定义规则
3. 将定义的规则绑定在el-form-item

代码如下：

<!--登录表单区域-->
			<el-form :model="loginForm" label-width="0px" class="login_form" :rules="loginFormRules">
				<!--用户名-->
			  	<el-form-item prop="username">
			    	<el-input v-model="loginForm.username" prefix-icon="el-icon-user"></el-input>
				</el-form-item>
				<!--密码-->
				<el-form-item prop="password">
			    	<el-input v-model="loginForm.password" prefix-icon="el-icon-lock" type="password"></el-input>
				</el-form-item>
				<!--按钮区域-->
				<el-form-item class="btns">
			    	<el-button type="primary">登录</el-button>
			    	<el-button type="info">重置</el-button>
				</el-form-item>
			</el-form>
<script>
	export default{
		data(){
			return {
				//登录表单数据绑定对象
				loginForm:{
					username:'',
					password:''
				},
				//表单验证规则
				loginFormRules:{
					//验证用户名是否合法
					username:[
						{ required: true, message: '请输入用户名', trigger: 'blur' },
						{ min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
					],
					//验证密码是否合法
					password:[
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{ min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
					]
				}
			}
		}
	}
</script>