表单验证功能的实现

 

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

<el-form :model="ruleForm" :rules="rules">

          <el-form-item  prop="username">

            <el-input  size="medium"  placeholder="账  号"style="margin:10px 0" prefix-icon="el-icon-user" v-model="ruleForm.username" class="login-item" />   </el-form-item>

          <el-form-item   prop="password">

             <el-input size="medium" style="margin:10px 0" placeholder="密  码"  prefix-icon="el-icon-lock" v-model="ruleForm.password" type="password" class="login-item" />

         </el-form-item></el-form> 

 data() {

    return {

      ruleForm:{

      username:'',

      password: ''

    },

 rules:{

        username:[

        {required: true,  message: '请输入用户名', trigger: 'blur' },

        { min: 0, max: 8, message: '长度在 0 到 8 个字符', trigger: 'blur' }

        ],

        password:[

          {required: true,  message: '请输入密码'},

          {min:0,max:8,message:'长度在0到8个字符'}

        ]

 依靠如下关键的地方

<el-form :model=”ruleForm” :rules=”rules”>

<el-form-item prop="username">

<el-input v-model="ruleForm.username">

</el-form-item>

</el-form>

data() {

    return {

      ruleForm:{

      username:'',

      password: ''

    },

 rules:{

        username:[

        {required: true,  message: '请输入用户名', trigger: 'blur' },

        { min: 0, max: 8, message: '长度在 0 到 8 个字符', trigger: 'blur' }

        ],

        password:[

          {required: true,  message: '请输入密码'},

          {min:0,max:8,message:'长度在0到8个字符'}

        ]

//blur 的作用是捕捉鼠标失焦

此时记得向后端发送请求时的用户名和密码是 ruleForm.username,密码是ruleForm.password