Vue项目之实现登录功能的表单验证！

Vue项目之实现登录功能的表单验证！

步骤：

配置 Form表单验证;

1、必须给el-from组件绑定model 为表单数据对象

2 给需要验证的表单项 el-form-item 绑定 prop 属性需要指定表单对象中的数据名称

只需要写属性名就可以了！ prop="mobile"

3 配置验证规则！ 通过el-from 组件的 rules属性配置验证规则

这是我们要验证的之一的表单项

绑定 prop 属性需要指定表单对象中的数据名称

   <el-form-item prop="mobile">
        <el-input
          v-model="user.mobile"
          placeholder="请输入你的手机号"
        ></el-input>
      </el-form-item>

配置验证规则！ 通过el-from 组件的 rules属性配置验证规则

  <el-form class="login-form" ref="form" :model="user" :rules="formRules">

 formRules: {
        // 表单验证规则配置 required 代表是必填项！
        // message 就是他的提示消息！
        // trigger 代表触发验证的机制 blur 就是当鼠标失去焦点的时候触发校验！
        // min max 也就是长度的限制不能少于和不能大于的字符！
         mobile: [
            { required: true, message: '手机号不能为空！', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
      }

效果展示：

手动触发表单验证

1、给el-form设置ref 起个名字（随便起名，不要重复即可)

 <el-form
      class="login-form"
      ref="manualVarifaction"
      :model="user"
      :rules="formRules"
    >

2、通过 ref获 el-form 组件，调用组件的 validate 进行验证！

 onLogin() {
      //获取表单数掘【根据接口要求绑定数据！】
      const user = this.user;
      //表单验证  this.$refs['']获取ref组件
      // validate 是异步请求！
      this.$refs["manualVarifaction"].validate((valid, err) => {
        // 如果表单验证失败， 停止请求提交！
        if (!valid) {
          return;
        }
        console.log(valid);
        console.log(err); // 验证失败的字段！

        console.log(this.$refs["manualVarifaction"]);

        //验证通过,请求登录
        this.loginIn();
      });

      //处理后端响应结果l
      //    成功:XXX
      //    失败:xXX
    },
    loginIn() {

      request({
        method: "POST",
        url: "/mp/v1_0/authorizations",
        //  data用来设置 POST 请求体
        data: this.user,
      })
        .then((res) => {
          //   登录成功
          console.log(res);
        })
        .catch((err) => {
          //   登录失败
          console.log("登录失败", err);
        });
    }

效果展示

自定义验证规则

 <!-- 当然你的规则还是要绑定到prop 属性上面 如下！ -->
      <el-form-item prop="agree">
        <!-- `checked` 为 true 或 false -->
        <!-- 要让复选框里的双向绑定到user.agree  -->
        <el-checkbox v-model="user.agree">
          我己阅读并同意用户协议和隐私条款</el-checkbox
        >
      </el-form-item>

 agree: [
           {
            // 自定义校验规则！
          //  验证通过： callback()
          // 验证失败！：callback(new Error('错误i的信息!'))
          // value 是一个布尔值！ 勾选选项value的值就会变成true
             validator: (rule, value, callback) => {
               console.log(rule, value)
               if (value) {

               } else {
                 callback(new Error('错误提示'))
               }

           },
              // message: "请勾选同意用户协议!",
               trigger: "change" ,

            },
        ]

效果展示