el-form 表单填写验证

最新推荐文章于 2024-06-27 10:50:18 发布

瘦瘦瘦瘦不了

最新推荐文章于 2024-06-27 10:50:18 发布

阅读量514

点赞数

分类专栏： vue 文章标签： javascript

本文链接：https://blog.csdn.net/dreamy_wx/article/details/127263805

版权

vue 专栏收录该内容

36 篇文章 1 订阅

订阅专栏

<el-form ref="formData" :model="formData" label-width="100px" :rules="rules">
   <el-form-item label="客户名称" prop="name">
     <el-input v-model="formData.name" autocomplete="off" />
   </el-form-item>
   <el-form-item label="截止时间" prop="time">
     <el-date-picker
       v-model="formData.time"
       type="datetime"
       placeholder="选择日期时间"
       :picker-options="pickerOptions"
     ></el-date-picker>
   </el-form-item>
   <el-form-item label="任务积分" prop="taskIntegral">
     <el-input v-model="formData.taskIntegral" autocomplete="off" />
   </el-form-item>
 </el-form>

data() {
    //只允许中英文 + 数字 + 允许的标点符号
    const specialCharacter = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入客户名称"));
      } else {
        if (/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\.\-\——\(\)\+\$]/g.test(value)) {
          callback(new Error("请不要包含空格及特殊字符"));
        } else {
          callback();
        }
      }
    };

    //正整数和0  含0（/^([1-9]\d*|[0]{1,1})$/）
    const validNumber = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入任务积分"));
      } else {
        if (!/^[1-9]+\d*$/.test(value)) {
          callback(new Error("请输入正整数"));
        } else {
          callback();
        }
      }
    };
    return {
      rules: {
        name: [
          { required: true, trigger: "blur", validator: specialCharacter }
        ],
        time: [{ required: true, message: "请选择截止时间", trigger: "blur" }],
        taskIntegral: [
          { required: true, trigger: "blur", validator: validNumber }
        ]
      },
      formData: {
        name: "",
        time: "",
        taskIntegral: ""
      },
    };
  },
  methods:{
  confirmFn(flag) {
      let params = {
        operationType: "addColdCallTask",
        customer_name: this.formData.name,
        dead_line: this.$moment(this.formData.time).format(
          "YYYY-MM-DD HH:mm:ss"
        ),
        score: this.formData.taskIntegral
      };
        this.$refs.formData.validate(async valid => {
          if (valid) {
            console.log("submit!");
          } else {
            return false;
          }
        });
}