element-ui 使用:rules对表单字段进行验证

最近有一个pc端后台的项目

用element-ui开发，有很多表单提交，所以这里写一下 rules校验

html中：

一定要注意 

prop，ref，model ，rules  这几个属性一定要添加，否则校验不生效，以及对应的值 对应

      <!--     ref  表单被引用时的名称，标识 this.$refs.shop.validate() 与这个对应-->
      <!--     model 表单数据对象 和data中shop对应-->
      <!--     rules 表单校验规则，和data中保持一致 submitRules-->
      <el-form ref="shop" :model="shop" :rules="submitRules" label-width="120px">
 <!-- prop：表单域 model 字段，要和data中保持一致，在使用 validate、resetFields 方法的情况下，该属性是必填的-->
        <el-form-item  prop="name" label="店铺名称">
          <el-input name="name" v-model="shop.name" />
        </el-form-item>
      </el-form>

js：

 export default {
    name: "Setin",
    data() {

      return {
        // 表单的对应数据
        shop: {
          name: '',
          codeid: '',
          id: '',
          code: '',
          phone: '',
          email: '',
          password: '',
          surepassword: ''
        },
        // 检验规则
        submitRules: {
          // 字段名添加校验规则 以及触发条件
          email: [
            {required: false, trigger: "blur" }
          ],
          // 除了必填其他的校验
          phone: [
            {required: true, trigger: "blur", validator: vaildatePhone }
          ],
          name: [
            {required: true, trigger: "blur", message: "该项为必填项"}
          ],
          id: [
            {required: true, trigger: "blur", message: "该项为必填项"}
          ],
          code: [
            {required: true, trigger: "blur", message: "该项为必填项"}
          ],
          codeid: [
            {required: true, trigger: "blur", message: "该项为必填项"}
          ],
          surepassword: [
            {required: true, trigger: "blur", message: "该项为必填项"}
          ],
          password: [
            {required: true, trigger: "blur", message: "该项为必填项"}
          ]
        },
 
      }
    },
    methods: {
  
     
      },
      onSubmit() {
    
        // 校验通过以后 掉接口 this.$refs.shop 和html中ref对应
        this.$refs.shop.validate(valid => {
          if (valid) {
           //成功回调
          } else {
          //失败回调
          }
        });
      },
     
    }
  }

　　

校验规则

export function isEmail(val) {
  return /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/.test(val)
}

　　

 完整代码：

<template>
  <div>
    <div class="app-container">
      <!--     ref  表单被引用时的名称，标识 this.$refs.shop.validate() 与这个对应-->
      <!--     model 表单数据对象 和data中shop对应-->
      <!--     rules 表单校验规则，和data中保持一致 submitRules-->
      <el-form ref="shop" :model="shop" :rules="submitRules" label-width="120px">
 <!-- prop：表单域 model 字段，要和data中保持一致，在使用 validate、resetFields 方法的情况下，该属性是必填的-->
        <el-form-item  prop="name" label="店铺名称">
          <el-input name="name" v-model="shop.name" />
        </el-form-item>
        <el-form-item prop="id"  label="店铺账号">
          <el-input name="id" v-model="shop.id" />
        </el-form-item>
        <el-form-item  prop="password" label="登录密码">
          <el-input name="password" type="password" v-model="shop.password" />
        </el-form-item>
        <el-form-item  prop="surepassword" label="确认密码">
          <el-input name="surepassword" type="password" v-model="shop.surepassword" />
        </el-form-item>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="手机号码" name="phone">
            <el-form-item  prop="phone" label="手机号码">
              <el-input name="phone" v-model="shop.phone" />
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="邮箱" name="email">
            <el-form-item  prop="email" label="邮箱">
              <el-input name="email" v-model="shop.email" />
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
        <el-form-item prop="code" label="图片验证码">
          <el-row>
            <el-col :span="8">
              <el-input name="code" v-model="shop.code" />
            </el-col>
            <el-col :offset="1" :span="4" style="height:40px;"><img :src="imgUrl" @click="getVerifyCodeFun"/></el-col>
          </el-row>
        </el-form-item>
        <el-form-item  prop="codeid" label="验证码">
          <el-input name="codeid" v-model="shop.codeid"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import { getVerifyCode,businessRegister } from "@/api/business";
  // 引入公用的校验规则
  import { isPhone,isEmail } from "@/utils/validate";
  // 根据校验规则，给与单独的提示
  const vaildatePhone=(rule,value,callback)=>{
    if(!isPhone(value)){
      callback(new Error("请输入正确的手机号"));
    }else{
      callback()
    }
  };
  const validateEmail = (rule, value, callback) => {
    if(!isEmail(value)){
      callback(new Error("请输入正确的邮箱"));
    }else{
      callback()
    }
  };
  export default {
    name: "Setin",
    data() {

      return {
        // 表单的对应数据
        shop: {
          name: '',
          codeid: '',
          id: '',
          code: '',
          phone: '',
          email: '',
          password: '',
          surepassword: ''
        },
        // 检验规则
        submitRules: {
          // 字段名添加校验规则 以及触发条件
          email: [
            {required: false, trigger: "blur" }
          ],
          // 除了必填其他的校验
          phone: [
            {required: true, trigger: "blur", validator: vaildatePhone }
          ],
          name: [
            {required: true, trigger: "blur", message: "该项为必填项"}
          ],
          id: [
            {required: true, trigger: "blur", message: "该项为必填项"}
          ],
          code: [
            {required: true, trigger: "blur", message: "该项为必填项"}
          ],
          codeid: [
            {required: true, trigger: "blur", message: "该项为必填项"}
          ],
          surepassword: [
            {required: true, trigger: "blur", message: "该项为必填项"}
          ],
          password: [
            {required: true, trigger: "blur", message: "该项为必填项"}
          ]
        },
        imgUrl: "",
        activeName: 'phone'
      }
    },
    methods: {
      handleClick(tab, event) {
        // 切换手机号 邮箱 验证
        if(tab.name=='phone'){
          this.submitRules.email=[
            {required: false, trigger: "blur"}
          ];
            this.submitRules.phone=[
            {required: true, trigger: "blur", validator: vaildatePhone }
          ]
        }else{
          this.submitRules.email=[
            {required: true, trigger: "blur", validator:validateEmail}
          ];
          this.submitRules.phone=[
            {required: false, trigger: "blur"}
          ]
        }
      },
      getVerifyCodeFun() {
        getVerifyCode().then(data => {
          // 传输文件流 ajax 必须有 responseType: 'arraybuffer' ，然后对数据进行前端拼接
          let imgUrl =
            "data:image/png;base64," +
            btoa(
              new Uint8Array(data).reduce(
                (data, byte) => data + String.fromCharCode(byte),
                ""
              )
            );
          // 这里如果不清楚 new Uint8Array(data.data) 中data的指代，就看看最上面的那个图
          this.imgUrl = imgUrl;
        });
      },
      onSubmit() {
        console.log(this.submitRules)
        // 校验通过以后 掉接口 this.$refs.shop 和html中ref对应
        this.$refs.shop.validate(valid => {
          if (valid) {
            businessRegister({
              storeName:this.shop.name,
              username:this.shop.id,
              password:this.shop.password,
              contact:this.shop.phone ? this.shop.phone : this.shop.email
            }).then( data=>{
              this.$message('成功')
            })


          } else {
            console.log("error submit!!");

            this.$message({
              message: '错误!',
              type: 'error'
            })
            return false;
          }
        });
      },
      onCancel() {

        this.$message({
          message: '取消!',
          type: 'warning'
        })
        this.shop={
          name: '',
            codeid: '',
            id: '',
            code: '',
            phone: '',
            email: '',
            password: '',
            surepassword: ''
        }
      }
    },
    mounted() {
     this.getVerifyCodeFun();
    }
  }
</script>

<style scoped>

</style>

　　

有一个博客 就这个问题写的比较详细 放在这里方便以后查看 https://blog.csdn.net/qq_41402200/article/details/86016313