element form 表单长度数字英文验证重置

douyiqing

于 2024-02-05 09:37:59 发布

阅读量139

点赞数 1

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/douyiqing/article/details/136036330

版权

本文介绍了在日常开发中如何使用Vue.js的ElementUI库中的el-form进行表单验证，包括数字验证规则和重置功能的实现。

摘要由CSDN通过智能技术生成

日常开发过程中，表单功能很常见：

下面是一些常见表单验证重置功能，主要包括数字的验证

<template>
  <el-form
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="100px"
    class="demo-ruleForm"
  >
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item prop="creditCode">
      <template slot="label">只能输入英文和数字：</template>
      <el-input
        class="w240"
        v-model="ruleForm.creditCode"
        placeholder="请输入"
        clearable
        size="small"
      />
    </el-form-item>
    <el-form-item prop="phoneNumber">
      <template slot="label">输入正确的手机号码：</template>
      <el-input
        class="w240"
        v-model="ruleForm.phoneNumber"
        placeholder="请输入"
        clearable
        size="small"
      />
    </el-form-item>
    <el-form-item prop="rate">
      <template slot="label">只能保留三位小数: </template>
      <el-input
        class="w240"
        v-model="ruleForm.rate"
        placeholder="请输入"
        clearable
        size="small"
      />
    </el-form-item>
    <el-form-item prop="priceBefore">
      <template slot="label">大于等于0，保留两位小数: </template>
      <el-input
        class="w240"
        v-model="ruleForm.priceBefore"
        placeholder="请输入"
        clearable
        size="small"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')"
        >立即创建</el-button
      >
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        creditCode: [
          {
            pattern: /^([a-zA-z]+|[0-9]+|[0-9a-zA-z])*$/,
            message: "只能输入英文和数字",
          }
        ],
        phoneNumber: [
          {
            required: true,
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: ["blur", "change"],
          },
        ],
        rate: [{ pattern: /^-?\d+(\.\d{1,3})?$/, message: "只能保留三位小数" }],
        priceBefore: [
          {
            pattern: /^([0-9]\d*)+(\.\d{1,2})?$/,
            message: "大于等于0，保留两位小数",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>