Vue-项目中遇到的知识点-rules验证规则

学习项目中遇到的知识点

一、 data()中使用

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop
属性设置为需校验的字段名即可

• 标签要绑定rules属性，即在标签内部声明 rules = “loginFormRules”
• 双引号内名字可以自己定义，随后在data中声明此为表单验证规则对象 标签要绑定prop属性，即在标签内部声明
• prop = "username” ；username表示在表单验证规则对象中定义的属性
• required: true 表示必填项
• trigger: 'blur’表示当失去焦点时触发

下面展示一些 代码。

 <!-- 登录表单区域-->
      <el-form
        label-width="0px"
        class="login-form"
        :model="loginForm"
        :rules="loginFormRules">
        <!--用户名-->
        <el-form-item prop="username">
          <el-input 
            prefix-icon="iconfont icon-denglu-yonghu"
            v-model="loginForm.username"
          ></el-input>

   data(){
      return{
        //登录表单的数据绑定
        loginForm:{
          username:'',
          password:''
        },
        // 表单验证规则对象
        loginFormRules:{
          // 验证用户名是否合法
          username:[
            { required: true, message: '请输入登录名称', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],