element 和 iView自定义表单验证规则

wendy_qx

已于 2023-06-05 10:44:49 修改

阅读量435

点赞数

分类专栏：前端组件文章标签：前端 javascript vue.js Powered by 金山文档

于 2023-03-07 14:13:58 首次发布

本文链接：https://blog.csdn.net/wendy_qx/article/details/129381404

版权

前端组件专栏收录该内容

7 篇文章 0 订阅

订阅专栏

以验证电话号码为例

iView

<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="140">
          <Form-item label="电话" prop="phone">
            <Input v-model="formValidate.phone" placeholder="请输入楼长电话"></Input>
          </Form-item>
        </Form>

element

<el-form :model="formValidate" :rules="ruleValidate" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="电话" prop="phone">
    <el-input  v-model="formValidate.phone"></el-input>
  </el-form-item>
  
</el-form>

data() {
    return {
formValidate: {
    phone:''
      },
ruleValidate：{
     phone: [
          { required: true, message: '电话不能为空', trigger: 'blur' },
          {
            validator(rule, value, callback) {
              // console.log(rule, value, callback)
              // rule：采用的规则
              // value: 被校验的值
              // callback是回调函数
              // 如果通过了规则，调用callback()
              // 如果没有通过规则，就调用callback(new Error('错误说明'))
              //正则表达式
              let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
              if (reg_tel.test(value)) {
                callback()
              } else {
                callback(new Error('请输入正确的电话号码'))
              }
            },
            trigger: "blur"// 验证触发方式
          }
        ],
    }
   }
}

表单提交验证

 submit() {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          this.$Message.success('提交成功!');
          this.open = false
        } else {
          this.$Message.error('表单验证失败!');
        }
      })
    },