2021-07-10

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

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

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

html中：

一定要注意

1
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>

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